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

Improve and clarify usage of navigable regions aria-label #7938

Closed
afercia opened this issue Jul 12, 2018 · 0 comments
Closed

Improve and clarify usage of navigable regions aria-label #7938

afercia opened this issue Jul 12, 2018 · 0 comments
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes).

Comments

@afercia
Copy link
Contributor

afercia commented Jul 12, 2018

The main section of the Gutenberg UI are wrapped in a few ARIA landmark regions, to help assistive technologies users to navigate the UI.

Each region needs to be labelled with an aria-label attribute. I'd like to propose to improve a bit the current labels and clarify their usage in the components/higher-order/navigate-regions/README.md where there's no mention of the labels.

Screenshot from the screen reader JAWS:

screenshot 31

Note: the word "region" is added by JAWS.

1
To distinguish the Gutenberg ARIA landmarks from the ones used in the WordPress UI, the former ones are prefixed with the word "Editor", except "Publish" which was recently added. I'd suggest to change it to "Editor Publish".

2
The "Editor toolbar" label is a bit confusing for two reasons:

  • there are many toolbars in Gutenberg, it would be better to specify this is the "main" or the "top" toolbar (thinking at the option "Fix Toolbar to Top")
  • nested within the "Editor toolbar" landmark, there's an "Editor toolbar" toolbar: using the same name for both is confusing

screen shot 2018-07-12 at 18 26 56

I'd suggest to rename the ARIA landmark region to "Editor top bar". Worth reminding these labels are not visible, they will be announced just by screen readers.

3
Improve the README.md explaining the usage of aria-label.

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).
Projects
None yet
Development

No branches or pull requests

1 participant