Operable · Level A · 2.4.2
Page Titled
Every page needs a <title> that describes its specific topic or purpose — not a generic site name copy-pasted onto every page, and for single-page apps, one that actually updates as the visible content changes.
- Blind
- Low vision
- Cognitive
- Motor
How to recognize it
Open a few pages of the same site in separate tabs and look at what distinguishes them, or check the <title> element directly. The common failure is every page titled identically — just the site name, or 'Home' repeated everywhere — so someone with several tabs open, or a screen reader user cycling through open tabs, or someone with limited short-term memory trying to find the tab they were just on, has no way to tell them apart. A related failure specific to single-page apps: the <title> gets set once when the app first loads and never updates again as the user navigates between views client-side, so the tab stays permanently labeled with whatever the entry page was called, no matter how many screens deep the user actually is.
How to fix it
Give each page a title naming its specific content, not just the site — 'Wireless Mouse — Acme Store' rather than 'Acme Store' repeated on every product page, 'Invoice #4021 — Acme Store' rather than a generic 'Dashboard.' For single-page apps, update document.title programmatically on every client-side route change, the same way a full page navigation would set a fresh <title> automatically.
Example
Avoid
<title>Acme Store</title>
<!-- identical on every product page -->document.title = "Dashboard";
// set once on load, never updated on client-side navigationPrefer
<title>Wireless Mouse — Acme Store</title>document.title = `${invoiceNumber} — Acme Store`;
// re-run on every client-side route change