Accessibility text includes visible text(ie. labels for UI elements, button text, links) and non-visible descriptions that aren't immediately displayed on screen (ie. alternate text for images). Sometimes on screen labels are overridden with accessibility text to provide more information to the user.

Meaningful, descriptive visible and non-visible texts are helpful for users to navigate across the screen. You can use a screen reader to help test out your accessibility text and identify places where more can be added.

Visible and Non-visible Text

As a designer you should consider the accessibility of text in and around images because it presents key information about the images.

Captions, Adjacent Text, Embedded Text

Since screen reader users hear every UI element read aloud, the more concise the text, the faster a screen reader user can navigate and process the contents.

Reading Speed

Screen readers may automatically announce a control's type or state by speaking the control name. It's helpful to use short descriptions for each UI element that describes its purpose (ie. Search, Submit). You shouldn't include the control type as the ARIA label will inherently announce the control type for screen readers. Also you should consider not including the current state of the UI element (ie. whether it's selected or not).

Describe Control Types and States

Action verbs should be used to indicate what an element or link does when selected as opposed to describing what the element looks like. This helps describe the element without relying on visual acuity.

Indicating Elements by Action

For icons that toggle between values or states, announce the icon based on how it is presented to the user. 
- If the icon is a property of an item, screen readers will verbalize the current state (ie. "on" or "off) if its coded as a check box. 
- If the icon is an action and selected, the text label should specify the action that occurs (ie. "Add to wishlist" or "Remove from wishlist")

Elements with State Changes

Not all users will navigate your app with their fingers or mouse, some may use a keyboard or other devices. This should be taken into consideration when describing for users how to interact with a control. Accessibility software will help describe the correct interaction for the user.  When writing commands be sure to describe the user task as well as the input method for activating the control.

Describing Control Interactions

Hint speech helps provide extra information for actions that aren't obvious or clear. For example stating "double-tap to select" helps prompt users to tap twice if they didn't know otherwise. 

Hint Speech

It is important to structure your contents in a way that utilizes accessibility text or, text that is used by screen reader accessibility software. Screen readers are able to read aloud the on-screen text as well as assorted elements (ie. buttons), including both visible and non-visible alternative text.

University of Illinois at Urbana-Champaign

- Assistive Technology
- Information Hierarchy
- Color and Contrast
- Accessible Layout
- Writing and Accessibility Text
- Imagery
- Sound and Motion

Elements of Accessible Design

Material Design Documentation

Organizing your information in a way that's intuitive helps users easily navigate through your app and help determine what's important. Information can be emphasized through things like color, shape, text, and motion to add clarity.

Information Hierarchy

Utilizing different colors and contrasts can help improve your user's ability to see, interpret, interact, and understand your app's contents. This is extremely helpful for those with low vision or colorblindness.

Color and Contrast

It's important to consider how your app scales content and responds to various devices and user inputs. These greatly influence the ability for your user to interpret and interact with your design.

Accessible Layout

Writing and Accessibility Text

Different image types will have different accessibility guidelines and different contexts on where it's appropriate to apply these guidelines.
- Decorative images
- Informative images
- Functional images

Types of Imagery

Sound and motion can be incredibly helpful for users to help navigate through your page with or without a screen reader. However, accessibility for screen readers should still be considered when implementing these elements.

Sound and Motion

When using standard platform controls and semantic HTML, apps will automatically contain the markup and code needed to work with a platform's assistive technology. By meeting each platform's accessibility standards and supporting its assistive technology (ie. shortcuts, structure), you can give users an efficient experience. You can test your design with the platform's accessibility settings turned on - this should be done both during and after implementation.

Implementing Elements of Accessible Design

Devices that help maintain or improve the functional capabilities and/or independence of individuals with disabilities.

Learn Before

Related

Learn After