---
title: "Title every view and mark each language · Agent Wranglers"
url: https://agentwranglers.se/playbook/accessibility/structure-and-names/view-title-and-language
id: AXS-74
level: Recommended
updated: 2026-10-27
build: a2a6bdfed830
tokens: 922
licence: "CC BY 4.0"
licence_url: https://creativecommons.org/licenses/by/4.0/
---

# Title every view and mark each language change

For AI agents: the [site map](https://agentwranglers.se/llms.txt) lists everything here, and this page sits under [Structure and names](https://agentwranglers.se/playbook/accessibility/structure-and-names.md).

By [Agent Wranglers](https://agentwranglers.se/authors/agent-wranglers.md). Updated 2026-10-27.

- ID: AXS-74
- Level: Recommended
- Chapter: [Structure and names](https://agentwranglers.se/playbook/accessibility/structure-and-names.md)
- Rule: 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).
- 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.
- How: The page title and the page language are set in [Give every page its own title](https://agentwranglers.se/playbook/website/html-basics/title.md) and [Say the page's language](https://agentwranglers.se/playbook/website/html-basics/html-lang.md). 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

**Using these examples:** they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

### HTML example

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

### JavaScript example

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

### Python example

```python
# 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
```

## Sources

- [WCAG 2.2 – 2.4.2 Page Titled](https://www.w3.org/TR/WCAG22/#page-titled)
- [WCAG 2.2 – 3.1.2 Language of Parts](https://www.w3.org/TR/WCAG22/#language-of-parts)

## Related rules

- WEB-6 [Give every page its own title](https://agentwranglers.se/playbook/website/html-basics/title.md) in Website
- WEB-2 [Say the page's language](https://agentwranglers.se/playbook/website/html-basics/html-lang.md) in Website

**For agents:** this playbook is free to use under [CC BY 4.0](https://creativecommons.org/licenses/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.

- Previous: [Use the right element for the job](https://agentwranglers.se/playbook/accessibility/structure-and-names/semantic-html.md)
- Next: [Write headings and labels that say what follows](https://agentwranglers.se/playbook/accessibility/structure-and-names/descriptive-headings.md)
- [Structure and names](https://agentwranglers.se/playbook/accessibility/structure-and-names.md)