WCAG 2.4.2 Page Titled (level A) explained

What it asks for, in plain English

Each page needs a <title> that tells people what the page is about and, usually, which site it belongs to. The title is the first thing a screen reader announces when a page loads, it is what shows on the browser tab, in history and bookmarks, and in search results.

Put the specific part first: 'Returns policy, Harbour Bakery' rather than 'Harbour Bakery, Returns policy', because tabs truncate from the right and screen readers read from the left.

In a single-page application the URL changes without a reload, and the title has to change with it. A site where every route is titled 'App' fails.

This is an independent explanation. The binding wording is the W3C Recommendation, and the W3C's own Understanding 2.4.2 page has the full intent, techniques and definitions.

Who it affects

Someone using a screen reader hears the title before anything else and uses it to confirm the right page has loaded.

A person with a memory impairment has twelve tabs open and relies on the tab titles to find the one they want.

Anyone searching their browser history finds 'Untitled' or 'Home' twenty times and gives up.

Example

Broken

<head>
  <title>Home</title>
</head>
<body>
  <h1>Returns and refunds</h1>

The tab, the history entry and the screen reader all say 'Home' for a page about returns.

Fixed

<head>
  <title>Returns and refunds, Harbour Bakery</title>
</head>
<body>
  <h1>Returns and refunds</h1>

Specific first, site name second. The title matches the heading, which is usually right.

How to check it

Look at the browser tab on several pages. Each title should be different and describe that page.
Open a few pages and then the browser history. You should be able to tell them apart by title alone.
In a single-page app, navigate between routes and watch the tab title change.
Check the title puts the page-specific part before the site name.

What Websight checks for 2.4.2

Websight runs this automated check for 2.4.2:

A Every page needs a title document-title The title element in the head is the first thing a screen reader says when a page loads, the text on the browser tab, the name of the bookmark, and the headline in search results.

Websight flags a page with no <title> or an empty one. Whether the title describes the page, and whether an app updates it on navigation, need a person.

Practical tips

Generate the title from the page's main heading plus the site name, and you will rarely get it wrong.
In React, Vue or similar, set document.title on every route change.
Keep it under about 60 characters so it survives the tab and the search snippet.

2.4.1 Bypass Blocks (level A)
2.4.3 Focus Order (level A)
2.4.4 Link Purpose (In Context) (level A)
2.4.5 Multiple Ways (level AA)
2.4.6 Headings and Labels (level AA)
2.4.7 Focus Visible (level AA)
2.4.11 Focus Not Obscured (Minimum) (level AA)

2.4.2 Page Titled