Description
Feature Request
Is your feature request related to a problem? Please describe.
Currently, we use the Image V3 component to include Graphics (image of Charts/Diagramm/Illustration) with their caption.
In recent accessibility audits, we receive reports that captions are not sufficiently linked to their graphic.
Describe the solution you'd like
Add the possibility to use the figure/figcaption structure for specific Image :
<figure role="group" aria-label="Figure 1: The caption">
<img src="image.png" class="cmp-image__image" itemprop="contentUrl" alt="put image description here" />
<figcaption>
<span class="cmp-image__title" itemprop="caption">Figure 1: The caption</span>
</figcaption>
</figure>
Are there alternatives?
An alternative solution is to use aria role="figure" instead of the figure element, and to use the aria-labelledby to link the caption.
<div role="figure" aria-labelledby="fig1caption">
<img src="image.png" class="cmp-image__image" itemprop="contentUrl" alt="put image description here" />
<span class="cmp-image__title" itemprop="caption" id="fig1caption">Figure 1: The caption</span>
</div>
But this alternative is not possible because criterion 1.9 of the RGAA (or RAWEB) explicitly requires the presence of a "figure" tag.
Remarks
I put the role and aria-label attributs on the figure element to improve the compatibility with some accessibility tools like NVDA/JAWS.
Documentation
- https://www.w3.org/WAI/tutorials/images/complex/
- https://www.w3.org/WAI/tutorials/images/groups/
- WCAG G94 : https://www.w3.org/TR/WCAG20-TECHS/G94
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption
- RAWEB : https://accessibilite.public.lu/en/raweb1/criteres.html#test-1-9-1