2.4.2 Page Titled

WCAG 2.2 · 2.4.2 A Operable

What it requires

Every web page must have a title that describes its topic or purpose. In HTML this is the <title> element in the document <head>. The title should be meaningful and, ideally, unique within the site — letting people tell at a glance which page they are on and which tab, bookmark, or history entry belongs to it. A good pattern puts the page-specific topic first, then the site name, for example “2.4.2 Page Titled — EqualWeb Academy”.

  • Screen reader users — the title is announced first when a page loads, so it is how they confirm they reached the right page.
  • People with many open tabs — the title labels each tab; missing or duplicate titles make it impossible to pick the right one.
  • People with cognitive disabilities — a clear title orients them and reduces the memory load of tracking where they are.
  • Anyone using bookmarks, history, or search results, where the title is the human-readable label.

How to detect it

Checks for Page Titled
Check How
Title exists Confirm a non-empty <title> is present in the page source.
Title is descriptive Read it out of context: does it identify this page’s topic, not just the site?
Browser / screen reader Check the tab label and listen to what a screen reader announces on load.
Uniqueness Compare against sibling pages; near-identical titles fail the spirit of the SC.
Automated tools axe and similar catch a missing or empty title, but cannot judge whether wording is meaningful — that part needs human review.

How to fix it

  1. Add a single <title> element inside <head>.
  2. Lead with the page-specific topic, then append the site name.
  3. Keep titles unique across the site so each page is distinguishable.
  4. For single-page apps, update the title on each route change.
<head>
  <meta charset="utf-8">
  <title>Checkout — Acme Store</title>
</head>

Copy-paste tests

Automated coverage

The axe-core rule document-title flags failures of this criterion. Run it via the axe DevTools browser extension or axe-core in CI. Automated tools only catch some failures, so manual review is still required.

Run this in the browser console

page-title-check.js 
// Read-only: inspect the document title for this page.
const t = document.title;
console.log('<title> text:', JSON.stringify(t));
const titles = document.querySelectorAll('head title');
console.log('Number of <title> elements:', titles.length);
if (!t || !t.trim()) console.warn('Title is empty or missing.');
if (titles.length !== 1) console.warn('Expected exactly one <title>.');

What to check manually: Confirm the title actually describes this page's topic or purpose (not a generic "Home" or template name), and that it is unique versus other pages in the site.