Contrib.social

<figure> elements with a role of group need an accessible label

Open on Drupal.org →
Created on 13 April 2021, over 3 years ago
Updated 1 September 2023, about 1 year ago

Problem/Motivation

In Add role="group" to to meet WCAG requirements → , comment #22 → is correct that if a <figure> has a role of group, it needs an accessible name from an aria-label or aria-labelledby attribute. This role is now provided by default in the media component, but has no accessible label.

<!--break-->

Steps to reproduce

  1. Start with a clean install of Drupal 9, using Bartik or other default themes.
  2. Create a new basic page and select "Add media" from the toolbar
  3. Upload an image, and select the "caption" checkbox
  4. Fill out the caption value beneath the image and save the page.

What should happen: the final markup should render one of two patterns.

<figure role="group" aria-label="Accessible label"/>
  <img.../>
  <figcaption>Figcaption text</figcaption>
</figure>

<figure role="group" aria-labelledby="id-of-accessible-name-text"/>
  <img.../>
  <figcaption id="id-of-accessible-name-text">Figcaption text</figcaption>
</figure>

What currently happens: the figure has a role of group, but no accessible name tied to it.

<figure role="group">
  <img.../>
  <figcaption>Figcaption text</figcaption>
</figure>

Proposed resolution

One of (maybe) three solutions should be acceptable:

  1. adding core support for an aria-label value an editor can provide, which populates the aria-label attrbute
  2. Adding an auto-generated ID value to the <figcaption> or some other text name for the <figure>, and add an aria-labelledby attribute to <figure> with a value of that ID.
  3. I saw the thread on possibly removing the role from core: Remove role="group" from figure in FilterCaption output 📌 Remove role="group" from figure in FilterCaption output Postponed: needs info . It's another way to go to resolve this particular issue, but also sounds like that's postponed. If a move in that direction isn't immediate, then there should be a patch for adding an accessible name by default until that change happens.

Remaining tasks

Remaining work needs to be defined depending on the preferred approach.

📌 Task
Status

Needs work

Version

11.0 🔥

Component
Media  →

Last updated about 9 hours ago

Created by

🇺🇸United States CarlyGerard

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

  • Needs issue summary update

    Issue summaries save everyone time if they are kept up-to-date. See Update issue summary task instructions.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024