adobe / adobe/aem-core-wcm-components

[Image v3] Complex Image need figcaption structure

Open
#2,901 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
Java
Stars
796
Forks
776
Avg merge
3d 22h
Merged PRs (30d)
8

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 :
```

put image description here

Figure 1: The caption

```

**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.
```


put image description here
Figure 1: The caption

```
**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

Contributor guide

Open the contributing guide

Research direction

Start by locating the Image V3 component's rendering and accessibility tests. Compare the current caption markup with the requested figure/figcaption structure and verify the result against the linked accessibility guidance. Done means complex images can render a figure with a linked caption without breaking existing Image V3 behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
html, java
Domain
accessibility, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.