#Principles of Accessibility
- Perceivable: Information and user interface components must be presented to users in ways they can understand.
- Operable: User interface components and navigation must be usable.
- Understandable: Information and the operation of user interface must be understandable.
- Flexible: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
When we provide a design recommendation for the Arc Design System it is important to be able to demonstrate that the proposed design has had accessibility best practices taken into account. Refer to the principles above and also consider these points specifically:
#Accessibility and the Design System
- Are contrast levels adequate for users who have one or more forms of disability with their vision? This is an example of the perceivable principle.
- Are indicators, labels, or other ways of conveying information able to do so without color? For example, a graphic with a specific color but no text label may not be interpreted correctly by users who have color blindness. This is an example of the understandable principle.
- Are all elements of the interface keyboard operable? Is the tab index clear, usually working left to right*? Are there any functions in the component or pattern which are not accessible via keyboard? This is an example of the *operable* principle.
- Do the developers have the information they need to provide ARIA labels which will allow assistive technology to work with the component or pattern? This is an example of the flexible and operable principles.
- Are various states in a component or pattern clear, available (doesn’t disappear quickly, or is often dismissed accidentally), and understandable by human beings? This is an example of the understandable principle.
- Mac Voice Over - Built in screen reader that comes with Mac OS
- WAVE Chrome extension - Tool to help test sites for 508 Compliance
- Stark - Sketch & Figma Plugin for testing color contrast ratios
- Universal Design: Building products to be usable by anybody regardless of age, disability, or other factors. Read more
- ADA: Americans with Disabilities Act
- WCAG: Web Accessibility Guidelines devised by the W3C.
- Section 508: Legal standard for accessibility related to the ADA
- ARIA labels: https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics
- Shopify’s Polaris system docs on accessibility: https://polaris.shopify.com/foundations/accessibility