Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add template modal dialog: labeling of some TemplateListItems is far from ideal #60175

Open
afercia opened this issue Mar 25, 2024 · 1 comment
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

Comments

@afercia
Copy link
Contributor

afercia commented Mar 25, 2024

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":

Screenshot 2024-03-25 at 15 38 43

Screenshots: the Date Archives template items has an aria-label="E.g. http://localhost:8889/2024":

Screenshot 2024-03-25 at 15 40 45

As such, the accessible name used by assistive technology for these items is an URL that is of no use for users.

  • Screen reader users won't have a clue what the items is about. It gets announced just as an obscure URL with no way to understand what it is about.
  • The mismatch between visual label (the content) and the actual accessible name will prevent speech recognition software users from issuing a voice command that works.

Screenshots of the wrongly labeled items announced by a screen reader:

Screenshot 2024-03-25 at 15 45 21

Screenshot 2024-03-25 at 15 45 40

Step-by-step reproduction instructions

  • Use a screen reader, for example on macOS use VoiceOver in combination with Safari.
  • Go to the Site Editor > Design > Tempaltes, and click 'Add New Template' at the top right of the page.
  • A modal dialog opens.
  • Navigate the items in the modal dialog and observe the labeling of those two items is arguably useful for users.

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

@afercia afercia added [Type] Bug An existing feature does not function as intended [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Edit Site /packages/edit-site labels Mar 25, 2024
@afercia
Copy link
Contributor Author

afercia commented Mar 25, 2024

As pointed out in several other issues and PRs, the name of an UI control and its description are two separate concepts and must be kept separated.

Tooltips aren't meant to provide descriptions. They have been introduced in the editor with only one purpose: visually expose the accessible name of controls that only contain graphics e.g. icon buttons.

The design of this modal must be changed in the first place to separate name from description. If the description is considered something important to provide to users, then it must be provided in a different way, certainly not with a tooltip.

@afercia afercia added the Needs Design Needs design efforts. label Mar 25, 2024
@afercia afercia changed the title Add tempalte modal dialog: labeling of some TemplateListItems is far from ideal Add template modal dialog: labeling of some TemplateListItems is far from ideal Mar 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
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
Projects
None yet
Development

No branches or pull requests

1 participant