Give every website and book nav landmark a distinct, localizable label - #14813
Merged
Merged
Conversation
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Closes #14376.
Website and book pages emit up to six
<nav>landmarks. Before this PR, only the breadcrumbs had a label, and it was hardcoded English (aria-label="breadcrumb"). Assistive technology listed the rest as identical "navigation" entries, and axe flagged the pages underlandmark-unique.This PR gives each landmark a distinct label from a new set of language keys:
navigation-main-label("Main")navigation-secondary-label("Secondary")navigation-page-label("Page")navigation-breadcrumbs-label("Breadcrumbs")aria-labelledbyon its existing localized heading ("On this page") — no new keyAuthors can override any key with
language:metadata, per document or site-wide.Label wording
The default labels do not contain the word "navigation". Screen readers announce the landmark role after the label, so a label like "Main navigation" reads as "Main navigation, navigation". The ARIA Authoring Practices Guide says not to use the role as part of the label, and the WAI page-structure tutorial uses the bare label "Main" for a nav region. VoiceOver testing confirmed the double announcement with the longer wording.
Design notes
lgand up, the other below). The APG also asks identical navigation sets to share a label.aria-labelledby, which is the pattern the WAI tutorial recommends. The TOC nav can also hold the Other Formats / code-links / other-links sections. The label stays acceptable: everything in that nav is page-scoped.revealjs(same partial pattern,toc-slide.html).Out of scope
<a>elements carry an invalidrole="navigation"(secondary-nav toggles, sidebar section toggles). Unchanged here — now handled by Make website sidebar section toggles keyboard-operable buttons #14826, which removes both and makes the sidebar section toggles real<button>disclosures. The two PRs are complementary: this one labels the genuine<nav>landmarks, Make website sidebar section toggles keyboard-operable buttons #14826 deletes the fake ones. They conflict only innews/changelog-1.11.md, where both add an entry to## Accessibility; keep both.Documentation
No documentation PR: the only user-facing change is the new language keys, and the docs already refer users to
_language.ymlitself as the reference for available keys (Document Language).Testing
language:override, and a customtoc-titlein bothhtmlandrevealjs.landmark-uniquepasses on navbar-only, sidebar-only, navbar+sidebar, and book sites, at desktop and narrow viewports, including with the mobile sidebar open. Also reviewed the in-page report fromaxe: output: documenton the rendered site. These browser checks were manual; this PR does not add a Playwright case for them.Checklist
I have (if applicable):
AI-assisted PR