Skip to content

Navigation <nav> element labels should not contain the term 'navigation' #68682

Closed
@afercia

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

  1. As part of the accessible name.
  2. 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:

const title = area
? sprintf(
// translators: %s: the name of a menu (e.g. Header navigation).
__( '%s navigation' ),
area
)
: // translators: 'navigation' as in website navigation.
__( 'Navigation' );

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 announces empty navigation.
  • Highlighted in red: the default aria-label used by the editor.

Image

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

Metadata

Assignees

Labels

[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Package] Block library/packages/block-library[Package] Edit Site/packages/edit-site[Status] In ProgressTracking issues with work in progress[Type] BugAn existing feature does not function as intended

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions