All pages have descriptive title elements that differ meaningfully between pages
Why it matters
Screen reader users navigate multi-page applications by listening to the page title—it is announced immediately on load and is the primary orientation cue in browser tab lists and browser history. When every route shares the same title or a page has no title at all, users cannot distinguish where they are in the application. WCAG 2.2 SC 2.4.2 (Level A) requires descriptive, unique titles. Section 508 2018 Refresh 503.3.2 mirrors this requirement. Missing or duplicate titles produce a disorienting experience that forces re-reading full page content on every navigation.
Severity rationale
High because missing or duplicate page titles disorient screen reader users on every page load, but the failure does not block access to content the way a missing label or broken keyboard path does.
Remediation
Export a metadata object from every page file in the Next.js App Router. Use the pattern Page Name | App Name for consistency:
// app/settings/page.tsx
export const metadata = {
title: 'Account Settings | My App',
description: 'Manage your account preferences and security settings.',
};
For dynamic routes, use generateMetadata:
// app/posts/[slug]/page.tsx
export async function generateMetadata({ params }: Props) {
const post = await getPost(params.slug);
return { title: `${post.title} | My Blog` };
}
Add a default title template in app/layout.tsx as a fallback:
export const metadata = {
title: { template: '%s | My App', default: 'My App' },
};
Detection
- ID:
page-title-unique - Severity:
high - What to look for: Count all relevant instances and enumerate each. Check for page title tags across all routes. In Next.js App Router, look for
metadataexports orgenerateMetadatafunctions. In other frameworks, check for<Head>components with<title>tags. Verify each page's title is unique and describes the page's content. - Pass criteria: Every page route has a title tag set. At least 1 implementation must be verified. All page titles are unique (not all identical). Titles reflect the page's content.
- Fail criteria: Any page lacks a title, or all pages share an identical title with no per-page variation.
- Skip (N/A) when: Never — all pages should have descriptive titles for screen reader users.
- Detail on fail: Name the pages lacking unique titles. Example:
"Pages /dashboard, /settings, and /profile all use the generic title 'My App' with no unique content descriptor. Users on these pages cannot distinguish them by title alone." - Remediation: Each page should have a unique, descriptive title. In Next.js App Router:
// app/settings/page.tsx export const metadata = { title: 'Settings | My App', }
External references
- wcag:2.2 · 2.4.2 — Page Titled
- section-508:2018-refresh · 503.3.2 — Page Title
Taxons
History
- 2026-04-18·v1.0.0·Initial import from gov-section-508·automated