2.4.2 Page Titled

Who it helps

Screen reader users hear the page title first, so it tells them where they landed without reading the page. People with cognitive or memory disabilities, and anyone with many tabs open, use titles to tell pages apart.

How to meet it

• Add one title element inside the head of every page, and never leave it empty.
• Describe the specific page first, then the site name, for example "Order history | Acme Store".
• Give each page a different title, so two pages never share the same text.
• In single-page apps, update document.title on every route change.
• Reflect the current state in the title, such as the step in a checkout or "Search results for boots".

Examples

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>Order history</h1>
  </body>
</html>

<head>
  <meta charset="utf-8">
  <title>Home</title>
</head>

<head>
  <meta charset="utf-8">
  <title>Order history | Acme Store</title>
</head>

Common mistakes

• Using the site name alone as the title on every page.
• Leaving a single-page app with one title that never changes between views.
• Keeping placeholder titles from a template, such as "Untitled" or "React App".
• Putting a long marketing tagline first, so the useful part is cut off in the tab.

Related criteria

• 2.4.6 Headings and Labels
• 2.4.4 Link Purpose (In Context)
• 3.1.1 Language of Page

Official W3C explanation of 2.4.2