Accessibility

Accessibility in design allows users of diverse abilities to navigate, understand, and use your UI.


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...

Read More

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 Google accessibility site.


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 who have...

Read More

A screen reader is a software program that uses a braille display or reads text aloud, such as Google’s screen reader TalkBack. People who have vision impairments, temporarily can’t read, or have difficulties reading may use a screen reader. The program will read out visible content such as paragraph and button text, as well as hidden content like alternative text for icons and headings. Content can be labelled for those who use screen readers or experience a text-only version of your UI.

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 a quick sense of an entire interface. Or 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 screen to read pages linearly, 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.

Read More

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, it helps users know where they are in your app and what’s important. To emphasize which information is important, it can use multiple visual and textual cues like color, shape, text, and motion.

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 navigation controls easy to locate and clearly written. 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...

Read More

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 suggest 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
Correct hierarchy example

Do.

By placing important actions at the top of the screen, they are given more importance in the hierarchy.

Incorrect hierarchy example

Caution.

When important actions are embedded within other content, it may be unclear what the most important elements are on the page.

Visual hierarchy

To make sure that the screen reader is reading 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.


HTML code for four-step recipe

Do.

The HTML reflects the visual hierarchy by reading the content from the top left (Step 1) to the top right (Step 2), bottom left (Step 3) to bottom right (Step 4).

Code example:

<section class="container">
   <img class="step-1" />
   <img class="step-2" />
   <img class="step-3" />
   <img class="step-4" />
</section>

HTML code for four-step recipe

Don’t.

While some users may look at images in the visual order of the screen from top left (Step 1) to the top right (Step 2), bottom left (Step 3) to bottom right (Step 4), screen readers will, by default, verbalize the content in the top-down order of the HTML (Step 1, Step 3, Step 2, and Step 4).

Code example:

<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>

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...

Read More

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.

Example of focus order

The black circles indicate the order in which onscreen elements could receive focus.

Grouping

Items can be grouped under headings that communicate what the groupings are. These groups organize content spatially.

Read More

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...

Read More

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 on 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...

Read More

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...

Read More

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 a color is from another color, commonly written as 1:1 or 21:1. The higher the difference 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 W3C recommends the following contrast ratios for body text and image text:

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

Correct color contrast

Do.

These lines of text follow the color contrast ratio recommendations and are legible against their background colors.

Incorrect color contrast

Caution.

These lines of text don’t meet the color contrast ratio recommendations and can be difficult to read against their background colors.

Icons or other critical elements should also consider using the above recommended contrast ratios.

Correct color contrast for icons

Do.

These icons follow the color contrast ratio recommendations and are legible against their backgrounds.

Incorrect color contrast for icons

Caution.

These icons don’t follow the color contrast ratio recommendations and may be difficult to discern against their backgrounds.

Logos and decorative elements

Decorative elements (such as logos or illustrations) don’t need to meet contrast ratios, but if they serve an important function (like linking to a website)...

Read More

Decorative elements (such as logos or illustrations) don’t need to meet contrast ratios, but if they serve an important function (like linking to a website) it helps to make them distinguishable.

Decorative logo

Do.

Decorative logos that are distinguishable don’t have to meet contrast ratios.

Distorted decorative logo

Don’t.

Don’t distort your logo to meet contrast ratios.

Other visual cues

For users who are colorblind, or cannot see differences in color, other design elements can help express the same amount of information. Because colorblindness takes...

Read More

For users who are colorblind, or cannot 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.

Correct text field example

Do.

The text field error state is communicated through multiple cues: title color, text field stroke, and an error message below the field.

Incorrect text field example

Caution.

The text field error state is only communicated with a colored stroke, which could be missed, such as by a user who cannot perceive color.


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...

Read More

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.

Touch targets should be 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.

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. Pointer targets should be at least 44 x 44 dp.

touch target specs

Avatar: 40dp
Icon: 40dp
Touch target on both: 48dp

Examples

Touch targets

Touch target spacing

In most cases, touch targets should be separated by 8dp of space or more to ensure balanced information density and usability.

Touch target height

Touch target height: 48dp
Button height: 36dp

Examples

Touch targets and buttons

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...

Read More

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.

Correct slider value example

Do.

The slider value is in close proximity with the slider control.

Incorrect slider value

Don’t.

Don’t place the slider value too far away from the control. Someone using screen magnification may not be able to view both the slider and the value without panning back and forth.

Typography

To improve readability, users might increase font size. Mobile devices and browsers include features to allow users to adjust font size system-wide. To enable system...

Read More

Fonts

To improve readability, users might increase font size. Mobile devices and browsers include features to allow users to adjust 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) .

Sufficient space for large and foreign language fonts N. See Line Height for information on the recommended sizes of foreign language fonts.


Writing

Accessibility text

Accessibility text refers to text that is used by screen reader accessibility software, such as TalkBack on Android, VoiceOver on iOS, and JAWS on desktop....

Read More

Accessibility text refers to text that is used by screen reader accessibility software, such as TalkBack on Android, VoiceOver on iOS, and JAWS on desktop. Screen readers read text and elements (such as buttons) on screen aloud, 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 are short labels (up to 125 characters) in the code that describe images 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 will appear if the image fails to load. Include targeted keywords to help inform the user about the image. Keywords can also improve search engine optimization (SEO).

Tokyo Tower at night and alt text

Do.

Use alt text to convey what the image is showing in an informative, short phrase.

Alt text example: The Tokyo Tower and skyline at night

Tokyo Tower at night and alt text

Don’t.

Avoid using one or two words to describe an image.

Alt text example: Skyline

Tokyo Tower at night and alt text

Do.

Write short, concise alt text that can be read quickly by a screen reader and give the user context.

Alt text example: A rooftop view of the Tokyo Tower and skyline at night

Tokyo Tower at night and alt text

Don’t.

Avoid long descriptions in alt text. Most screen readers do not read more than 125 characters of text.

Alt text example: The Tokyo skyline. Taken at night from a local hotel rooftop. This image was taken with a digital SLR on March 7, 2014 during a full moon

Tokyo Tower at night and alt text

Do.

Include targeted keywords.

Alt text example: An evening skyline view in Shibakoen, Minato City, Tokyo, Japan

Tokyo Tower at night and alt text

Don’t.

Avoid placing keywords into the alt text simply for the purpose of improving SEO.

Alt text example: Tokyo, tok yo, Japan, japan, ja pan, sushi, tower, evening, night, buildings, build, sky, skyline, view

Tokyo Tower at night and alt text

Do.

Write alt text that describes the image without using the words, “picture of” or “image of.”

Alt text example: A cityscape featuring the Tokyo Tower at night

Tokyo Tower at night and alt text

Don’t.

Avoid including "image of" or "picture of" in alt text.

Alt text example: An image of the Tokyo Tower

Captions, adjacent text, and embedded text

The text in and around images has to be accessible because it presents key information about the images.

1920s antique rocking chair in Presidential library, arrows pointing to image, caption, adjacent text
  1. Image
  2. Caption
  3. Adjacent text

Captions

Captions are the text that appear below an asset. They explain contextual information such as the who, what, when, and where about the asset. Both sighted and screen reader users rely on captions to describe assets.

1920s antique rocking chair in Presidential library with caption and alt text

Do.

For long descriptions use captions instead of alt text since they are accessible to all users and alt text is limited to 125 characters

Caption example: Originally a staple in the Presidential library, this 1920s antique rocking chair now resides in the home of Dr. Black.

Alt text example: Mahogany wood and green, velvet tufted antique rocking chair in a home library

1920s antique rocking chair in Presidential library with caption and alt text

Don’t.

Alt text and captions should never repeat the same content

Caption and alt text examples: An antique mahogany and tufted green velvet rocking chair from the 1920s in the home library of Dr. Black

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, make sure to remove the imagery file name if it appears.

1920s antique rocking chair in Presidential library with caption, adjacent text, empty alt tag

The caption and the surrounding body text explain the image. The alt tag is empty (alt=””).

Caption example: Originally a staple in the Presidential library, this 1920s antique rocking chair now resides in the home of Dr. Black.

Adjacent text: Found at a garage sale in Orlando, Florida, this antique collectors’ item now lives in the home library of Dr. Simone Black. The chair now sits surrounded by hundreds of books and

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.

1920s antique rocking chair in Presidential library with embedded, adjacent, and alt text

Caution.

Take caution when embedding essential information as text in an image and repeating it as alt text.

Embedded and alt text examples: A former staple in the Presidential library, this 1920s mahogany and green velvet antique rocking chair now resides in the home of Dr. Black

Combining alt text and captions

Alt text and captions contain different information. Alt text is only necessary 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.

1920s antique rocking chair in Presidential library with caption, adjacent and alt text

Do.

Use captions for long descriptions.

Caption text example: Originally a staple in the Presidential library, this 1920s antique rocking chair now resides in the home of Dr. Black. It will be available at auction this coming fall in Boston.

Alt text example: Mahogany wood and green velvet tufted antique rocking chair in a home library

1920s antique rocking chair in Presidential library with caption, adjacent, and alt text

Don’t.

Avoid repeating the same information for the captions and alt text.

Caption & alt text examples: The antique mahogany wood and tufted green velvet rocking chair from the 1920s in the home library of Dr. Black.





Reading speed

Screen reader users hear every UI element read aloud. The shorter the text, the faster the screen reader users can navigate it. Switch to jeffersonloveshiking@gmail.com...

Read More

Screen reader users hear every UI element read aloud. The shorter the text, the faster the screen reader users can navigate it.

Switch to jeffersonloveshiking@gmail.com

Do.

Write clear and short accessibility text.

Account switcher. Switch to account jeffersonloveshiking@gmail.com

Caution.

Consider rewriting long accessibility text.

Control types and states

Screen readers may automatically announce a control’s type or state either speaking the control name, or making a sound. Building More Accessible Custom Views. Related...

Read More

Screen readers may automatically announce a control’s type or state either speaking the control name, or making a sound.

Search

Do.

Use short descriptions.

Search field

You may not need to write the control type.

Download over Wi-Fi only

Do.

Use short descriptions.

Download over Wi-Fi is selected

Caution.

Consider not including the current state, in this case, that Wi-Fi is “selected.”

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 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...

Read More

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.

Action verb example

Do.

The description read aloud indicates the action represented by the icon.

Incorrect example of a description

Caution.

Describing what the icon looks like may not explain what the action does.

Correct example of accessibility text

Do.

Accessibility text for a navigation menu could be “Show navigation menu” and “Hide navigation menu” (preferred) or “Show main menu” and “Hide main menu” (acceptable).

Incorrect example of accessibility text

Caution.

Consider revising accessibility text that doesn’t indicate what action will occur, such as “Side drawer.”

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...

Read More

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, if the icon is selected, the text label can specify the action that occurs, such as “Add to wishlist.”

Control interactions

Users may be navigating with a keyboard or other device, not with their fingers or a mouse, so keep that in mind when telling them...

Read More

Users may be navigating with a keyboard or other device, not with their fingers or a mouse, so keep that in mind when telling them how to interact with a control. Accessibility software will describe the correct interaction for the user.

Correct example of a command.

Do.

The command “voice search” describes the user task (search) paired with the input method (voice).

Incorrect example of a command

Caution.

Consider revising commands that don’t fully express how to activate a control. This voice command says “tap,” even though it could be selected via a keyboard press, switch device, or braille display. As this task is to perform a search, that action could be mentioned instead of “speak”.

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...

Read More

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 the...

Read More

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 the image has to meet color contrast guidelines and needs a caption, determine if your image is decorative or informative.

Decorative images don’t add information to the content of a page. They:

  • 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

Informative images convey a concept in a short, digestible manner. Informative images:

  • 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
New York City Highline and alt text example

Do.

This informative image is a photo that shows what the location looks like.

Alt text example: Aerial view of people walking and biking on the High Line in New York City

Foot pedaling a bike and alt text example

Don’t.

Avoid using decorative images, such as a bicycle or an ice cream cone, to show a location. They are nondescript and don’t provide additional information.

Alt text example: Close-up on a person’s foot pedaling a bike.

Essential and non-essential elements

Informative images may have essential and non-essential elements. Any essential information has to have a 3:1 color contrast ratio for large text and 4.5:1 for small text.

SIM card installation with essential and non-essential elements

The illustration contains both essential and non-essential information:

  1. Essential: The text meets all contrast ratios and size requirements.
  2. Essential: An illustrative visual representation of the instructions that follows color contrast guidelines.
  3. Non-essential: The decorative elements create background and personality for the illustration. They do not relay information and do not have to meet contrast requirements.

Functional images

Functional images are logos, icons, images within a button, and images that are actionable, such as a link. The alt text for functional images differ from alt text for other types of imagery because functional imagery alt text depicts the image’s function – not its content or what it looks like.

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 Writing for information on writing accessible text.

Logos

Logos require an alt tag describing their function but they are a unique kind of functional image because they:

  • Do not need to meet color contrast ratios
  • Do not have text size requirements

See Color and Contrast for more information about logos and color contrast.

However, when a logo is part of a text link and is only decorative without any functionality, add a null value alt tag (alt=””).

Google logo and alt text example


The alt text indicates that clicking on the logo will direct the user to the Google Search Home website.

Alt text example: Link to Google Search Home


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...

Read More

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 touch exploration, labels are spoken aloud when users touch UI elements on screen.

Screenreaders 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 (as 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...

Read More

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:

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...

Read More

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 fade away 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 Composition.


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.

Example of a standard platform dialog

Do.

Use native elements, such as the standard platform dialog.

Example of a non-standard platform dialog

Don’t.

Don’t use non-standard elements, such as a non-standard platform dialog to perform a standard dialog task. It requires extra testing to work well with assistive technology.

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.
Example of scalable text

Do.

Scale your UI to work well with magnification and large text.

Example of poorly scaled text

Don’t.

This UI hasn’t scaled well with magnification and large text. Portions of content are overlapping or cut off.

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 can...

Read More

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) containing icons that have no visible text. For web apps, add an add aria-label.

  1. Label the Search icon
  2. Label the Microphone icon
  1. Label the Edit icon
  2. Label the Chat icon

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...

Read More

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 Google Drive.

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:...

Read More

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 major tasks you want your users to complete 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 you can give them the best experience.