Categories
HTML Accessibility
short note on figure and figcaption
In 2011 when I first started thinking about how best to map the semantics of figure/figcaption to accessibility API properties, the set of properties to choose from was limited as compared to 2022.
What ended up being implemented in browsers was a naming relationship between the figure element and the figcaption element. The accessible name for the figure element is provided by the content of the figcaption element.
Code example
Using ARIA to illustrate the information exposed natively in the Accessibility Tree for the labelledby figure/figcaption accessibility mapping.
<figure role=”figure” aria-labelledby=”figcaption”>
<img src=”exercise.jpg” alt=”Watching Jonny James
presenting, while riding an exercise bike”>
<figcaption role=”caption” id=”figcaption”>
The Lasertour Perceptronics allows you to
exercise your mind while working your body
</figcaption>
</figure>
Typical expected Aural output
figure The Lasertour Perceptronics allows
you to exercise your mind while working your body.
graphic Watching Jonny James presenting
while riding an exercise bike.
caption
The Lasertour Perceptronics allows you to
exercise your mind while working your body.
out of figure
The figure and [...]