Media Library tabs child issue HTML

Problem

WCAG 2.5.3 Label in Name requires that the accessible name of a control contains the visible label text. In the Media Library, the tab buttons use visually-hidden text that precedes the visible type label, causing the accessible name to start with text the user cannot see.

Visible text: The media type name (e.g., "Image", "Video")

Accessible name: "Show Image media" or "Show Image media (selected)"

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

Proposed resolution

Move the visible type label to the start of the accessible name. Change:

$display_title = $this->t('<span class="visually-hidden">Show </span>@title<span class="visually-hidden"> media</span>', ['@title' => $title]);

To:

$display_title = $this->t('@title <span class="visually-hidden">media</span>', ['@title' => $title]);

And the selected variant:

$display_title = $this->t('@title <span class="visually-hidden">media</span><span class="active-tab visually-hidden"> (selected)</span>', ['@title' => $title]);

File

• core/modules/media_library/src/MediaLibraryUiBuilder.php — lines 251, 253

Test

Add a FunctionalJavascript test that:

1. Opens the Media Library dialog
2. Asserts that each tab link's accessible name starts with the visible type label
3. Asserts that the selected tab's accessible name starts with the visible type label

Related

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

AI Disclaimer - Yes, it was used here.