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.

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

CommentFileSizeAuthor
#15 3208640-nr-bot.txt149 bytesneeds-review-queue-bot

Issue fork drupal-3208640

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

CarlyGerard created an issue. See original summary.

carlygerard’s picture

Tagging NorthAmerica2021 for greater visibility.

carlygerard’s picture

carlygerard’s picture

Issue summary: View changes
nicoloye’s picture

Working on this issue as part of DrupalConNA.

nicoloye’s picture

Title: <figure> elements with a role of group need an accessible label » 3208640-figure-accessible-label
Status: Active » Needs review

I drafted an early proposition.
There is surely many things to adjust and probably cleaner way to deal with this.
Also I didn't updated tests.

nicoloye’s picture

Title: 3208640-figure-accessible-label » <figure> elements with a role of group need an accessible label

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

rferguson’s picture

What about the case to remove the role if there is a figcaption present? It seems to trip the validators right now.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure

Permitted ARIA roles - With no figcaption descendant: any, otherwise no permitted roles

OR

https://www.w3.org/TR/html-aria/

figure role=figure
If the figure has no figcaption descendant:
Any role

If the figure has a figcaption descendant:
No role.

Global aria-* attributes and any aria-* attributes applicable to the allowed roles.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

needs-review-queue-bot’s picture

Status: Needs review » Needs work
StatusFileSize
new149 bytes

The Needs Review Queue Bot tested this issue. It either no longer applies to Drupal core, or fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

mgifford’s picture

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

alison’s picture

#11:

What about the case to remove the role if there is a figcaption present? It seems to trip the validators right now.

See also: #3076765: Remove role="group" from figure in FilterCaption output

(in case other people find themselves here)

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.