WCAG 2.4.2 Page Titled — Descriptive Title Guide

What this rule means

WCAG 2.4.2 requires that every web page has a descriptive title defined in the <title> element within the HTML <head>. The title must describe the page's topic or purpose, helping users identify where they are without reading the entire page content.

Page titles are the first piece of information announced by screen readers when a page loads. They appear in browser tabs, bookmarks, search engine results, and history lists. A clear, unique title is essential for orientation and navigation.

Why it matters

Screen reader users hear the page title before any other content. When titles are missing or generic (like "Untitled" or "Page"), users cannot distinguish between multiple open tabs or determine whether they have reached the right page. This is especially problematic when users have many tabs open or navigate through browser history.

Descriptive page titles also improve usability for all users. They help with bookmarking, appearing in search results, and quickly scanning browser tabs. For users with cognitive disabilities, clear titles reduce confusion and support wayfinding.

Related axe-core rules

document-title — Ensures each HTML document contains a non-empty <title> element.

How to test

Check the browser tab to see if a descriptive title is displayed.
View the page source and verify the <title> element exists within <head> and contains meaningful text.
Run axe-core and check for document-title violations.
Navigate between pages and confirm each title is unique and describes the specific page content.

For single-page applications, verify the title updates when the route changes.
Test with a screen reader — the title should be the first thing announced on page load.

How to fix

Every page needs a unique, descriptive title that identifies the page within the context of the site.

Basic page title

<!-- Bad: Missing or generic title -->
<head>
  <title>Page</title>
</head>

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

<!-- Good: Descriptive, page-specific title -->
<head>
  <title>Accessibility Audit Report — Inculva Dashboard</title>
</head>

<!-- Good: Pattern — Page Name - Site Name -->
<head>
  <title>Contact Us - Inculva</title>
</head>

Dynamic title updates in SPAs

// React: Update document title on route change
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function useDocumentTitle(title) {
  useEffect(() => {
    document.title = title ? `${title} — Inculva` : 'Inculva';
  }, [title]);
}

// Usage in a page component
function AuditPage() {
  useDocumentTitle('Accessibility Audit Report');
  return <main>...</main>;
}

Server-side title generation

<!-- Astro / Next.js pattern -->
---
const pageTitle = `${article.title} — Inculva Knowledge Base`;
---
<html>
  <head>
    <title>{pageTitle}</title>
  </head>
  <!-- ... -->
</html>

Common mistakes

Using the same title on every page — titles must be unique and describe the specific page content.
Using only the site name as the title without including the page-specific topic.
Leaving the <title> element empty or using placeholder text like "Untitled Document".
In single-page applications, not updating the document title when the route changes.
Placing the most important information at the end of the title — screen reader users hear the beginning first, so put the page-specific part before the site name.
Using excessively long titles (over 60-70 characters) which get truncated in browser tabs and search results.