Accessibility is everyone’s responsibility. Start early in your team’s planning process with accessibility in mind, to avoid time consuming and expensive reworks 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 give you access to more accessibility features by default, whenever you use our components, foundations, guidelines, or tooling.
Everyone will experience a disability at some point in their lives. Whether that’s living with a permanent disability, a temporary injury, or a situational impairment (for example, working in a bright and noisy environment).
Thanks to assistive technology, the web has made the world more accessible to people with disabilities. But the world still has a long way to go before everyone gets an equal experience when they use the internet – and that’s where you come in.
What we design for
We design for people, not compliance. That means considering equity and inclusion throughout every part of the design and development process.
When designing and coding products, we consider:
Visual disabilities - Include people who are blind or low vision by providing good alternative text and semantic HTML. Don’t rely on color or shape to convey meaning, and use accessible color contrast.
Hearing disabilities - Include people who are Deaf, have full loss of hearing, or difficulty processing auditory information by providing information in non-auditory formats.
Limited mobility - Include people who have difficulty using a mouse by supporting keyboard navigation, large selectable targets, and correct semantic HTML for speech recognition software.
Cognitive disabilities - Include people who have memory loss, cognitive overload, difficulty reading or writing, and trauma/mood disorders by using wording and design that is clear and easy to navigate.
Multiple/compound disabilities - Some people have multiple disabilities, so don’t solve for one disability in isolation.
Inclusive language - Use wording that can be localized into other languages, and ensure that it is inclusive of gender, race, age and ethnicity.
Principles for accessible design and code
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 <div> or a <span>. Using semantic HTML helps people who use assistive technology navigate and interpret page elements accurately.
Be inclusive
Great 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.