Problem

WCAG 2.5.3 Label in Name requires that the accessible name of a control contains the visible label text. The navigation admin menu "Extend" button has visually-hidden text that precedes the visible menu item title.

Visible text: Menu item title (e.g., "Content", "Structure")

Accessible name: "Extend Content", "Extend Structure"

A speech recognition user who says "Click Content" may not match because the accessible name starts with "Extend", not "Content".

Proposed resolution

Move the visually-hidden "Extend" text after the menu item title:

<button
  class="toolbar-menu__link toolbar-menu__link--{{ menu_level }}"
  data-toolbar-menu-trigger="{{ menu_level }}"
  aria-expanded="false"
  data-index-text="{{ item.title|first|lower }}"
>
  <span class="toolbar-menu__link-title">{{ item.title }}</span>
  <span data-toolbar-action class="toolbar-menu__link-action visually-hidden">{{ 'Extend'|t }}</span>
  {{ icon('navigation', 'chevron', { class: 'toolbar-menu__chevron', size: 16 }) }}
</button>

File

  • core/modules/navigation/templates/navigation-menu.html.twig — lines 138-139

Test

Add a FunctionalJavascript test that:

  1. Visits the admin navigation
  2. Asserts each expandable menu button's accessible name starts with the visible menu item title

Related

Issue fork drupal-3611425

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

mgifford created an issue. See original summary.

mgifford’s picture

mgifford
he/him
Primary language English
commented
Parent issue: » #3015239: Assess Drupal core for WCAG success criterion 2.5.3 Label in Name

tiago made their first commit to this issue’s fork.

tiago opened merge request !17335

tiago’s picture

tiago commented
Status: Active » Needs review

I opened MR !17335.

The visually hidden "Extend"/"Collapse" text now comes after the visible title, so the accessible name starts with the visible label: "Structure Extend" instead of "Extend Structure".

Besides navigation-menu.html.twig (the level 2 toggle button mentioned in the summary), the same fix was needed in the toolbar-button component. That is where the top-level buttons (Structure, Configuration, Reports, the user menu) come from, and those are the ones most users see. No JS or CSS changes were needed.

Added NavigationMenuMarkupTest::testExpandableButtonLabelInName(), which fails without the fix.