Skip to content

Style revisions: Avoid mismatch between visible labeling and accessible name #66525

@afercia

Description

@afercia

Description

In the global styles revisions, each revision item shows some visible content e.g. date, time, user avatar and user name.
However, the accessible name completely mismatches the visible text.

These items are actionable button elements in a list. Interactive controls need to provide a meaneingful accessible name but it must not completely mismatch the visible text.

WCAG 2.5.3 Label in Name requires the accessible name to contain the text that is presented visually.
https://www.w3.org/TR/WCAG22/#label-in-name

Technically, that means the aria-label must at least contain the visible text or a meaningful part of it. However, in practice, that doesn't work with voice control / speech recognition software. Also, sighted screen reader users may be totally confused by the mismatch because they will hear the element being announced in a way that is completelu different from its visual presentation.

Image

In the ecample above, the highlighted item relevant pieces are:

  • Visible content: OCT 25, 2024 6:05 PM admin admin. Note: the first admin is because of the alt="admin" on the user profile avatar image.
  • Accessible name: aria-label="Changes saved by admin on Oct 25, 2024 6:05 pm"

While I do understand the good intent behind crafting such a label, this isn't the recommended way to use ARIA labels.

To some extent, in limited cases, aria-label can be used to 'expand' the name and provide more context. But, it must not completely mismatch the visible text.

It is important to know that, in a way, the de facto state of assistive technology doesn't fully support WCAG 2.5.3 Label in Name. To maximize comaptibility with voice control / speech recognition software, the visible text must match the name.

Step-by-step reproduction instructions

  • Go to the Site editor
  • Make sure you have some style revisions: make any change to the global styles and save if necessary.
  • Go to Styles > Revisions.
  • Inspect the source of a revision item in the revisions list.
  • Observe the aria-label mismatches the visible text.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

  • Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

  • Yes

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure

Metadata

Metadata

Labels

Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.json[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Package] Edit Site/packages/edit-site[Status] In ProgressTracking issues with work in progress[Type] BugAn existing feature does not function as intended

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions