WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Images with captions - technical realization?

for

From: wolfgang.berndorfer
Date: Jan 6, 2020 10:28AM

Hi Birkir,

> You can code the caption as a heading, (make sure it comes before the image)
Not always the caption needs to be before the image in the DOM for understanding. Think about a traffic accident: An online newspaper might show a photo with an caption below.
alt="ambulance car "
<h4>Alcohol driver killed six passant.</h4>

> 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).
This is my experience too. Therefore <figure> seems useful for SR experience for images which need linked or nested long descriptions.

> If the figcaption ia alt text for the image 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 tested and my SR announced twice. So I'd suppose aria-hidden.

> 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.
I agree in cases of misuse. You'd probably agree that if aria-hidden is used correctly, it is helpful and necessary.

Thanks for your reflections!

Wolfgang

-----Ursprüngliche Nachricht-----
Von: WebAIM-Forum < <EMAIL REMOVED> > Im Auftrag von Birkir R. Gunnarsson
Gesendet: Sonntag, 5. Jänner 2020 20:08
An: WebAIM Discussion List < <EMAIL REMOVED> >
Betreff: Re: [WebAIM] Images with captions - technical realization?

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
>