HTML and CSS Reference
Styling this markup can produce some nice effects ( Figure 2.21 ).
FIguRE 2.21 <figure> and
<figcaption> elements with
some CSS3 designer bling.
Notice that there is no alt attribute on the image. In the first
edition, I had added a blank alt="" , but this was incorrect.
In figures where the figcaption text tells you all you need to
know (“Pippa Middleton and Remy Sharp pose on the red carpet
at the premier of the Jane Austen movie Pride and ECMAScript”),
don't duplicate this in alt text because duplicated content can
quickly become very annoying. Duplicated content can quickly
become very annoying.
In the first edition, I tried to avoid duplicated content (which can
quickly become very annoying) by also including alt=“” on the
<img> element. But if an image has empty alt text it is regarded
as having an implied ARIA role=presentation (only there to
enhance presentation). This removes the element from the
page's accessibility tree (no user agent does this, yet, but that's
the general plan).
As the image is not purely presentational (if it were, you wouldn't
mark it up as a figure or give it a caption), you shouldn't have
empty alt , you should use no alternate text at all, for example.
Steve Faulkner has written a very useful document “HTML5:
Te c h n i q u e is f o r p r o v i d i n g u is e f u l t e x t a l t e r n a t i v e is ” ( t h a t i is a F i r is t
Public Working Draft, therefore very, very susceptible to change)
in which he writes:
“Circumstances in which it is not appropriate to use an empty or
null alt attribute: An image is contained within a figure element
and has an associated caption provided using the figcaption