Problem/Motivation
Drupal core makes widespread use of invisible labels, aimed at screen reader users. Unfortunately these techniques can cause problems for speech control users, if used incorrectly. WCAG 2.1 introduces new success criterion 2.5.3: Label in Name to address these problems.
This issue is about auditing Drupal core for "Label in Name", and correcting any problems found.
Background reading:
- Understanding Success Criterion 2.5.3: Label in Name
- Improving web navigation for speech recognition users
- Exploring WCAG 2.1 — 2.5.3 Label in Name
- Make screenreader say button alt-attribute instead of innerText - A worked example of pass/failure markup techniques in a StackOverflow answer.
- Label and name from content mismatch - some examples of pass/fail involving
aria-label
Proposed resolution
- Survey ALL instances of .visually-hidden, aria-label, aria-labelledby.
- This is potentially a BIG survey, so we may split this plan up by module, theme, etc.
- For any problems found, file a child issue to correct them.
Example:
- PASS:
t("Manage fields <span class="visually-hidden">for @bundle</span>", ["@bundle" => $entity->bundle()]). A speech control user can activate this by saying "Click manage fields" and their assistive tech can narrow the choices down to the instances which match. So users can choose from a handful of relevant matches. - FAIL:
t("Manage <span class="visually-hidden">@bundle</span> fields", ["@bundle" => $entity->bundle()]). A speech control user cannot activate this by saying the visible link text. "Click manage fields" won't work, because that exact phrase doesn't appear in the names given to assistive tech. The user will have to say "Show numbers" to highlight all controls on the page, instead of just a few relevant matches.
TODO: Make a set of instructions for testing this. Flesh out the pass/fail examples to include scenarios with aria-label and aria-labelledby. A good starting point would be this answer the situations described in this Stack Overflow answer: Make screenreader say button alt-attribute instead of innerText
Remaining tasks
User interface changes
Update strings where any violations occur.
API changes
None.
Data model changes
None.
