Klar Barrierefrei / wcag

WCAG 2.4.2 · rule: document-title

How to fix a missing or generic page title

The <title> is the first thing a screen reader announces and the label on every browser tab. Here is a formula for titles that actually help people.

Last updated: · By Paweł Dziura

The title does more work than you think

The text in your <title> is the hardest-working string on the page, and most of its jobs are invisible to the developer writing it. It's the first thing a screen reader announces when a page loads, so it's how a blind user confirms they landed where they meant to. It's the label on the browser tab, which is how anyone with a dozen tabs open finds this one again. It's the name saved in the bookmark and the entry in browser history. And it's the clickable blue headline in Google's results. One string, five jobs. WCAG 2.1 criterion 2.4.2 (Page Titled, Level A) requires that every page have a title describing its topic or purpose, and the axe rule document-title checks that one exists.

Follow a missing title through the system

Trace what breaks when the title is absent or generic. A screen-reader user opens a link and hears "Untitled document" or the raw URL — they have no confirmation of where they are. A sighted user with several tabs sees a row of identical favicons labelled "Home" or "React App" and can't tell them apart. Someone returns to a bookmark saved as example.com/p?id=294 and has no idea what it was. Every one of these is the same root cause surfacing in a different tool. 

<title></title>
<title>Untitled</title>
<title>Home</title>          <!-- identical on every page of the site -->
<title>Document</title>

A formula that works

A good title is specific first, general last — put the unique part of the page at the front, where it's visible in a narrow tab and read first by a screen reader, and the site name at the end: 

<title>Pricing — Acme Analytics</title>
<title>How to fix low colour contrast — Klar Barrierefrei</title>
<title>Checkout: shipping details (step 2 of 3) — Acme Store</title>

Three rules of thumb keep titles useful:

  • Make every page's title unique. If two pages share a title, they're indistinguishable in tabs, history, and search.
  • Front-load the distinctive words. "Pricing — Acme" beats "Acme — Pricing" because the useful word survives truncation.
  • Keep it honest and concise. Roughly 60 characters shows in most contexts before Google and browsers truncate; don't pad it with keywords.

The single-page-app trap

Client-side routing is where this quietly regresses. A framework renders the initial <title> once, then swaps page content on navigation without updating it — so the tab and every screen-reader announcement stay stuck on the homepage title for the rest of the session. If you route on the client, update document.title on every route change, and move keyboard focus to a sensible spot so the new title is actually announced.

How our scanner detects it

The document-title rule is binary in the easy case: we check that the document has a <title> element in the <head> and that it isn't empty. A page with no title, or an empty one, fails and we report it. The judgement we can't automate is quality: a title of "Home" or "Untitled" technically passes because a non-empty string exists, yet it fails the intent of 2.4.2 completely. Whether your title is descriptive, unique across the site, and front-loaded well is precisely the kind of call we surface for manual review rather than mark as passing.