Open
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>
</figure>
Remarks
Ie put the role and aria-label attributs on the figure element to improve the compatibility with some accessibility tools like NVDA/JAWS.
Documentation
Metadata
Assignees
Labels
No labels
Activity