Navigation <nav>
element labels should not contain the term 'navigation' #68682
Description
Description
Screen readers already announce <nav>
elements by using the term 'navigation' because that's the implicit role of a <nav>
element.
Using the term 'navigation' in the arira-label
of a <nav>
element produces a double announcement of the term 'navigation':
- As part of the accessible name.
- As the element's role.
As such, all the aria-label
attributes used to label any <nav>
element should never contain the term 'navigation'.
This applies to both the Navigation block and any other <nav>
element used in the editor.
The navigation block automatically generates a name for the navigation menu that is then used as the aria-label:
This should be changed to 'Menu' to avoid a redundant, noisy announcement. Same applies to other <nav>
elements used in the editor.
The editor UI already refers to the concept of 'Menu' in many places (see screenshot below) so that appears to be a term users are already familiar with. The same screenshot illustrates how VoiceOver announces the menus:
- Highlighted in green: the announcement of the role.
- Note: when a
<nav>
element is empty, VoiceOver announcesempty navigation
. - Highlighted in red: the default aria-label used by the editor.
Step-by-step reproduction instructions
- Create a new navigation menu.
- Observe the default menu name and aria-label contain the term 'navigation'.
- Go to Styles > Revisions.
- Assuming there are many revisions, the panel will show pagination links.
- Observe the aria-label of the
<nav>
element is `Global styles pagination navigation'.
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
Please confirm which theme type you used for testing.
- Block
- Classic
- Hybrid (e.g. classic with theme.json)
- Not sure