( Operable / WCAG 2.4.2 )

Page is missing a descriptive title

ModerateLevel AWCAG 2.4.2 — Page Titled

What is this issue?

The document <title> element inside <head> is missing entirely, contains only whitespace, or holds generic boilerplate like “Home” or “Untitled Document” that doesn’t distinguish this page from any other on the site. The browser and every assistive technology reading the page have nothing more specific to fall back on.

In a single-page application, this also covers a title that was set once on initial load and never updated again as the user navigates between routes; every “page” the user visits inside the app announces the same stale title.

Why does this matter?

The page title is the very first piece of content a screen reader announces when a page finishes loading: before the heading, before the navigation, before anything else on the page. If that title is missing or generic, the user’s first moment on a new page tells them nothing about where they landed.

This compounds for anyone managing several open tabs or switching between them with a keyboard shortcut. A sighted user glances at the tab bar and picks out a distinctive icon or truncated title; a screen reader user has to switch to each tab and listen to its title read aloud. “Untitled Document” repeated across five open tabs makes that process useless, and search engines and AI answer tools also lift the title as the clickable headline in results, so a weak title quietly costs traffic on top of the accessibility failure.

Who is affected?

  • Screen reader users: hear the title announced first on every page load and tab switch; a missing or generic one removes their only quick way to confirm they’re in the right place before reading further.
  • Cognitive disabilities: users who rely on tab titles and browser history to re-find a page they visited earlier lose that anchor when every page across a site shares the same vague title.

What users experience

Lena uses JAWS on Windows and keeps eight tabs open while researching a purchase across several vendor sites. She switches to one tab with Ctrl+Tab, and JAWS announces “Untitled Document,” the same string three other open tabs also share, because the site’s single-page app never updates the title after the first route loads. She has to click into the tab and read the page’s main heading just to figure out which vendor she’s even looking at, a step sighted users skip by glancing at a distinct favicon and title snippet in the tab strip.

How do I fix it?

Give every page a <title> that names its specific content, not just the site. This works because the title element is read as a single, self-contained string with no other context required; a specific title alone tells the user exactly where they are, without them needing to read anything else on the page first.

A reliable pattern is “Specific content - Site name”: the unique part comes first since it matters most and truncates last, and the site name at the end adds brand context without repeating on every tab. For a single-page app built with a router, update document.title (or your framework’s title component) on every route change, not only on the app’s first load; a title set once and never touched again reintroduces this exact problem the moment a user navigates anywhere.

Code Examples

Before
<head>
  <title>Home</title>
</head>
After
<!-- Homepage: distinguish the site itself -->
<head>
  <title>Accessibility Audit Dashboard - RedFlag</title>
</head>

<!-- Inner page: lead with the specific content -->
<head>
  <title>Scan Results: example.com - RedFlag</title>
</head>

“Home” tells a returning user nothing they didn’t already know from opening the site. Naming the actual dashboard and, on an inner page, the specific scan being viewed gives every tab and every screen reader announcement something concrete to distinguish it by.

Framework Examples

A single-page app’s router controls navigation without a full page reload, so the browser never fires its own title update; your code has to do it explicitly on every route change, or the title freezes at whatever it was on first load.

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

const ROUTE_TITLES = {
  '/': 'Accessibility Audit Dashboard',
  '/scans': 'Scan History',
  '/settings': 'Account Settings',
};

function usePageTitle() {
  const location = useLocation();

  useEffect(() => {
    const pageName = ROUTE_TITLES[location.pathname] ?? 'Page not found';
    document.title = `${pageName} - RedFlag`;
  }, [location.pathname]);
}

The useEffect re-runs on every route change because location.pathname is in its dependency array, which is the piece that’s easy to skip when a single-page app is first wired up; without it, the title component only ever fires once, on the very first render.

Common Mistakes

Mistake: “The page has an <h1> that says what it’s about, so the title doesn’t matter as much.” The heading and the title serve different moments. A screen reader announces the title before the user has navigated to the heading at all: on tab switch, on page load, before any content reading begins. A great <h1> doesn’t help someone who hasn’t started reading the page yet.

Mistake: “One title works fine as long as it names the site.” A title that only names the site (“RedFlag”) is functionally the same as a missing one once a user has more than one tab from that site open: every tab reads identically. The site name belongs at the end, after the page-specific part that actually distinguishes this page from the others.

Mistake: “Single-page apps don’t need to update the title since the URL changes.” The URL bar and the document title are two separate pieces of browser state. A router changing the address doesn’t touch document.title on its own; that update has to be written explicitly, in a route-change handler or an effect, or the title stays frozen at its first-load value forever.

How RedFlag Detects This

Automated: axe-core rule, runs on every scan. RedFlag calls axe-core’s document-title rule as part of every scan, restricted to the WCAG 2.0/2.1/2.2 A and AA rule set. The rule checks the document once per scan for a <title> element inside <head> whose trimmed text content is non-empty.

False negative: axe-core confirms a title exists; it cannot judge whether the words in it actually describe the page. A title of “Page” copied identically onto every route in a site passes the automated check, since the check only looks for non-empty text, not distinctiveness or accuracy. Single-page app routes that never trigger a fresh page load are also outside a single-scan’s reach unless RedFlag’s crawler separately visits each route. False positive: none typical for this check, since the presence of non-empty title text is a binary condition. Manual step: open each distinct route or page in the site and confirm its title is both non-empty and specific to that page’s actual content, not shared boilerplate.

Manual Testing

  1. Open the page in Chrome or Firefox with NVDA or VoiceOver running.
  2. Load the page fresh and listen to what’s announced immediately. It should be the page’s specific title, not silence and not a generic phrase like “Untitled.”
  3. If the site is a single-page app, navigate to at least two different routes without a full page reload and check the browser tab text (or listen with the screen reader) after each navigation.
  4. If the title stays the same across different routes, or announces nothing meaningful, the check fails.
  5. Open several pages from the same site in separate tabs and confirm each tab’s title is different enough to tell them apart at a glance.

2.4.2 Page Titled: Web pages must have titles that describe topic or purpose. This rule is a direct, literal check of this criterion: a missing, empty, or non-descriptive title is exactly the failure 2.4.2 defines, with no indirect reasoning required to connect the two.

Page language is not set shares this page’s role as page-level metadata a screen reader reads before anything else: both are announced immediately on load, so both need to be right from the first page every visitor lands on.

Page has no skip navigation link is another first-moment-on-the-page concern: a missing title leaves a user unsure where they are, and a missing skip mechanism leaves them stuck reading the same navigation on every page once they do know.

Heading is empty or contains only whitespace is the same “content that should orient the user says nothing” failure, one level down from the page title, on the page’s main heading instead.

Meta refresh causes automatic page redirect covers a different way page-level behavior can strand a user without warning; both rules sit in the same “what happens the moment this page loads” territory RedFlag checks early in every scan.

Heading levels are skipped is a related orientation failure further down the page: the title should be the first landmark a user can trust, and a sane heading structure is the next one they rely on once they start reading.

References

Frequently asked questions

Does the title element affect SEO as well as accessibility?

Yes. The title element is also the primary text search engines and AI answer engines show as the clickable headline in results, so a missing or generic title costs rankings and click-through at the same time it costs screen reader orientation. Fixing it once serves both audiences.

How long should a page title be?

Keep it under about 60 characters so it does not truncate in a browser tab or a search result snippet. Put the most specific, distinguishing information first, since that is what gets cut off last if the title runs long.

Does every page in a single-page app need its own title?

Yes. A single-page app that never updates document.title after the first load leaves every route announcing the same title, which defeats the purpose of this rule just as much as never setting one at all. Update the title on every route change, not just on first page load.

Is a title required on error pages and modals?

Every full page load, including a 404 or error page, needs its own descriptive title. A modal or dialog that opens without a full page navigation does not use document title at all; give it an accessible name with aria-labelledby or aria-label instead.

Does axe-core check whether the title text is actually accurate?

No. RedFlag confirms a non-empty title element exists; it cannot judge whether the words in it genuinely describe the page. A title of "Page 2" or "Untitled Document" copied onto every route passes the automated check while still failing the user.