Accessibility

Check Your Colors

Do not rely on color as a navigational tool or as the sole way to differentiate items. Make sure there is enough contrast between text and its background color. Pair values of colors together (not only hues) to increase contrast, and test on-screen using one of the many free tools available.

Describe Images

Without exception, images should always include an alt attribute in the markup/code. For purely decorative images, a blank (alt="") value is valid, but in all other cases the alt text should succinctly describe an image's contents or meaning. When in doubt, follow this general guideline:

If the content that the image conveys is presented within text in the surrounding context of the image, then an empty alt attribute may suffice.

For a great overview on writing alt text, please refer to this WebAIM guide.

Plan For The Keyboard

Functionality should be accessible through mouse and keyboard and be tagged to worked with voice-control systems. Design focus states to help users navigate and understand where they are. Your designs should never actively hide focus states. When visitors use the keyboard to navigate, your product should include highly visible focus and active states.

Use The Correct HTML

A good base level of accessibility isn't hard with some advanced planning. Adding aria- attributes to your code may not even be necessary with properly semantic HTML. In fact, the first rule of ARIA is not to use it.

Structure conveys meaning: HTML elements communicate to the browser the type of content they contain, and how the browser should render or treat that content. Instead of reaching for a div when creating a list of items or a clickable element, make use of an unordered list and a button element, respectively. This not only helps with semantics, but also can take advantage of baked-in functionality. And when using heading elements to structure text, maintain the proper level (h1 to h6) for consistency in the document to indicate the importance of the item. Do not rely on CSS to make the element look how you would like. Let some of the work be done by the HTML default styles.

Validating

The Design System is only the foundation for accessible application development. We recommend that you review the accessibility of your applications before release and ensure that it meets the WCAG Standard at the AA Level.