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

Regression: restore the previous ARIA landmark regions labels #21715

Closed
afercia opened this issue Apr 19, 2020 · 0 comments · Fixed by #24196
Closed

Regression: restore the previous ARIA landmark regions labels #21715

afercia opened this issue Apr 19, 2020 · 0 comments · Fixed by #24196
Assignees
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Status] In Progress Tracking issues with work in progress [Type] Regression Related to a regression in the latest release

Comments

@afercia
Copy link
Contributor

afercia commented Apr 19, 2020

Describe the bug

The editor ARIA landmark regions labels were changed in #21335 and #20951 and now they don't provide useful information to assistive technology users.

To reproduce
Steps to reproduce the behavior:

  • use a screen reader
  • get the list of the ARIA landmarks
  • see they're labelled with names that don't clarify their purpose

Expected behavior
ARIA landmarks labels need to describe the purpose of the content within the region. They need to answer the question "what can I do within this region?". The main purpose of ARIA landmarks is to allow users to quickly jump through the main UI sections. In order to do so, users need to be informed what a region is dedicated to.

Also: the WordPress admin UI already uses a few ARIA landmarks. Thus, when the Editor is used in the context of the WP admin, the editor regions need to be distinguished from the ones in the admin. All the editor regions used a name that started with "Editor" for this reason. See #7940, #7938, and #2380

Screenshots

ARIA landmarks in the WordPress 5.4 admin and in the block editor
The Editor landmarks are clearly distinguished and their purpose is clear enough, with the exception of:

  • "Editor top bar": admittedly, this wasn't that great even before latest changes
  • "Editor footer": it was added recently and doesn't help so much users

Screenshot 2020-04-19 at 14 18 41

On latest Gutenberg 7.9.1
All the landmark labels within the editor don't clarify they pertain to the editor. Also:

  • "Header" doesn't tell users what this landmark purpose is. It's more a visual term than something that can actually help users.
  • "Footer": same as above: it's a visual term that doesn't help users understand what this region purpose is
  • "Left sidebar": added in Move the Block Patterns UI to the inserter #20951 I guess this is used for Full Site Editing? This label is also slightly unfair: as a blind user using a screen reader, I wouldn't really be interested in being informed there's a sidebar on the "left". References to placement and position are meaningless to screen reader users. Still, "Left sidebar" doesn't tell anything useful about this landmark purpose.

Screenshot 2020-04-19 at 14 14 12

Additional context

Not sure why these changes were made. If these labels are going to be used also for other purposes, then we'll need to provide specific labels for the ARIA landmarks.

Worth also noting the ARIA regions labels usage is still documented in the navigate-regions Readme:

For better accessibility, these elements must be properly labelled to briefly describe the purpose of the content in the region. For more details, see "ARIA landmarks" in the WAI-ARIA specification.

@afercia afercia added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Regression Related to a regression in the latest release labels Apr 19, 2020
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Jul 24, 2020
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). [Status] In Progress Tracking issues with work in progress [Type] Regression Related to a regression in the latest release
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants