Open afercia opened 3 days ago
@afercia can you please review this PR? 🙇♂ https://github.com/WordPress/gutenberg/pull/66534
@up1512001 thanks for your PR. I'd suggest to explore some redesign in order to provide a more meaningful labeling of the revision items. See my comment on the PR https://github.com/WordPress/gutenberg/pull/66534#issuecomment-2443997895 I'd suggest to wait form some more design and accessibility feedback.
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:
OCT 25, 2024 6:05 PM admin admin
. Note: the firstadmin
is because of thealt="admin"
on the user profile avatar image.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 user to 'expand' the name and provide more context. But, it must not compeltely 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
Screenshots, screen recording, code snippet
No response
Environment info
No response
Please confirm that you have searched existing issues in the repo.
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Please confirm which theme type you used for testing.