Accessibility
At Procore, improving the lives of everyone in construction includes those that need to access our products in a variety of ways. Designing with accessibility in mind allows us to build a better experience for our users.
Overview
What is accessibility?
Accessibility (a11y) is the practice of making your product inclusive by enabling as many people as possible can use it without difficulty. This can include anyone with visual, hearing, mobility, or cognitive differences.
This also includes ensuring that a product works well for those using assistive technologies like screen readers, speech recognition programs, keyboards, mobile devices, and more.
Ensuring that a product is inclusive and accessible benefits all users, not just those who may require it.
This also includes ensuring that a product works well for those using assistive technologies like screen readers, speech recognition programs, keyboards, mobile devices, and more.
Ensuring that a product is inclusive and accessible benefits all users, not just those who may require it.
Accessibility Principles
When designing for accessibility, there are four main principles that can be applied, captured in the acronym POUR.
Perceivable information and user interface
This means ensuring that users are able to perceive the information that is being presented to them, as well as the user interface. The product must be able to accessed by a variety of senses that the user might be utilizing to interact with it.
Operable user interface and navigation
This means ensuring that users are able to operate the interface and navigation with whatever interactive technology they may be using.
Understandable information and user interface
This means ensuring that users can easily understand the information being presented to them, as well as understand how to operate the interface.
Robust content and reliable interpretation
This means ensuring that a wide variety of users are able to access and interpret the content, especially as technologies evolve.
All of these principles must be met to ensure that all types of users are able to use a product successfully.
Perceivable information and user interface
This means ensuring that users are able to perceive the information that is being presented to them, as well as the user interface. The product must be able to accessed by a variety of senses that the user might be utilizing to interact with it.
Operable user interface and navigation
This means ensuring that users are able to operate the interface and navigation with whatever interactive technology they may be using.
Understandable information and user interface
This means ensuring that users can easily understand the information being presented to them, as well as understand how to operate the interface.
Robust content and reliable interpretation
This means ensuring that a wide variety of users are able to access and interpret the content, especially as technologies evolve.
All of these principles must be met to ensure that all types of users are able to use a product successfully.
Why does accessibility in a design system matter?
Having a design system that is accessible ensures that the system is consistent across all users. It allows users to become familiar with patterns that may occur across the whole product, reducing confusion and errors when using it.
Creating well-documented and accessible patterns also allows design systems to scale much more efficiently by building upon already accessible components, reducing the time and effort needed to create a new design.
Creating well-documented and accessible patterns also allows design systems to scale much more efficiently by building upon already accessible components, reducing the time and effort needed to create a new design.
Accessibility at Procore
At Procore, we strive to always design with inclusion in mind and are are working to ensure that our design system components, patterns, layouts, and styles meet the World Wide Web Consortium’s Web Content Accessibility Guidelines (WCAG) 2.1 Level AA guidelines.
Some specific areas where we are working to improve accessibility can be found below:
Keyboard Compatibility
Our components, patterns, and layouts are built to be able to be navigated easily and intuitively via the keyboard for users that prefer not to use a mouse.
Colors with Good Contrast
Our component and pattern colors are built to include sufficient contrast to be distinguishable for many common variants of color blindness and contrast sensitivity.
Clear Layout and Design
Our patterns and layouts are built to be intuitively navigated and provide information in clear, hierarchical way for those that may need to focus on a portion of the screen or have difficulty parsing large amount of information at once.
Text to Speech
Our components, patterns, and layouts have been built to be easily read aloud for those with vision impairments or those who understand content better aurally.
Large Links, Buttons, and Controls
Our components have been built to be easily usable on touch screens or for those that are using a touchpad or other navigational device.
Video Captions
Our videos are captioned for those who cannot hear content or need to see the content to better understand it.
Customizable Text
Our component, patterns, and layouts are built to be able to zoom without losing text hierarchy and content legibility for those using screen magnification software.
Speech Recognition
Our components allow speech recognition for dictating text and navigating layouts for those who cannot use the keyboard or mouse.
Understandable Content
Our content has been written to be easily understood by people of all literacy levels and those looking to quickly understand information.
Notifications and Feedback
Our components have been built to provide clear notifications and instructions and provide timely feedback for those who need these messages to better understand functionality.
Some specific areas where we are working to improve accessibility can be found below:
Keyboard Compatibility
Our components, patterns, and layouts are built to be able to be navigated easily and intuitively via the keyboard for users that prefer not to use a mouse.
Colors with Good Contrast
Our component and pattern colors are built to include sufficient contrast to be distinguishable for many common variants of color blindness and contrast sensitivity.
Clear Layout and Design
Our patterns and layouts are built to be intuitively navigated and provide information in clear, hierarchical way for those that may need to focus on a portion of the screen or have difficulty parsing large amount of information at once.
Text to Speech
Our components, patterns, and layouts have been built to be easily read aloud for those with vision impairments or those who understand content better aurally.
Large Links, Buttons, and Controls
Our components have been built to be easily usable on touch screens or for those that are using a touchpad or other navigational device.
Video Captions
Our videos are captioned for those who cannot hear content or need to see the content to better understand it.
Customizable Text
Our component, patterns, and layouts are built to be able to zoom without losing text hierarchy and content legibility for those using screen magnification software.
Speech Recognition
Our components allow speech recognition for dictating text and navigating layouts for those who cannot use the keyboard or mouse.
Understandable Content
Our content has been written to be easily understood by people of all literacy levels and those looking to quickly understand information.
Notifications and Feedback
Our components have been built to provide clear notifications and instructions and provide timely feedback for those who need these messages to better understand functionality.
Current Standards
Keyboard Compatibility
Our components, patterns, and layouts are built to be able to be navigated easily and intuitively via the keyboard for users that prefer not to use a mouse.
Keyboard order and focus states generally follow WebAIM standards. This means that the following general rules can be expected for a majority of Procore components:
Tab
Shift+Tab: Navigates to the previous interactable element.
Enter: Activates links; expand menu bars.
Enter/Spacebar: Activates buttons.
Spacebar: Checks/unchecks checkboxes and radio buttons. If nothing on the page is selected, spacebar will scroll by page.
(Up) and (Down) Arrow Keys: Navigate between options in checkboxes, radio buttons, dropdowns, and scrollable content. If no interactive element is selected, (Up) and (Down) will scroll through the page.
(Left) and (Right) Arrow keys: Expand/collapse submenus; increase/decrease slider values; navigate between radio buttons; choose and activate previous/next tabs.
Escape (
Delete (
Home/End: Goes to the beginning/end of sliders.
Looking for component-specific keyboard interactions? A majority of the components will adhere to the above list. If there are more complex interactions attached to a component, they will be stated in the Keyboard Accessibility section of its own page.
Keyboard order and focus states generally follow WebAIM standards. This means that the following general rules can be expected for a majority of Procore components:
Tab
(TAB): Navigates to the next interactable element.Shift+Tab: Navigates to the previous interactable element.
Enter: Activates links; expand menu bars.
Enter/Spacebar: Activates buttons.
Spacebar: Checks/unchecks checkboxes and radio buttons. If nothing on the page is selected, spacebar will scroll by page.
(Up) and (Down) Arrow Keys: Navigate between options in checkboxes, radio buttons, dropdowns, and scrollable content. If no interactive element is selected, (Up) and (Down) will scroll through the page.
(Left) and (Right) Arrow keys: Expand/collapse submenus; increase/decrease slider values; navigate between radio buttons; choose and activate previous/next tabs.
Escape (
ESC): Collapses dropdowns; closes dialog boxes; clears search boxes.Delete (
DEL): Removes selected values, like tokens from a list.Home/End: Goes to the beginning/end of sliders.
Looking for component-specific keyboard interactions? A majority of the components will adhere to the above list. If there are more complex interactions attached to a component, they will be stated in the Keyboard Accessibility section of its own page.
Resources
Procore Resources
External Resources
We recommend using a checklist while designing to ensure that no accessibility considerations are overlooked:
A11y Project WCAG Compliance Checklist
Vox Product Accessibility Guidelines
A11y Project WCAG Compliance Checklist
Vox Product Accessibility Guidelines