32. Decorative & Redundant Images

Keep decorative and redundant images silent in screen readers

Allow screen reading software to ignore features that are purely decorative, including images whose meaning is fully expressed through adjacent text.

Rationale

When listening to content with a screen reader unnecessary output can quickly degrade the experience, making use of the media tiresome and often also confusing.

HTML & JavaScript

Legacy HTML

If you have a site that uses images for spacing either:Incorrect: When the following code is used, a screen reader will read the word “spacer” aloud:


<!– Do not use if the image is only for visual spacing: –>
<img src=“spacer.gif” alt=“spacer”>

Revise the site to use css for spacing

OR
Give each such image an empty alt attribute of the form, alt=“”. Include no spaces or other characters in the value of the alt attribute. This tells screen readers to ignore the image.

HTML | XHTML | CSS

Basic Decorative images (that do not provide information) should:

Be background images, or be otherwise added through CSS, OR
Should have empty alt attributes of the form alt=“”, with no space between the quotes

Correct for a decorative image: A screen reader will skip the image:
```
<img src=“fluffy_cloud.gif” alt=“”>
```
Incorrect: alt attributes are required for images, and a screen reader may read the file name or other unnecessary information:
```
<!– Incorrect –>    <img src=“fluffy_cloud.gif”>
```
Incorrect: A screen reader will read the word “fluffy cloud” aloud, which, in this case, is not relevant to the content:
```
<!– Not Recommended –>
<img src=“spacer.gif” alt=“fluffy cloud”>
```

Links that have both text and images

Often on Web pages, we mark a link with both an icon and link text where both are clickable:

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 text link and once for the icon 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, Help”:


<a href=“help.html” id=“helplink”>
<img border=“0” src=“need-help.gif” alt=“” />
<span id=“helplinktext”>Help</span>
</a>

A minor problem remains. Some browsers will underline the image. CSS to set text-decoration to none for the image will not work. To remove the underline from the image, use CSS to assign text-decoration: none; to the link. Then, use CSS to assign text-decoration: underline; to the link text. For the HTML shown just above, the CSS might be as follows:

#helplink {
text-decoration: none;
}
#helplinktext {
text-decoration: underline;
}

Images Added Through the CSS “Content:” Property

When images or icons are added through content: one of three things happen:

VoiceOver, NVDA, and other screen readers read the letter used to represent the icon
VoiceOver presents the user with an empty element
VoiceOver indicates that there is a graphic without alt-text.

To prevent this, make sure the element used to place the image or icon doesn’t include any important text, and add aria-hidden=“true” to the element.

Android Applications

Decorative images should be ignored. Set the android:focusable property to false.

iOS Applications

Images that convey no information should be ignored by VoiceOver. To hide these images or set them to be ignored, set the setIsAccessibilityElement property to no.

PDF in Acrobat

Sometimes there are images on the page that are purely decorative and provide no additional information. These images should be ignored by screen readers. There are two ways to do this in Acrobat 9 Pro:

Open the TouchUp Reading Order (TURO) and select the element (or elements) on the page that you want to be ignored. Select background in the TURO dialog box (or right-click on the selection and select Tag as background).
In the tag tree, you can set the image to an artifact by opening the context menu and selecting Change Tag to Artifact.

Word

Decorative images have no content and do not add any intrinsic value to the document. As the name suggests, they are for decoration only and therefore should be ignored by screen readers. In Word, leave the alternative text field blank.

PowerPoint

Decorative images have no content and do not add any intrinsic value to the document. As the name suggests, they are for decoration only and therefore should not have alternative text. In PowerPoint, leave the alternative text field blank. Examples of decorative images include watermarks, background pictures, shading, or patterns, divider lines, borders, and most pictures of people.

Flash

When the Entire Flash Movie is Decorative

Set the entire movie to inaccessible in the accessibility panel in Flash. This ensures that nothing from the Flash movie will be read. However, the browser will not know about this setting, so the Flash movie will be announced by screen readers.

To completely hide the existence of the Flash from screen readers and to prevent keyboard access to the movie, add <param name=“wmode” value=“opaque”> inside the object tag and add wmode=“opaque” to the embed tag.

For further reading if you want more detail, see WebAIM’s article on Hiding Unimportant Flash Content. (opens in new window)

When Part of a Flash Movie is Decorative

Mark the top-most decorative object as inaccessible in the accessibility panel, or use action script to set the silent property to true.

Testing HTML

HTMLToolsUse the formatting images favelet, which will highlight every small image (less than 10 px in either dimension) and display the alt-text next to the image if that alt-text is not alt=“”. 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.OutputThe alert lets you know the number of images lacking alt attributes (errors) and the number you need to check out. Those that need checking out are the ones which have alt-text which is not alt=“”; you see, alt=“” is assumed to be correct for such a small inactive image. These assumed-to-be-correct images are outlined with a dotted line, and will be silent in a screen reader.AnalysisMake sure developers have not used alt=“spacer” or other such encumbering additions on these images. (Larger decorative images would be analyzed with the testing techiques for Pearson Guideline 29 – Images or Animations that Provide Information.)

Testing Mobile Applications

Testing technique	Description
Tools	Look at the screen and identify areas of the screen that use images for decoration and images that are redundant to the content already on the screen. Use the screen reader on the device (VoiceOver on iOS and TalkBack on Android) to read the text alternative for the images.
Output / Analysis	The screen reader will announce the image and the text alternative if it is incorrectly defined. If it is defined correctly, nothing will be announced by the screen reader. If the image role is announced or if the image role is announced with text alternative, then this is an error. Decorative or redundant images should be silent in the screen reader.

Tools

Look at the screen and identify areas of the screen that use images for decoration and images that are redundant to the content already on the screen. Use the screen reader on the device (VoiceOver on iOS and TalkBack on Android) to read the text alternative for the images.

Output / Analysis

The screen reader will announce the image and the text alternative if it is incorrectly defined. If it is defined correctly, nothing will be announced by the screen reader.

If the image role is announced or if the image role is announced with text alternative, then this is an error. Decorative or redundant images should be silent in the screen reader.

Testing PDF in Acrobat

Testing technique	Description
Tools	Use TouchUp Reading Order (TURO) with “Show images and tables” checked to evaluate each image. In Acrobat 9, TURO is under Advanced > Accessibility. In Acrobat 10, TURO is a tool on the toolbar labeled “Adjust Reading Order” and it is also under Tools > Accessibility. Images that have been converted to artifacts or marked as “background” will not be highlighted in this view. Only those images with figure tags will be highlighted.
Output	Look for the presence or absence of figure tags.
Analysis	Make note of images that should not have alternative text because they are decorative or redundant with the body text.

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.

…

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.