WCAG 2.4.2: How to Fix Missing or Uninformative Page Titles
Last updated: 2026-03-22
What This Criterion Requires
WCAG 2.4.2 requires that web pages have titles that describe their topic or purpose. The page title is the text in the HTML title element that appears in the browser tab, bookmarks, search engine results, and is the first thing announced by screen readers when a page loads. A good page title should be unique within the site, concise yet descriptive, and identify both the specific page content and the website it belongs to. The most common pattern is 'Page Name - Site Name' or 'Page Name | Site Name.' Every page must have a title element in the head section, and the title must accurately reflect the page content. Common failures include pages with missing title elements, pages with generic titles like 'Untitled' or 'Home,' all pages sharing the same title regardless of content, titles that do not update when single-page applications change views, and titles that are stuffed with keywords rather than being genuinely descriptive. Dynamic pages like search results should include the search query in the title, and paginated content should indicate the current page number.
Why It Matters
Screen reader users rely heavily on page titles as the primary means of identifying pages. When a new page loads, the title is the first thing announced by the screen reader, allowing users to immediately confirm they have arrived at the correct page. When switching between browser tabs, the page title is read aloud, enabling users to find the right tab. Without descriptive titles, screen reader users cannot distinguish between tabs or know what page they are on without reading through the content. Users with cognitive disabilities benefit from clear, descriptive titles that confirm the page purpose and reduce confusion. Users who bookmark pages need descriptive titles to find their bookmarks later. Search engines display page titles as the clickable headline in results, making them critical for both accessibility and SEO. In single-page applications, failing to update the page title when the view changes is particularly disorienting for screen reader users, who have no other immediate indication that new content has loaded.
Common Failures and How to Fix Them
Missing or empty page title
A page lacks a title element entirely, or the title element is present but empty. Screen readers announce nothing or announce the URL, and browser tabs display the URL or 'Untitled.'
<head>
<meta charset="UTF-8">
<!-- No title element -->
</head>
<!-- or -->
<head>
<title></title>
</head> <head>
<meta charset="UTF-8">
<title>Contact Us - Acme Web Design</title>
</head> Same title used on all pages
Every page on the site uses the same generic title (usually just the site name), making it impossible for users to distinguish between pages by title alone. This is especially common in CMS themes with poorly configured title templates.
<!-- Every page has the same title -->
<!-- Homepage: -->
<title>Acme Corp</title>
<!-- About page: -->
<title>Acme Corp</title>
<!-- Contact page: -->
<title>Acme Corp</title> <!-- Each page has a unique, descriptive title -->
<!-- Homepage: -->
<title>Acme Corp - Innovative Software Solutions</title>
<!-- About page: -->
<title>About Our Team - Acme Corp</title>
<!-- Contact page: -->
<title>Contact Us - Acme Corp</title> SPA view changes without updating the title
A single-page application (SPA) changes the page content when navigating between views but does not update the document title. Screen reader users are not notified that the content has changed and cannot identify the current view.
<script>
// React Router navigation without title update
function navigateTo(path) {
renderView(path);
window.history.pushState({}, '', path);
// Title remains unchanged
}
</script> <script>
function navigateTo(path, pageTitle) {
renderView(path);
window.history.pushState({}, '', path);
document.title = pageTitle + ' - Acme Corp';
// Announce the page change to screen readers
const announcer = document.getElementById('route-announcer');
announcer.textContent = pageTitle + ' page loaded';
}
</script>
<div id="route-announcer" aria-live="assertive" class="sr-only"></div> How to Test
- Check every page's title element in the HTML source or browser tab to ensure it is present, non-empty, and descriptive of the page's specific content.
- Verify that page titles are unique across the site by comparing titles of different pages; no two pages with different content should share the same title.
- For single-page applications, navigate between views and verify that the document title updates to reflect the current view content.
- Use a screen reader to load the page and confirm that the announced title accurately describes the page topic and purpose.
CMS-Specific Guidance
This criterion commonly causes issues on these platforms:
- Wordpress Accessibility Checklist
- Shopify Accessibility Checklist
- Squarespace Accessibility Checklist
- Wix Accessibility Checklist
- Webflow Accessibility Checklist
- Nextjs Accessibility Checklist
- Hugo Accessibility Checklist
- Ghost Accessibility Checklist
Further Reading
Related WCAG Criteria
Get our free accessibility toolkit
We're building a simple accessibility checker for non-developers. Join the waitlist for early access and a free EAA compliance checklist.
No spam. Unsubscribe anytime.