Page Titles and Multiple Ways
Give pages and single-page application states descriptive titles and provide more than one way to locate content across a site
WCAG 2.4.2 requires each web page to have a title that describes its topic or purpose. In a single-page application, update the document title when navigation creates a page-like route or state. A visible step heading helps orientation but does not replace the document title.
WCAG 2.4.5 requires more than one way to locate a page within a set of pages, unless it is a step in or result of a process. Main navigation, search, a sitemap, related links, and a table of contents are common mechanisms; not every page needs every mechanism.
Stale Page State vs. Descriptive Title and Routes
Document title: Account
Step 2
Choose notification preferences.
View inaccessible code
// Route changes, but document.title remains "Account".
renderStep(2)Document title: Notification preferences – Account – Example Co
Step 2 of 3: Notification preferences
View accessible code
document.title = 'Notification preferences – Account – Example Co'
renderStep({ number: 2, title: 'Notification preferences' })
// The page is also reachable through account navigation and search.Test it
Open pages directly, navigate with client-side routing, use Back and Forward, and restore a saved URL. Confirm that the title identifies the current topic before the site name and that multiple-way mechanisms lead to the same canonical destination.