Alternatives for non-text content

Must

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

Description

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. Endeavour to be succinct, and avoid redundant phrasing such as "Picture of ...", "... logo", or "Select this to ...".

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

Add concise alternatives via the accessibilityLabel attribute. Alternatives must begin with a capitalised word and must not have a full stop (.). Supplementary information should be provided in the accessibilityHint property. The accessibilityHint property should describe the results of performing the action if the result is unclear.

iOS example

[aButton setAccessibilityLabel:NSLocalizedString(@"Add to favourites video", @"Add to favourites button accessibility label")];                        
[aButton setAccessibilityLabel:NSLocalizedString(@"Adds this video to your favourites", @"Add to favourites button accessibility label")];                        

ANDROID

Use the android:contentDescription property to provide short and concise alternatives. The exception is on EditText fields; these must be coded using the android:hint attribute. This helps users understand what content is expected when the text field is empty. When the field is filled, TalkBack reads the entered content to the user, instead of the hint text.

Android example

<button 
    android:layout_height="wrap_content" 
    android:id="@+id/sunnyday" 
    android:src="@drawable/blue" 
    android:focusable="true" 
    android:contentDescription="Main Menu"></ImageView>                        
<button 
    android:layout_height="wrap_content" 
    android:id="@+id/sunnyday" 
    android:src="@drawable/blue" 
    android:focusable="true" 
    android:contentDescription="Exit this screen and return to the main menu"></ImageView>                        

HTML

Use the alt attribute to provide alternatives for images. Title text is not supported on mobile for links but is partly supported for form inputs. When providing alternatives for input fields via the title attribute, when it is not possible to use a label, ensure the text is concise and do not supply redundant information such as the name or type of the control or obvious instructions such as "enter text here for".

HTML example

<!-- Example 1 - image -->
<img src="rating.jpg" alt="Rate this article" />

<!-- Example 2 - form input -->
<input id="t1" type="text" title="Search" placeholder="Search" />                        
<!-- Example 1 - image -->
<img src="rating.jpg" alt="Greyed out stars" />

<!-- Example 2 - form input -->
<input id="t1" type="text" title="Type your search term here:" />                        

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.
Results

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”.