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.
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.
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' },
};
gov-section-508.wcag-core.page-title-uniquehighmetadata exports or generateMetadata functions. In other frameworks, check for <Head> components with <title> tags. Verify each page's title is unique and describes the page's content."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."// app/settings/page.tsx
export const metadata = {
title: 'Settings | My App',
}