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
:
<figure>
<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>
</figcaption></figure>
If there is alt text, use
aria-describedby
:
<figure>
<img src=welcome.jpg
alt=”Bruce and Remy glower menacingly into the camera”
aria-describedby=figcap219>
<figcaption id=figcap219>
Bruce and Remy welcome questions
<small>Photo © Bruce's mum</small>
</figcaption></figure>
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.
