Skip to content

[Image v3] Complex Image need figcaption structure #2901

Open
@renow-luxembourg

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions