2.4.2 Page Titled

Level: A | Principle: Operable | Since: WCAG 2.0 | Automation: Full

What This Means

Every web page must have a descriptive, informative title that identifies its topic or purpose. The title appears in the browser tab, bookmarks, search results, and is the first thing a screen reader announces when a page loads. A missing or generic title forces users to explore the page content to understand where they are.

Who This Affects

Screen reader users — the page title is announced immediately on page load, providing instant orientation
Users with cognitive disabilities — descriptive titles help confirm they navigated to the correct page
All users managing multiple tabs — the title is the only identifier visible in the browser tab bar

Common Pitfalls

1. Missing title element

<!-- Bad: no title -->
<head>
  <meta charset="utf-8">
</head>

2. Generic or duplicate titles

<!-- Bad: same title on every page -->
<title>My Website</title>

<!-- Bad: meaningless title -->
<title>Page 1</title>
<title>Untitled</title>

3. Title does not reflect page content

<!-- Bad: title says "Home" but the page is the checkout flow -->
<title>Home</title>

4. SPA that never updates the title

// Bad: title stays as "My App" across all routes
// No document.title update on route change

How to Fix

Use descriptive, unique titles

<!-- Good: specific, descriptive title -->
<title>Shopping Cart - Acme Store</title>

<!-- Good: page-specific followed by site name -->
<title>Edit Profile | Settings | Acme Store</title>

Update title on SPA route changes

// Good: update title when route changes (React example)
useEffect(() => {
  document.title = 'Order Confirmation - Acme Store';
}, []);

Follow a consistent pattern

Use a pattern like "Page Name - Section - Site Name" or "Page Name | Site Name" consistently across the site.

<title>Search Results for "headphones" - Acme Store</title>
<title>Wireless Headphones - Products - Acme Store</title>
<title>Contact Us - Acme Store</title>

How to Test

Look at the browser tab and read the page title. It should describe the specific page content, not just the site name.
Right-click the page and select "View Page Source" (Ctrl+U / Cmd+Option+U). Find the <title> element in the <head> section and verify it is not empty or generic.
Navigate to 3-4 different pages on the site and confirm each has a unique, descriptive title that reflects the page content.
For single-page applications (SPAs), navigate between routes and verify the document title updates on each route change.
Pass: Every page has a unique, descriptive <title> that identifies the page topic and updates on route changes in SPAs.
Fail: Any page has a missing, empty, generic ("Home," "Untitled"), or duplicate title, or the title does not update in SPAs.

axe-core Rules

| Rule | What It Checks | |------|---------------| | document-title | Ensures the document has a non-empty <title> element | | page-has-heading-one | Ensures the page contains a level-one heading |