Accessibility
When apps are accessible, the experience is better for everyone.
Building accessible apps
An accessible app means people of all abilities can interact with, understand, and navigate it.
ADS components ship with built-in accessibility features, such as keyboard support and sensible ARIA usage. However, you still need to review your patterns, content, and interactions so your app is accessible end-to-end.
Follow our accessibility principles
Our principles cover the main requirements to design and build accessible experiences, helping you to put accessibility into action.
Build consistent experiences
The user experience should be familiar, identifiable, and work as expected regardless of device, screen size, platform, or assistive technology.
- Use design system components as the basis of every experience. They have inbuilt accessibility features and create consistency across apps.
- Ensure the same components, patterns, and interactions are used for the same experiences across pages and apps to lessen cognitive load.
Keep experiences and language simple
Respect people’s time by making apps that are uncomplicated and easy to use.
- Avoid complex process and experiences.
- Use similar patterns across apps and experiences.
- Use concise and plain language.
- Aim for content to be written at a reading level of ages 12 to 14.
Be inclusive
Accessible design is inclusive of people of all races, ethnicities, genders, sexual orientations, and backgrounds.
- Use inclusive language.
- Don’t make assumptions about people’s abilities.
- Avoid jargon, metaphors, and non-literal phrases.
Give people control
People should be able to adapt our apps to suit their needs.
- Enable reflow across all screen sizes.
- Allow people to adjust scale, contrast, and colors.
- Make sure personal reduced motion settings are respected by our apps.
- Inform people about high-impact changes before you make them.
Provide text alternatives
Text is powerful for assistive technologies, as it can be seen on a screen, heard using text-to-speech, and touched with a braille screen reader.
- Use visible and accessible labels.
- Write clear and concise labels and alternative (alt) text.
- Include a transcript for videos on the page or link to it.
Ensure color is accessible
Some people can’t perceive color, while others perceive limited color.
- Never rely on color alone to convey meaning.
- Use a color contrast ratio of 4.5:1 for regular text and 3:1 for large text and graphics.
Use semantic HTML
Semantic HTML describes the exact meaning of an element to a web browser. It helps people using assistive technology navigate and interpret page elements.
- Use
header,nav,footer(for example). - Don't use
divorspan(for example) as they don't convey meaning.
Test apps broadly
Test with different tools and a diverse array of people.
- Test apps with people with disabilities and across different levels of technical experience.
- Use different types of technology and accessibility tools, such as Accessibility Insights, to test your app.
What to consider when building accessible apps
Everyone will experience a disability at some point in their lives, whether it's a situational impairment or a permanent or temporary disability. At these times, assistive technology can help people use our apps — but only if they’re built to be accessible.
Consider the following when designing and building your app. And remember: people are multi-faceted, so it's important not to solve for one disability in isolation.
Visual disabilities
- Provide clear and informative alternative (alt) text and semantic HTML.
- Don’t rely on color alone to convey meaning, and make sure color contrast is accessible.
- Examples of visual disabilities include:
- Blind (permanent)
- Migraine (temporary)
- Lost glasses (situational)
Auditory disabilities
- Include closed captions and transcripts for videos.
- Make sure transcripts for audio are available.
- Examples of auditory disabilities include:
- Deaf (permanent)
- Ear infection (temporary)
- On public transport (situational)
Limited mobility
- Support keyboard navigation, large selectable targets, and correct semantic HTML.
- Examples of limited mobility include:
- Cerebral palsy (permanent)
- Broken wrist (temporary)
- Crying baby (situational)
Cognitive disabilities
- Use wording that’s clear and in plain language.
- Break up big chunks of text using headings and subheadings, bullet points, and small paragraphs.
- Design experiences that are easy to navigate.
- Examples of cognitive disabilities include:
- Dyslexia (permanent)
- Anxiety (temporary)
- Busy office (situational)