Problem/Motivation

The current template does not follow the correct semantic structure for image captions, as described in accessibility guidelines:

Captions should be wrapped in a <figure> element with a corresponding <figcaption> element to improve accessibility and provide meaningful HTML structure.

Steps to reproduce

  1. Enable the module.
  2. Enable the image caption option on an image field.
  3. Inspect the rendered Twig output.
  4. Caption is not wrapped in a semantic <figure>/<figcaption> structure.

Proposed resolution

  1. Split caption output into legacy and semantic modes.
  2. Enable legacy mode by default for existing users to preserve backward compatibility.
  3. Provide a dedicated configuration form to switch between these modes for existing users.
  4. Display warnings to users who are still using legacy mode that it is deprecated.
  5. 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

CommentFileSizeAuthor
#7 Preview image.png433.99 KBvinodhini.e
#6 Preview image.png442.22 KBvinodhini.e
Command icon 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

foxy-vikvik created an issue. See original summary.

foxy-vikvik’s picture

Issue summary: View changes
foxy-vikvik’s picture

Issue summary: View changes
kksandr’s picture

Assigned: Unassigned » kksandr
Status: Active » Needs work

vinodhini.e’s picture

StatusFileSize
new442.22 KB

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.

vinodhini.e’s picture

StatusFileSize
new433.99 KB

Uploaded correct screenshot.

kksandr’s picture

Title: Create accessible formatter using <figure> and <figcaption> tags for captions (a11y compliance) » Add semantic caption output for accessibility
Issue summary: View changes
Status: Needs work » Needs review
kksandr’s picture

Assigned: kksandr » foxy-vikvik

  • kksandr committed d8c87b3f on 4.0.x
    Issue #3545296 by kksandr: D10 compatibility
    

  • kksandr committed fcb3bb41 on 4.0.x
    Issue #3545296 by kksandr: Added semantic output mode
    
kksandr’s picture

Assigned: foxy-vikvik » Unassigned
Status: Needs review » Fixed

Now that this issue is closed, please review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, please credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.