Why is accessibility important?
Accessibility is crucial in product design because it ensures everyone can use and benefit from our products. It’s about inclusion, expanding our audience, and ethical design. Prioritizing accessibility removes barriers for those with disabilities and improves usability for all, leading to cleaner, more intuitive interfaces.
Who we’re designing for
We have to consider everyone’s lived experiences — whether by birth or their environment. By default, when we think of ability, we often think of visual or hearing impairments. But we also need to consider environmental factors and how they impact a user’s ability to interact with our experience. Consider someone trying to use an app outside on a particularly sunny day. Or someone trying to watch a video in a public setting without headphones.
General tips
We follow the Web Content Accessibility Guidelines (WCAG) which sets best practices for web content and design.
Consider your page structure
- Design for skimming and scanning.
- Be consistent with your headers.
- Keep paragraphs short.
- Use lists when appropriate.
Think top-down, left to right
- Structure your content to be read in the right order.
- This is how screenreaders read, and western cultures.
Be clear and direct
- Does the content make sense?
- Is the point intuitive?
Be consistent
- Follow established patterns.
- Use the same terms to mean the same thing.
Principles for accessible design
If an experience isn’t accessible, it’s not usable. A few basic principles can make our content accessible for everyone, no matter their situation. These principles serve as a framework for creating consistent, accessible, and user-friendly products. For more detailed information, review our accessibility deck.
Perceivable
People are aware of what’s on the screen.
A good guideline when thinking about making your design perceivable is to think about screen readers. If each element of your design is read out loud, does it make sense?
Use meaningful alt-text
Alt text is a short description of an image, icon, or chart. It allows everyone to understand an image, icon, or chart without seeing it.
- Consider what text makes sense in its place.
- Aim for max 125 characters, the standard cut-off for most screenreaders.
- If an image or icon is decorative, skip the alt-text. Only include the alt-text if it adds meaning to the experience.
Make sure videos have captions or subtitles
Or provide a transcript so the user can still digest the video or audio content.
Be mindful of color
Some users may not be able to perceive color the same way as others. Plus, colors can have different meanings across cultures.
- Avoid relying on color alone to convey meaning, like a status change.
- Linked text should be meaningful and clear. Avoid linking long lines of text.
- Ensure there’s enough color contrast between the font and background.
WCAG compliance
We meet WCAG 2.2 Level AA compliance, requiring 4.5:1 contrast for regular text and 3:1 for large text. See WCAG’s Contrast (Minimum) guidelines for details.
Color tokens
Our semantic color tokens are designed for accessibility by default; however, palette color combinations require manual contrast validation.
Dark mode
Leveraging color tokens allows for the implementation of dark mode, a feature that provides significant accessibility and safety benefits. Dark mode reduces eyestrain, improves readability in low-light environments, and is a common user expectation.
Operable
Navigation and actions are easy to use.
Consider how to better chunk information and break things up to keep the experience feeling light. The more dense it feels, the harder it can be to get around and accomplish tasks.
Use a simple, well-organized navigation
Group menu items in smaller, logical chunks, giving users a clear path on where to go next.
Use descriptive CTAs
- Be short and clear about what happens next.
- Describe the action (“Add user”), not the behavior (“Click here”).
Make forms accessible
All elements of the form should be clear and understandable as the user navigates it.
- Field labels should remain visible when the user selects into it. Review our states for text inputs.
- Place errors in the form, logically aligned with the field so that users understand what needs their attention.
- Labels, tooltips, and input fields should appear in an order that is logically tabbed through.
Input labels
All inputs should have associated labels. If you need to compose custom fields using the base elements, remember that a placeholder attribute is not an acceptable substitute for a <label>.
Understandable
Content and design is simple, clear, and direct.
Craft content that is readable and clear for all users, regardless of ability.
Use plain language
Plain language is “writing that is clear, concise, well-organized, and follows other best practices appropriate to the subject or field and intended audience.” — Plain Writing Act of 2010.
- Use language your audience understands and feels comfortable with.
- Consider what terms they know and are comfortable with.
- Aim for a 5th to 8th grade reading level.
- The simpler, the better — opening up the experience for more people.
Learn more with our readability guidelines.
Be consistent
Consistency helps users easily navigate through the experience and set expectations.
- Use one term to mean the same thing for key actions and navigation.
Structure your content for skimming and scanning
Consider what the user needs to know at the moment. What are the key takeaways? Keep your content focused and simple to digest.
- Use bullet points for simple comprehension.
- Vary sentence length, avoiding long, run-on sentences.
- Add page titles to all screens, sheets, and dialogs to aid user navigation.
Use headings to break up content
After adding a page title, structure content using a clear heading structure (h1–h6) and avoiding skipped levels. This helps all users, especially those with cognitive disabilities or those using screen readers, to navigate and understand content efficiently.
Utilize landmark roles when developing content
Landmark roles are ARIA (Accessible Rich Internet Applications) attributes that define distinct sections of a web page. They provide structural information to assistive technologies, such as screen readers, enabling users to quickly navigate to specific content areas. Ensure all content is within elements with landmark roles. Typically, this means using header, main, and footer. Your page layout may also necessitate aside and nav elements directly within the body.
Robust
Design works across platforms, browsers, devices, and assistive technologies.
Your experience should still be usable and consistent from one platform to another.
Write for all devices
Content should be flexible to work no matter the environment.
- Use device-agnostic terminology like select instead of click or type.
- Avoid directional language such as above or below.
Use emojis sparingly
- Less is more — let them have their moment.
- Place them at the end of a sentence.
- Never use them to replace words.
Test your work
It’s always a good practice to double check your work. These tools can help: