Understanding accessibility
Improving your product’s accessibility can enhance the usability for all users, including those with low vision, blindness, hearing impairments, cognitive impairments, motor impairments or situational disabilities (such as a broken arm).
Principles
Help users navigate by designing clear layouts with distinct calls to action. Design your app to accommodate a variety of users. Support assistive technologies specific...
Clear
Help users navigate by designing clear layouts with distinct calls to action.
Robust
Design your app to accommodate a variety of users.
Specific
Support assistive technologies specific to your platform, just as you support the input methods of touch, keyboard, and mouse.
Mobile guidance
This section primarily applies to mobile UI design. For more information on designing and developing more accessible products, visit the
Disclaimer
These materials are for your information only, and do not constitute legal advice. Consider consulting your attorney for advice on any particular issue.
Assistive technology
Assistive technology helps increase, maintain, or improve the functional capabilities of individuals with disabilities, through devices like screen readers, magnification tools, and hearing aids.
Screen readers
A screen reader is a software program that uses a braille display or reads text aloud, such as Google’s screen reader TalkBack. People with vision...
A screen reader is a software program that uses a braille display or reads text aloud, such as Google’s screen reader
Navigation with a screen reader
Screen readers give users multiple ways to navigate a screen, including:
- Explore by touch: Touch interface screen readers allow users to run their finger over the screen to hear what is directly underneath. This provides the user with a quick sense of an entire interface. Alternatively, the user can quickly move to a UI element from muscle memory. In TalkBack, this feature is called "explore by touch". To select an item, the user double taps.
- Linear navigation: Users may also move focus by swiping backwards or forwards on a screen to read pages in a linear fashion, from top to bottom. This allows users to hone in on certain elements. In TalkBack, this is called linear navigation.
Users can switch between both “explore by touch” and “linear navigation” modes.
Navigation by landmark
Some assistive technologies allow users to navigate between page landmarks, such as headings, when these landmarks use the appropriate semantic markup.
Directional controllers
Hardware or software directional controllers (such as a D-pad, trackball, or keyboard) allow users to jump from selection to selection in a linear fashion.
Hardware or software directional controllers (such as a D-pad, trackball, or keyboard) allow users to jump from selection to selection in a linear fashion.
Hierarchy
When navigation is easy, users understand where they are in your app and what’s important. To emphasize which information is important, multiple visual and textual cues like color, shape, text, and motion add clarity.
Types of feedback
Visual feedback (such as labels, colors, and icons) and touch feedback show users what is available in the UI.
Navigation
Navigation can have clear task flows with minimal steps with easy to locate controls and clear labeling. Focus control, or the ability to control keyboard and reading focus, can be implemented for frequently used tasks.
Hierarchy
Every added button, image, and line of text increases the complexity of a UI. You can simplify how your UI is understood by using: To...
Every added button, image, and line of text increases the complexity of a UI. You can simplify how your UI is understood by using:
- Clearly visible elements
- Sufficient contrast and size
- A clear hierarchy of importance
- Key information that is discernable at a glance
To convey an item’s relative level of importance:
- Place important actions at the top or bottom of the screen (reachable with shortcuts)
- Place related items of a similar hierarchy next to each other
Visual hierarchy
To enable the screen reader to read out content in the intended order, it’s important for designers to collaborate with developers – both for writing out the HTML in the correct order, and understanding how screen readers will interpret designs.
While CSS determines the layout and appearance of a page, screen readers rely on the top-down structure of HTML on any platform (mobile or web). This structure creates a map for the screen reader to follow when reading the content.
<section class="container">
<img class="step-1" />
<img class="step-2" />
<img class="step-3" />
<img class="step-4" />
</section>
Example code for displaying the images in a screenreader-friendly hierarchy
xxxxxxxxxx
<section class="container">
<div class="col-left">
<img class="step-1" />
<img class="step-3" />
</div>
<div class="col-right">
<img class="step-2" />
<img class="step-4" />
</div>
</section>
Example code for displaying images in which the screenreader reads the items in the left column before reading the items in the right column.
Focus order
Input focus that follows the order of the visual layout usually flows from the top to the bottom of the screen. It can traverse from...
Input focus that follows the order of the visual layout usually flows from the top to the bottom of the screen. It can traverse from the most important to the least important item.
To help determine your focus points and movements, consider:
- The order in which elements receive focus
- The way in which elements are grouped
- Where focus moves when the element in focus disappears
Focus points can be expressed through a combination of visual indicators and accessibility text.
Grouping
Items can be grouped under headings that communicate what the groupings are. These groups organize content spatially.
Items can be grouped under headings that communicate what the groupings are. These groups organize content spatially.
Transitions
Focus traversal between screens and tasks improves the user experience when it’s continuous. If a task is interrupted and then resumed, it can help to...
Focus traversal between screens and tasks improves the user experience when it’s continuous. If a task is interrupted and then resumed, it can help to return focus to the element that was previously focused.
Color and contrast
Color and contrast can be used to help users see and interpret your app’s content, interact with the right elements, and understand actions.
More accessible color
Material Design’s Color Tool can help you choose colors with sufficient contrast between elements Related Link arrow_downward Color can help communicate mood, tone, and critical...
Color can help communicate mood, tone, and critical information. Primary, secondary, and accent colors can be selected to support usability. Sufficient color contrast between elements can help users with low vision see and use your app.
Contrast ratios
Color contrast is important for users to distinguish various text and non-text elements. Higher contrast makes the imagery easier to see. A low-contrast image may...
Color contrast is important for users to distinguish various text and non-text elements. Higher contrast makes the imagery easier to see. A low-contrast image may be hard for some users to differentiate in bright or low light conditions, such as on a very sunny day or at night.
Contrast ratios represent how different one color is from another color, commonly written as 1:1 or 21:1. The greater the difference is between the two numbers in the ratio, the greater the difference in relative luminance between the colors. The contrast ratio between a color and its background ranges from 1-21 based on its luminance (the intensity of light emitted) according to the World Wide Web Consortium (W3C).
The
Text type | Color contrast ratio |
---|---|
Large text (at 14 pt bold/18 pt regular and up) and graphics | 3:1 against the background |
Small text | 4.5:1 against the background |
Icons or other critical elements should also consider using the above recommended contrast ratios.
Logos and decorative elements
Decorative elements (such as logos or illustrations) might not meet contrast ratios, but if they serve an important function (like linking to a website) it...
Decorative elements (such as logos or illustrations) might not meet contrast ratios, but if they serve an important function (like linking to a website) it helps to make them distinguishable.
Other visual cues
For users who are colorblind, or do not see differences in color, other design elements can help express the same amount of information. Because colorblindness...
For users who are colorblind, or do not see differences in color, other design elements can help express the same amount of information.
Because colorblindness takes different forms (including red-green, blue-yellow, and monochromatic), multiple visual cues help communicate important states. Elements such as strokes, indicators, patterns, texture, or text can describe actions and content.
Layout and typography
Material Design’s touch target guidelines can help users who aren’t able to see the screen, or who have difficulty with small touch targets, to tap elements in your app.
Touch and pointer targets
Touch targets are the parts of the screen that respond to user input. They extend beyond the visual bounds of an element. For example, an...
Touch targets
Touch targets are the parts of the screen that respond to user input. They extend beyond the visual bounds of an element. For example, an icon may appear to be 24 x 24 dp, but the padding surrounding it comprises the full 48 x 48 dp touch target.
For most platforms, consider making touch targets at least 48 x 48 dp. A touch target of this size results in a physical size of about 9mm, regardless of screen size. The recommended target size for touchscreen elements is 7-10mm. It may be appropriate to use larger touch targets to accommodate a larger spectrum of users.
Note that on iOS, 44 x 44 pt is the recommended touch target. For platform-specific implementation guidance, visit the
Pointer targets
Pointer targets are similar to touch targets, but apply to the use of motion-tracking pointer devices such as a mouse or a stylus. Consider making pointer targets at least 44 x 44 dp.
Touch target spacing
In most cases, touch targets separated by 8dp of space or more promote balanced information density and usability.
Layout
Flexible, responsive layouts help content scale in relation to the screen size. This helps avoid truncating content that may not display entirely on specific device...
Responsive layouts
Flexible, responsive layouts help content scale in relation to the screen size. This helps avoid truncating content that may not display entirely on specific device types or at varied resolutions.
Grouping items
Related items can be grouped in proximity to one another to improve readability.
Typography
To improve readability, users might increase font size. Mobile devices and browsers include features to allow users to adjust their font size system-wide. To enable...
Fonts
To improve readability, users might increase font size. Mobile devices and browsers include features to allow users to adjust their font size system-wide. To enable system font size in an Android app, mark text and their associated containers to be measured in scalable pixels (sp).
Ensure that there is sufficient space for large and foreign language fonts. See
Writing
Accessibility text
Accessibility text refers to text that is used by screen reader accessibility software, such as Google’s TalkBack on Android, Apple’s VoiceOver on iOS, and Freedom...
Accessibility text refers to text that is used by screen reader accessibility software, such as Google’s TalkBack on Android, Apple’s VoiceOver on iOS, and Freedom Scientific’s JAWS on desktop. Screen readers read aloud the on-screen text and elements (such as buttons), including both visible and nonvisible alternative text.
Visible and nonvisible text
Accessibility text includes both visible text (including labels for UI elements, text on buttons, links, and forms) and nonvisible descriptions that don’t appear on screen (such as alternative text for images). Sometimes an on-screen label may be overridden with accessibility text to provide more information to the user.
When both visible and nonvisible text is descriptive and meaningful, it helps users navigate using headings or links on a screen. A screen reader can help you test accessibility text and identify places where you can add it.
Alternative text (Alt text)
Alt text helps translate a visual UI into a text-based UI. Alt text is a short label (up to 125 characters) in the code that describes an image for users who are unable to see them. Since alt text is only for images, there is no need to add “image of” or “picture of” to the alt text. A screen reader will read the alt text aloud in place of the image. Alt text is valuable for sighted users as well as alt text appears if an image fails to load. Include targeted keywords to help inform the user about the image. Keywords can also improve search engine optimization (SEO).
Captions, adjacent text, and embedded text
The text in and around images should consider accessibility because it presents key information about the images.
Captions
Captions are the text that appear below an asset. They explain an asset’s contextual information–the who, what, when, and where. Both sighted and screen reader users rely on captions for descriptions of assets.
Adjacent Text
Adjacent text or body text is the text next to the image that can explain the image within a narrative. If the adjacent text explains the asset, then alt text may not be needed and the alt tag can be left empty (alt=””). If leaving the alt tag empty, remove the imagery file name if it appears.
Embedded text in images
Screen readers are unable to read text that is embedded in imagery. If there is essential information embedded as text in the image, include the essential information in the alt text.
Combining alt text and captions
Alt text and captions contain different information. Alt text is only useful when the adjacent text and caption do not explain characteristics of the image that are important to understand for those who cannot see the image, such as descriptions of the colors, sizes, and location of an object.
Reading speed
Screen reader users hear every UI element read aloud. The shorter the text, the faster a screen reader user can navigate it. Switch to jeffersonloveshiking@gmail.com...
Screen reader users hear every UI element read aloud. The shorter the text, the faster a screen reader user can navigate it.
Control types and states
Screen readers may automatically announce a control’s type or state by either speaking the control name or making a sound. Building More Accessible Custom Views....
Screen readers may automatically announce a control’s type or state by either speaking the control name or making a sound.
Developer note
If the control type or state isn’t being read correctly, the control’s accessibility role may be a custom control or improperly set.
- Accessibility role association: Each element can be associated with an accessibility role on a website or can be coded to be communicated correctly. This means setting a button as a button, and a checkbox as a checkbox.
- Native elements: If you extend or inherit from a native UI element, you will probably find the correct role. Otherwise, to override accessibility information for each platform, see ARIA for the web and AccessibilityNodeInfo for Android.
Indicating elements by action
Action verbs indicate what an element or link does if tapped, rather than what an element looks like. This describes what an element does without...
Action verbs indicate what an element or link does if tapped, rather than what an element looks like. This describes what an element does without relying on visual acuity.
Elements with state changes
For icons that toggle between values or states, announce the icon according to how it is presented to the user. For example, if a star...
For icons that toggle between values or states, announce the icon according to how it is presented to the user. For example, if a star icon represents the action of adding something to a wishlist, the app could verbalize “Add to wishlist” or “Remove from wishlist.”
- If the icon is a property of an item, screen readers will verbalize the current state (such as “on” or “off”) if coded as a checkbox.
- If the icon is an action and is selected, the text label can specify the action that occurs, such as “Add to wishlist.”
Control interactions
Users might navigate with a keyboard or other device, not with their fingers or a mouse, which should be considered when describing for users how...
Users might navigate with a keyboard or other device, not with their fingers or a mouse, which should be considered when describing for users how to interact with a control. Accessibility software will describe the correct interaction for the user.
Hint speech
Hint speech provides extra information for actions that aren't clear. For example, Android's “double-tap to select” feature prompts the user to tap twice. Android TalkBack...
Hint speech provides extra information for actions that aren't clear. For example, Android's “double-tap to select” feature prompts the user to tap twice. Android TalkBack will also announce any custom actions associated with an element.
Imagery
Types of images
To know when and how to apply accessibility guidelines to imagery, it’s important to understand the differences between image types. To find out if an...
To know when and how to apply accessibility guidelines to imagery, it’s important to understand the differences between image types.
Decorative and informative images
To find out if an image needs to meet
According to the
- Don’t need captions
- Don’t have to meet color contrast guidelines
- Don’t need alt text
- Should have a null (empty) tag (alt=””) in the image label so screen readers skip them
According to the
- Relay accurate information that is relevant to the adjacent text
- Need captions
- Need alt text if the caption or adjacent text does not explain the image
- Have to meet color contrast guidelines for essential items
Essential and non-essential elements
Informative images have essential and non-essential elements. Essential information should have a 3:1 color contrast ratio for large text and 4.5:1 for small text.
Functional images
According to the
When the icon or image within a button has a specific function, add an alt tag to it explaining its function with an action verb, not the icon name. See
Logos
Logos may benefit from an alt tag describing their function, but they are a unique kind of functional image because they:
- Might not meet color contrast ratios
- Might not meet text size requirements
See
However, when a logo is part of a text link and is only decorative without any functionality, add a null value alt tag (alt=””).
Sound and motion
Sound
Labeling User Interface Elements Related Link arrow_downward Users can navigate your app using sound when you add descriptive labels to UI elements. When using a...
Users can navigate your app using sound when you add descriptive labels to UI elements. When using a screen reader (such as TalkBack) and navigating by
Screen readers can be difficult to use when:
- Sound plays over a screen reader, such as background music that autoplays (you can provide controls for users to pause or stop these sounds)
- Extra sounds are added to native elements (screen readers will be able to interpret native elements correctly)
Alternatives to sound
Visual alternatives can be given to sound or other critical audio elements and alerts, such as closed captions or a transcript.
Motion
Material Design uses motion to guide focus between screens. Surfaces transform into focal points for the user to follow and unimportant elements are removed. To...
Material Design uses motion to guide focus between screens. Surfaces transform into focal points for the user to follow and unimportant elements are removed.
To allow users with motion and vision sensitivities to use interfaces comfortably, Material Design provides motion guidance, which supports the following from the W3C:
- Enable content that moves, scrolls, or blinks automatically to be paused, stopped, or hidden if it lasts more than five seconds
- Limit flashing content to three times in a one-second period to meet flash and red flash thresholds
- Avoid flashing large central regions of the screen
Timed controls
Controls in an app can be set to disappear after a certain amount of time. For example, five seconds after starting a video, playback controls...
Controls in an app can be set to disappear after a certain amount of time. For example, five seconds after starting a video, playback controls can fade from the screen.
High-priority controls
Controls that perform high-priority functions can be missed by users if timers cause them to disappear too quickly. For example, TalkBack reads controls out loud if they are focused on. Placing them on timers can prevent the controls from completing their task.
Controls that enable important functions can allow users to turn them on again, or perform the same function in other ways. Learn more in
Implementing accessibility
By using standard platform controls and semantic HTML (on the web), apps automatically contain the markup and code needed to work well with a platform’s assistive technology. Meeting each platform's accessibility standards and supporting its assistive technology (including shortcuts and structure) gives users an efficient experience.
You can test your design with the platform accessibility settings turned on (both during and after implementation.)
Other design considerations:
- Scalable text and a spacious layout accommodate users who may have large text, color correction, magnification, or other assistive settings turned on.
- Keyboard and mouse interfaces can have every task and all hover information available through keyboard-only input.
- Touch interfaces can allow screen readers and other assistive technology devices to read all parts of your interface.
Label UI elements
To let screen reader users know which UI elements are tappable, enable screen readers to read the names of components out loud. The contentDescription attribute...
To let screen reader users know which UI elements are tappable, enable screen readers to read the names of components out loud. The contentDescription attribute can be added to components (such as buttons, icons, and tabs) that contain icons without visible text. For web apps, add an
Help documentation
Features with special accessibility considerations can be included in help documentation. As an example, review this guide on how to use a screen reader with...
Features with special accessibility considerations can be included in help documentation. As an example, review this guide on how to use a screen reader with
Testing and research
Following these accessibility guidelines helps improve the accessibility of your app, but does not guarantee a fully accessible experience. It is recommended that you also:...
Following these accessibility guidelines helps improve the accessibility of your app, but does not guarantee a fully accessible experience. It is recommended that you also:
- Test your app for full task completion, beginning to end, with various assistive technologies turned on. For example, turn on Explore by Touch in TalkBack and change the speed at which text is spoken out loud.
- Have users with impairments test your app.
- Consider how individual elements can be made more accessible while also fitting together in a coherent user flow.
- Make the primary tasks in an app as usable as possible for a wide range of users.
Talk to your users, particularly those who use assistive technology, to learn about their needs, what they want out of your app, which tools they use, and how they use them. Become familiar with these tools so that you can give them the best experience.