Add template modal dialog: labeling of some TemplateListItems is far from ideal #60175
Labels
[Focus] Accessibility (a11y)
Changes that impact accessibility and need corresponding review (e.g. markup changes).
Needs Design
Needs design efforts.
[Package] Edit Site
/packages/edit-site
[Type] Bug
An existing feature does not function as intended
Description
It appears some basic best practices and accessibility requirements aren't well understood yet. It's worth pointing out again that the value of the
aria-label
attribute overrides any content. As such, the aria-label value should always provide a meaningful name for users of assistive technology and the name must match (or at least start) with the visual labeling.In the site editor, when creating a new template, a modal dialog opens.
In the modal dialog a list of 'template items' is shown.
Some of these template items are labeled by their content. For example: Pages, Author Archives, and other ones.
However, some template items do have an aria-label attribute that is totally meaningless and confusing for users. It's more a -description_ rather than a name.
Screenshots: the Front Page template items has an
aria-label="http://localhost:8889"
:Screenshots: the Date Archives template items has an
aria-label="E.g. http://localhost:8889/2024"
:As such, the accessible name used by assistive technology for these items is an URL that is of no use for users.
Screenshots of the wrongly labeled items announced by a screen reader:
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.
Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Yes
The text was updated successfully, but these errors were encountered: