30. Image Buttons & Links

If an image represents a control or a link, provide text that can serve the same purpose when images are not available.
Note: This includes videos and animations that are silent or are accompanied by sounds that do not provide information, such as background music.

Rationale

This allows screen reader users to use the control.

Additional Benefit: This also helps when users have images turned off or unavailable as in mobile browsing.

General Techniques

1. For active images the alt-text should be written as link text would be written for a standard link with the same function. The screen capture below shows a Web site where the images have been outlined using the Web Developer Toolbar in Firefox. The house icon and the word “home” are part of a single active image:
   

   This image should have “Home” as the alt-text:

   
   <a href=“home.html”>
   <img src=“home.gif” alt=“Home” />
   </a>

2. Often on Web pages, we mark a link with both an icon and link text. For example, we might have an icon showing a house, followed by the word “Home”.

   If the icon is an active link, it will be announced as a link by screen readers. Because of this, the icon image needs alt-text so that a screen reader user will know the purpose of the link. Unfortunately, this often results in screen reader users hearing every such link twice: once for the icon link and once for the text link. This can become very tedious when navigating repetitive pages with a screen reader.

   The solution is to put the image and the link text in the same link tag. Then the image can be given alt-text of alt=“”, called null alt-text. This tells the screen reader not to announce the image.

   With this sample code, the link would be announced just once as “link, Home”:

   
   <a href=“home.html”>
   <img src=“home_icon.gif” alt=“” />Home
   </a>

HTML & JavaScript

HTML | XHTML | CSS

1. The alt attribute should be used to convey the purpose of the link, button or control:

   
   <a href=“home.html”>
   <img src=“home.gif” alt=“Home” />
   </a>

   
   <input type=“image” src=“create_account.gif” alt=“Create Account”>

2. When making client-side image maps accessible, add alt attributes as follows:

   • Each clickable area element in a client-side image map should have an altattribute that describes the purpose of the area element.
   • See Pearson Guideline 29 for information on alt-text for the image map image itself.

JavaScript

Sometimes a change in the meaning of an element is communicated by changing an image (e.g. a play button becomes a pause button, an expand button becomes a collapse button). In these cases, be sure to update the alt-text as well. For example, the following code changes both the image file (src attribute) and the value of the alt attribute for an image with id uicontrol1:

document.getElementById(‘uicontrol1’).src=‘minus.gif’;
document.getElementById(‘uicontrol1’).alt=‘Collapse menu’;

…

<button type=“button” onclick=“toggleMenu();”>
<img src=“plus.gif” alt=“Expand menu” id=“uicontrol1” />
</button>

Android Applications

Active images must have a text alternative that conveys the purpose of the link, button or control. Use the android:contentDescription property to define the text alternative.

iOS Applications

Image buttons and links should define the alternative text using the accessibilityLabelproperty and the accessibilityTraits property to define the element’s type, state, or behavior. For example, a login image button would have the accessibilityLabel set to “Login” and would be defined with the Link and Image accessibilityTraits.

Use the accessibilityHint property to provide supplemental information that provides further instructions of what will happen by performing the action if it will be unclear or confusing.

Testing HTML

HTML

Testing technique	Description
Tools	Use the active images favelet to highlight active images and their alt-text. You may want to disable CSS and then apply the favelet so that results are more easily viewed. Disabling CSS is possible from the View menu in most browsers.
Output	The alert announces the number of definite errors and the number of images that need to be reviewed. The definite errors are: images with no alt attribute, or images with an empty alt attribute (alt=“”) and no other text in the link or button. When alt-text is present, it is displayed next to (near) the image.
Analysis	Check that the existing alt-text clearly gives the purpose or function of the button or image link. This should not be descriptive alt-text. Instead, it should clearly indicate what the object does. In other words, it should be text you might use for a text link that serves the same function.

Testing Mobile Applications

Testing technique	Description
Tools	Look at the screen and identify areas of the screen that use images for links, buttons or other functional controls. Use the screen reader on the device (VoiceOver on iOS and TalkBack on Android) to read the text alternative for the images.
Output	The alert announces the number of definite errors and the number of images that need to be reviewed. The definite errors are: images with no text alternative, or images with incorrext text alternative
Analysis	Check that the existing alt-text clearly gives the purpose or function of the button or image link. This should not be descriptive text alternative. Instead, it should clearly indicate what the control does. In other words, it should be text you might use for a text link that serves the same function.

Related Guidelines

508 Web § 1194.22 (a)

A text alternative for every non-text element shall be provided (e.g., via “alt”, “longdesc”, or in element content).

WCAG 2.0 Level A - 1.1.1 Non-text Content

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.

• Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Guideline 4.1 for additional requirements for controls and content that accepts user input.)
• Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.)
• Test: If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.
• Sensory: If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content.
• CAPTCHA: If the purpose non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.
• Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.

WCAG 2.0 Level A - SC 1.2.1 Audio-only and Video-only (Prerecorded)

For prerecorded audio-only and prerecorded video-only media, the following are true, except when the audio or video is a media alternative for text and is clearly labeled as such: (Level A)

• Prerecorded Audio-only: An alternative for time-based media is provided that presents equivalent information for prerecorded audio-only content.
• Prerecorded Video-only: Either an alternative for time-based media or an audio track is provided that presents equivalent information for prerecorded video-only content.