HTML and CSS Reference
In-Depth Information
On the other hand, you may think that the example above
needs alt text <img src=welcome.jpg alt=”Bruce and Remy
glower menacingly into the camera”> because otherwise the
joke isn't communicated to a screen reader user.
As an accessibility bonus it's useful (but not mandatory) to add
ARIA attributes to associate the image with the caption until brows-
ers “understand” the figure element and do this automatically.
When there is no alt text, use aria-labelledby to associate the
id of the figcaption to the img :
<img src=welcome.jpg aria-labelledby=figcap219>
<figcaption id=figcap219>
Pippa Middleton and Remy Sharp pose on the red carpet at
¬ the premier of the Jane Austen movie <cite>Pride and
¬ ECMAScript</cite>
If there is alt text, use aria-describedby :
<img src=welcome.jpg
alt=”Bruce and Remy glower menacingly into the camera”
<figcaption id=figcap219>
Bruce and Remy welcome questions
<small>Photo © Bruce's mum</small>
HTML5 and alt text on images
There has been much weeping and lamentation in the streets about the fact that, in certain circumstances,
the validator won't punch you for omitting the alt attribute on <img> (although I will punch anyone refer-
ring to it as “the alt tag”):
The presence of <meta name=generator> makes missing alt conforming.
The presence of title makes missing alt conforming.
The presence of figcaption makes missing alt conforming.
I recommend that 99.99 percent of the time, you should continue to use alt with an image, with purely
decorative images getting empty alt=”” . An occasional exception will be as we've discussed with images
in <figure> . If the function of the image is exactly expressed in the <figcaption> , use no alt at all. The
other 0.01% is when you're writing a template for automatically generated web pages that import images
where it's impossible to get alt , for example, automatically including stills from a live webcam, in which
case use <meta name=generator> in the head.
Search WWH ::

Custom Search