Text Describing Purely Decorative Images in HTML5

Summary

This change proposal addresses ISSUE-122 Lady of Shallott as example of purely decorative image.

This change proposal was composed in fulfillment of HTML WG ACTION-195: propose replacement example for lady of shallot example of purely decorative use of image with code example of one of the use cases provided in prose introducing the example

Rationale

Advice about providing alt text for "purely decorative images, and the definition thereof, should be contained in the HTML5: Techniques for providing useful text alternatives and the Web Content Accessibility Guidelines, version 2.0 (WCAG 2.0).

Details

Currently, HTML5 section 4.8.1.1.7 states:

4.8.1.1.7 A purely decorative image that doesn't add any information

ISSUE-31 (alt-conformance-requirements) blocks progress to Last Call

In general, if an image is decorative but isn't especially page-specific, for example an image that forms part of a site-wide design scheme, the image should be specified in the site's CSS, not in the markup of the document.

However, a decorative image that isn't discussed by the surrounding text but still has some relevance can be included in a page using the img element. Such images are decorative, but still form part of the content. In these cases, the alt attribute must be present but its value must be the empty string.

Examples where the image is purely decorative despite being relevant would include things like a photo of the Black Rock City landscape in a blog post about an event at Burning Man, or an image of a painting inspired by a poem, on a page reciting that poem. The following snippet shows an example of the latter case (only the first verse is included in this snippet):

<h1>The Lady of Shalott</h1>
<p><img src="shalott.jpeg" alt=""></p>
<p>On either side the river lie<br>
Long fields of barley and of rye,<br>
That clothe the wold and meet the sky;<br>
And through the field the road run by<br>
To many-tower'd Camelot;<br>
And up and down the people go,<br>
Gazing where the lilies blow<br>
Round an island there below,<br>
The island of Shalott.</p>

Replace With

4.8.1.1.7 A purely decorative image that doesn't add any information

If an image is decorative but isn't especially page-specific -- for example, an image that forms part of a site-wide design scheme -- the image should be specified in the site's or document's CSS, not in the markup of the document.

Exceptions to this rule, in cases where CSS cannot be used to display an entirely decorative image, are covered by the HTML5: Techniques for providing useful text alternatives. [HTML ALT TECHS] Authors are also encouraged to consult the Web Content Accessibility Guidelines 2.0 for more detailed information and acceptable techniques. [WCAG 2.0]

Impact

Positive Effects

• Provides a single reference for "A purely decorative image that doesn't add any information" by providing the correct usage guide for "purely decorative images": define them using CSS;
• Keeps such information in a single reference for developers and authors;

Negative Effects

• none, since advice and guidance on providing appropriate alt text is already contained in HTML5: Techniques for providing useful text alternatives [HTML ALT TECHS];

Conformance Classes Changes

none

Risks

none

References

• HTML5: Techniques for providing useful text alternatives
• Web Content Accessibility Guidelines, version 2.0 (WCAG 2.0)