-
Notifications
You must be signed in to change notification settings - Fork 4.5k
Description
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.
In the ecample above, the highlighted item relevant pieces are:
- Visible content:
OCT 25, 2024 6:05 PM admin admin
. Note: the firstadmin
is because of thealt="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