← All criteria

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
The problem, in practice — select the image to enlarge it
Three browser tabs for a 'MySite' website's Home, About, and Contact pages, compared without and with descriptive page titles. 'Not descriptive' shows every tab titled with just the generic site name 'MySite', giving no way to tell the pages apart. 'Descriptive' shows each tab titled with its specific page first — 'Welcome – MySite', 'About Us – MySite', 'Contact Us – MySite' — so each tab clearly identifies its own topic. A single-page app example below shows the document title being updated via JavaScript as the visible view changes from a product list to product details to the shopping cart.

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 navigation

Prefer

<title>Wireless Mouse — Acme Store</title>
document.title = `${invoiceNumber} — Acme Store`;
// re-run on every client-side route change

Resources

  • 2.4.6 Headings and Labels

    Same underlying idea — descriptive naming — applied to a different element: 2.4.6 is about headings and form labels describing their content; this criterion is about the page's own <title> doing the same job at the tab/window level.