alt text for images (new techniques)

Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.

WCAG updated a bit over 6 months ago. alt attribute is no longer the only technique to satisfy this SC for images. Any of the following can now be used.

alt
aria-labelledby
aria-label
title

Ref: F65 - http://www.w3.org/TR/WCAG20-TECHS/F65.html

How To Assess

FireEyes
Screen Reader (VoiceOver/Safari)
WAVE (has not caught up to these techniques)

Examples of Code that Violates and Fails

<p><img src="ddPRjw_thumb.png"></p>

Examples of Code that Satisfies WCAG (WCAG Techniques)

<p><img src="ddPRjw_thumb.png" alt="accessibility" /></p>
<p><img src="ddPRjw_thumb.png" aria-labelledby="acce1234" /><br /><span id="acce1234">accessibility</span></p>
<p><img src="ddPRjw_thumb.png" aria-label="accessibility" /></p>
<p><img src="ddPRjw_thumb.png" title="accessibility" /></p>

alt attribute
accessibility

aria-labelledby attribute

accessibility

aria-label attribute

title attribute
accessibility

Notes

role="presentation" now an acceptable null alt attribute (alt="").
http://www.w3.org/TR/WCAG20-TECHS/F38.html

Home