Page title is unique and descriptive

When every page of an application shares the same <title> tag — often the product name alone — screen reader users who open multiple browser tabs cannot distinguish between them. Browser tab switchers read the title aloud; a list of identically-titled tabs gives no navigational information. WCAG 2.2 SC 2.4.2 (Page Titled) requires that pages have titles that describe their topic or purpose. Section 508 2018 Refresh 501.1 mandates that content conform to WCAG 2.2. In single-page applications, client-side route transitions that do not update document.title also fail SC 2.4.2 — the title announces 'Home' even when the user has navigated to their account settings. This affects screen reader users navigating via browser tabs and sighted users managing many open tabs simultaneously.

Set unique, descriptive page titles using the format Page Name | Site Name. In Next.js App Router, export metadata from each route page.tsx:

// src/app/dashboard/page.tsx
export const metadata = {
  title: 'Dashboard | MyApp',
  description: 'View your account overview and recent activity.',
};

// src/app/products/[slug]/page.tsx
export async function generateMetadata({ params }: { params: { slug: string } }) {
  const product = await getProduct(params.slug);
  return {
    title: `${product.name} | MyStore`,
    description: product.description,
  };
}

// SPA without Next.js — update on route change
useEffect(() => {
  document.title = `${currentPageName} | MyApp`;
}, [currentPageName]);

Set a global fallback in src/app/layout.tsx:

export const metadata = {
  title: {
    default: 'MyApp',
    template: '%s | MyApp',
  },
};

With the template, individual pages only need to set title: 'Dashboard' and the suffix is appended automatically.

• ID: accessibility-basics.keyboard-focus.page-title-unique

• Severity: low

• What to look for: Enumerate every relevant item. Check the <title> element in the document head. Each page should have a unique, descriptive title that conveys the page's purpose. For single-page applications, verify that the title updates when routes change.

• Pass criteria: At least 1 of the following conditions is met. Every page has a unique descriptive title. SPA routes update the title on navigation.

• Fail criteria: All pages share the same generic title, or the title does not update on SPA route changes.

• Skip (N/A) when: Never — all pages need unique titles.

• Detail on fail: Describe the title issue. Example: "All pages have title 'App' with no page-specific variation. SPA routes do not update the title on navigation."

• Remediation: Ensure unique page titles:

  // Next.js App Router
  export const metadata = {
    title: 'Products | MyStore',
  };
  
  // SPA - update on route change
  useEffect(() => {
    document.title = `${pageName} | MyApp`;
  }, [pageName]);