Captions are the text that appear below a visual UI asset. They should explain the contextual information of the asset (who, what when, where). Both sighted and screen readers rely on captions. Captions should be used instead of alt text for longer descriptions. Be cautious of repeating the same content in your caption and alt text, this may slow down screen reader users.

Captions

Adjacent text or body text is the text that appears near the image that can explain the  image within a narrative. If the adjacent texts explains the asset then there may not be a need for alt text. To leave alt text empty replace it with (alt="").

Adjacent Text

Screen readers are unable to read text that's been embedded in an image. If there is essential information embedded as text in the image, consider including the essential information in the alt text as well. This ensures that those using screen readers don't miss anything important. However, be cautious of repeating information in both the embedded text and alt text.

Embedded Text in Images

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

University of Illinois at Urbana-Champaign

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.

Writing and Accessibility Text

Material Design Documentation

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

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. 

Learn Before

Related

Learn After