WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Images with captions - technical realization?

for

From: Birkir R. Gunnarsson
Date: Jan 5, 2020 12:07PM

You can code the caption as a heading, (make sure it comes before the
image), then give the image a descriptive alt text.

I think something like
<h4>Figure 1.1 - blah</h4>
<p>some text about it</p>
<img alt="description of image">
pretty much does the same thing as the figure/figcatption element
(except the boundries of the figure element are announced by screen
readers.

A heading marks the beginning of a section, but if the following
section does not start with a heading it's sometimes hard to figure
out where that section ends and other content begins (one of the main
advantages of landmark regions over headings in some situations).

If the figcaption ia alt text for the imgae you can use my
aria-labelledby proposal rather than aria-hidden, it should achieve
the same thing (though there's a chance it might be announced twice by
a screen reader).

I'm always worried about using aria-hidden to hide content, too many
times have I seen people use it incorrectly resulting in important
information being hidden from screen reader users.


On 1/5/20, Sushil Oswal < <EMAIL REMOVED> > wrote:
> If an image is accompanied by a visual caption, screen reader can read it
> and you don't need to retrofit it with an alt attribute.
>
> Sushil Oswal
>