Mobile Accessibility Guidelines - Text Equivalents

Alternatives for non-text content must


Alternatives must briefly describe the editorial intent or purpose of the image, object, or element.


People using screen readers are often vision impaired and unable to perceive non-text content. Providing a brief alternative that the screen reader speaks conveys the same editorial intent or purpose of editorially significant non-text content, such as buttons, icons, images, or avatars.

When alternatives are provided for actionable items such as buttons, or image links, the alternative should describe the action that will be performed. For example, a button with a triangle icon is often used to play content and the alternative would be 鈥淧lay 鈥︹.

If there are several similar items on the same page/screen, each should have a unique alternative to distinguish them from each other. For example, rather than multiple 鈥榮hare鈥 buttons with the same alternative 鈥淪hare鈥, the alternative should be 鈥淪hare 鈥︹ and include the name of the related item.

Verbose alternatives make content harder to listen to and understand for screen reader users. Be succinct, and avoid redundant phrases such as 鈥淧icture of 鈥︹, 鈥溾 logo鈥, or 鈥淪elect this to 鈥︹.

A description of the element type or trait, such as image or button, does not need to be included in the alternative as it is programmatically determined and added by the screen reader. For example, a 鈥榩lay鈥 button coded as a button with the alternative 鈥淧lay button鈥 would be spoken as 鈥淧lay button. Button.鈥. An image coded as an image with an alternative beginning 鈥淚mage of 鈥︹ would be spoken as 鈥淚mage. Image of 鈥︹.


iOS

Use the accessibilityLabel attribute to provide alternatives for non-text content. Alternatively, labels may be added in the Accessibility panel within the Identity Inspector in Xcode.

If the image, object, or element is dynamically updated, make sure that the accessibilityLabel text is also updated to reflect any changes.


Android

Assign labels using the android:contentDescription attribute. Ensure this attribute is applied to every (non-decorative) image, ImageButton, ImageView, Checkbox, and any other controls that may require additional information for users who are unable to see them. Additionally, the focusable and (optionally) importantForAccessibility properties are also required for non-interactive, non-decorative images.

Note that android:contentDescription does not provide an accessible name for text inputs. In such cases, use android:labelFor instead.

Android Pass Example

Typical example of an image button:

<ImageButton
  android:id="@+id/play_button"
  android:src="@drawable/play"
  android:contentDescription="@string/Play" />

Typical example for a non-decorative image:

<ImageView
  android:id="@+id/example_image"
  android:src="@drawable/example_image_source"
  android:focusable="true"
  android:importantForAccessibility="yes"
  android:contentDescription="[alternative text for image]" />

HTML

Apply the alt attribute to the img element to provide a text equivalent for images.

HTML Pass Example

<img src="example_non_decorative_image.png" alt="[alternative text for image]" />

Testing

Procedures

  1. Activate a screen reader.
  2. Identify any meaningful images, elements, or objects.
  3. Verify that an equivalent alternative briefly describes the intent of the functionality.
  4. Verify that words such as 鈥渋mage of鈥, 鈥減icture of鈥, 鈥渓ink to鈥 are avoided.

Outcome

The following checks are all true:

  • Each meaningful image has an alternative that briefly describes the intent and is announced properly;
  • Each alternative does not contain words such as 鈥渋mage of鈥, 鈥減icture of鈥, or 鈥渓ink to鈥.