Olivero mobile nav aria-label "Main Menu" vs visible "Menu"

Problem

WCAG 2.5.3 Label in Name requires that the accessible name of a control contains the visible label text. The Olivero mobile navigation button has an aria-label of "Main Menu" but the visible text is "Menu".

Visible text: "Menu"

Accessible name: "Main Menu"

A speech recognition user who says "Click Menu" may not match because the accessible name is "Main Menu". Some speech engines require the accessible name to start with the visible text, and "Main Menu" does start with "Menu" — but the inconsistency is a best-practice gap and the mismatch could confuse users.

Proposed resolution

Change the aria-label to match the visible text:

<button class="mobile-nav-button" data-drupal-selector="mobile-nav-button"
  aria-label="{{ 'Menu'|t }}" aria-controls="header-nav" aria-expanded="false">

Alternatively, change the visible text to "Main Menu" if that is the preferred label.

File

• core/themes/olivero/templates/layout/page.html.twig — line 75

Test

Add a FunctionalJavascript test that:

1. Visits a page with the Olivero mobile nav
2. Asserts the mobile nav button's aria-label matches its visible text content

Related

• Meta: Assess Drupal core for WCAG 2.5.3 Label in Name
• WCAG 2.5.3 Label in Name

AI Disclaimer: This was done with a lot of help from AI.