Alt text helps translate a visual UI into a text-based UI. Alt text is a short label that is up to 125 characters embedded in the code describing an image for visually impaired users. There is no need to add text stating that the UI is an "image of" or "picture of" since alt text is only used for images. A screen reader will read the text aloud in place of the image. Alt text also appears in place of the image if the original image fails to load.

Alternative Text (Alt Text)

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.

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

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. 

Learn Before

Related

Learn After