WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Images with captions - technical realization?

for

From: wolfgang.berndorfer
Date: Jan 7, 2020 2:01PM

Seems the discussion is finished, so I try to distillate recommendations for techs for images with visual captions.

A) Simple image – caption combinations:

1. If an image needs an alt-attribute and has a visual caption (in <p> or <hx>), the <img>-Element and the captioning element have to follow each other in the DOM immediately
2. If the value/content of the alt-attribute and the caption are identic, the captioning element should get aria-hidden to avoid repetitive annunciations of the same by screen readers.

B) complex images with visual captions

Additionally to A)
1. The image typically should have a long description, either linked or completely presented near the <img>-element in the DOM.
2. Image, caption and long description should be grouped to mark the boundaries of this unit for screen readers.
3. If the beginning of the image-unit is marked with a heading, the end of the unit needs to be marked by a heading for the next unit of the page.
4. If you mark the boundaries by grouping image, caption and long description in a <figure>-element:
4.1 The text in the optional <figcaption> needs to be as short as possible. Never place the long description completely in the figcaption! This is the accessible name for the <figure> ( if you don't use aria-label/labelledby on the figure-element).
4.2 The <figcaption>-element should get aria-hidden to avoid triple annunciation for screen readers while passing the figure-element.

Thanks for inputs in the discussion, which I hopefully interpreted and formulated correctly.

Wolfgang