91�ȱ�

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 “Play …”.

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 ‘share’ buttons with the same alternative “Share”, the alternative should be “Share …” 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 “Picture of …”, “… logo”, or “Select 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 ‘play’ button coded as a button with the alternative “Play button” would be spoken as “Play button. Button.”. An image coded as an image with an alternative beginning “Image of …” would be spoken as “Image. 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 “image of”, “picture of”, “link 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 “image of”, “picture of”, or “link to”.

---