Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Image v3] Complex Image need figcaption structure #2901

Open
renow-luxembourg opened this issue Dec 4, 2024 · 0 comments
Open

[Image v3] Complex Image need figcaption structure #2901

renow-luxembourg opened this issue Dec 4, 2024 · 0 comments

Comments

@renow-luxembourg
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant