Problem/Motivation
The current template does not follow the correct semantic structure for image captions, as described in accessibility guidelines:
- https://stevenmouret.github.io/web-accessibility-guidelines/accessibilit...
- https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/fig...
Captions should be wrapped in a <figure> element with a corresponding <figcaption> element to improve accessibility and provide meaningful HTML structure.
Steps to reproduce
- Enable the module.
- Enable the image caption option on an image field.
- Inspect the rendered Twig output.
- Caption is not wrapped in a semantic
<figure>/<figcaption>structure.
Proposed resolution
- Split caption output into legacy and semantic modes.
- Enable legacy mode by default for existing users to preserve backward compatibility.
- Provide a dedicated configuration form to switch between these modes for existing users.
- Display warnings to users who are still using legacy mode that it is deprecated.
- For new users, enable semantic mode by default.
Remaining tasks
N/A
User interface changes
- A new standalone form is available to switch between legacy and semantic modes.
- Warning messages are displayed in the formatter when legacy mode is enabled.
- Status report includes a warning if semantic mode is not active.
API changes
N/A
Data model changes
N/A
| Comment | File | Size | Author |
|---|---|---|---|
| #7 | Preview image.png | 433.99 KB | vinodhini.e |
Issue fork image_field_caption-3545296
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #2
foxy-vikvik commentedComment #3
foxy-vikvik commentedComment #4
kksandr commentedComment #6
vinodhini.e commentedHi, 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.
Comment #7
vinodhini.e commentedUploaded correct screenshot.
Comment #8
kksandr commentedComment #9
kksandr commentedComment #12
kksandr commented