The current template does not follow the correct semantic structure for captions, as described in the following accessibility guidelines:
- https://stevenmouret.github.io/web-accessibility-guidelines/accessibilit...
- https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/fig...
To improve accessibility, captions should be wrapped in a <figure> element with a corresponding <figcaption>.
We need to either:
- create a new formatter that uses the proper template, or
- add an additional option to the existing formatter.
In both cases, we must ensure backward compatibility with the current implementation.
1. Enable the module.
2. Enable the image caption option.
3. Inspect the rendered Twig output.
- Observe that the caption is not wrapped in a semantic `` / `` structure.
- Create an accessible image formatter that uses the semantic `` and `` structure for captions.
- Ensure the new formatter (or formatter option) follows WCAG and HTML5 accessibility recommendations.
- Maintain backward compatibility by:
- Keeping the existing formatter behavior unchanged by default.
- Providing the new accessible option as an alternative, or as an additional formatter.
- Add/update Twig templates to output `` and `` consistently with Drupal core patterns.
- Include automated and manual tests to confirm the new structure is applied and accessible.
- A new formatter option will be available, or alternatively a boolean setting will be added to the existing formatter.
- By default, the accessible `/` output will be disabled to avoid breaking existing implementations.
- Site builders can enable the option when they want captions to follow the accessible semantic structure.
Active
4.0
Code
It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.
Hi, I tested this module on Drupal 11.2.x and encountered the same issue. After applying Merge Request #31, the caption is now wrapped in a semantic / structure as expected.
Attached the screenshot for reference. Thanks.