Accessibility
Accessible design lets people of all abilities interact with, understand, and navigate our products.
Our commitment
Accessibility is everyone’s responsibility. Design early in the planning process with accessibility in mind to avoid rework later.
We’re here to create products where nobody has to have a confusing, unpleasant, or exclusionary experience. We’re regularly iterating on this design system to provide more accessibility features by default.
Accessibility is not onl;y at the component level. Using accessible building blocks doesn’t magically make the rest of your webpage or application compliant.
We are fully aware that I may not get it right every time for every user, we invite the community to participate in this ongoing effort by submitting issues, requests or discussions around accessability.
Principles
Make interactions consistent
Use the same solutions to solve the same problems. Regardless of what kind of device, screen size, platform, or assistive technology someone is using, they should be able to complete their tasks in a similar way. Use design system components so every experience feels familiar.
Provide text as an alternative
Text is a powerful tool for assistive technologies, as it can be interpreted by:
- Seeing the words on a screen
- Hearing words, using a text-to-speech screen reader
- Touching the words, using a braille screen reader
This means that good labeling, alt text, and transcripts are essential to making your products accessible.
Use accessible colors
Never rely on color to convey meaning. Some people can’t perceive color at all, while others perceive limited color, and some colors have different meanings in different cultures. Use a color contrast ratio of 4.5:1 for regular text and 3:1 for large text and graphics so people can perceive it.
Give people control
Make sure your design reflows across all screen sizes, and let people adjust the scale and colors (for example, offer dark mode and increased contrast modes). Honor reduced motion settings, and make sure that people are well informed about high-impact changes to the system before they make them.
Use semantic HTML
Semantic HTML describes the exact meaning of an element to the web browser. For example, a heading, a section, or a navigation. This is the opposite to elements that don’t convey meaning, like a or a . Using semantic HTML helps people who use assistive technology navigate and interpret page elements accurately.
Be inclusive
Accessible design is intersectional, and inclusive of people of all races, ethnicities, genders, sexual orientations, and backgrounds. We acknowledge that some people live with multiple disabilities, or are marginalized in multiple ways. We celebrate that our differences are key to making great products.
Keep it simple
We live in an anxious, busy, and overwhelming world. Most people don’t love products – they use them to get their job done. Respect their time by making software that’s uncomplicated and easy to use.
Test products broadly
Make sure that your products are tested by people that represent our diverse world. Include people with disabilities, people with different levels of technical experience, different types of technology, and people who aren’t advocates for your product.