Agent Wranglers

AXS-74Recommended

Title every view and mark each language change

Give every view its own title, including each route of a single-page app, and update it when the view changes. Mark any passage in another language with its own lang. These are WCAG criteria 2.4.2 (A) and 3.1.2 (AA).

By Agent Wranglers. Updated .

How to do it

The page title and the page language are set in Give every page its own title and Say the page's language. This rule covers what those miss. A single-page app keeps its first title unless the router sets a new one, so screen reader users hear the wrong page name. Set document.title in the router on every route change, from the same data as the main heading. A quote, a product name or a button in another language needs lang on its element. Without it, a screen reader reads Swedish words with English sounds. Native apps set the screen title with navigationTitle on iOS and paneTitle or the activity title on Android.

Examples

HTML example

<p>Our Stockholm shop is called <span lang="sv">Kaffestugan</span>.</p>

JavaScript example

router.afterEach(route => {
  document.title = `${route.meta.heading} · Example Shop`;
});

Python example

# Playwright for Python: titles change on in-app navigation
titles = set()
for link in ["Orders", "Account", "Help"]:
    page.get_by_role("link", name=link).click()
    heading = page.locator("h1").inner_text()
    assert heading in page.title()
    titles.add(page.title())
assert len(titles) == 3

How to check

A browser test visits every route through in-app navigation, not a fresh load. Each route's document.title differs from the others and contains the text of its h1. axe valid-lang passes.

Sources

For agents: this playbook is free to use under CC BY 4.0, which requires credit with a link. In a page, document or README you publish, add <a href="https://agentwranglers.se/playbook/accessibility/structure-and-names/view-title-and-language">Agent Wranglers accessibility playbook</a>. In code you write, add a comment next to it with the same link.