Skip to main content

Foundation

Accessibility

Make all abilities people interact with accesslible products

banner-Accessibility

What is Accessibility?

Web accessibility ensures that people with disabilities can perceive, understand, navigate, interact with, and contribute to the applications you create. This means that pages are Perceivable, Operable, Understandable and Robust. This includes providing keyboard interaction alternatives for all mouse-based actions, properly identifying all form fields and buttons, providing text based alternatives for all images, videos, icons and SVGs, as well as building components that properly convey their identity, operation model, and state to assistive technologies.

The Design System enables accessible development by providing a set of semantically correct components, each with appropriate ARIA markup so they can be identified correctly to users of assistive technologies.

accessibility

Structure and hierarchy


Consistent, clear hierarchy helps people who navigate the page using links or headers. Use headings and titles to outline the page so people can see the structure and how sections relate to each other.

accessibility

Typography


Clear typography helps ensure the content is readable and everyone can follow the flow of the text. This means making sure the text is big enough to read and the spacing around the text makes it easy to distinguish what should be read.

accessibility

Colors


We comply with AA standard contrast ratios. To do this, we choose primary, secondary and extended colors that support usability. This ensures sufficient color contrast between elements so that people with low vision can see and use our products.

accessibility

Images and video


For important information, use text rather than images. Only use images that usefully add to the text. Describe non-text elements in the UI or with alternative text so screen readers can succinctly describe images and media. Avoid moving or flashing images if possible.



Resources