WCAG 2.2 Demo Suite

2.4.2 Level A Guideline 2.4 Navigable Added in WCAG 2.0 Partly detectable automatically

Page Titled

Web pages have titles that describe their topic or purpose.

Who this affects

Screen reader users hear the title first and use it to confirm they landed in the right place. Anyone with many tabs open relies on it, as do bookmarks and browser history.

The failure and the fix

Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.

Fails 2.4.2

Open the failing example in a new tab

fail.html — the problem

<!-- The page content is perfectly clear. The problem is entirely in <head>:

     <title>Untitled Document</title>

     A screen reader user arriving here is told "Untitled Document" before
     anything else. With ten tabs open, none of them can be told apart. -->

<h1>Payment</h1>
<p>Step 3 of 4 — enter your card details.</p>
<div class="field">
  <label for="card">Card number</label>
  <input type="text" id="card" inputmode="numeric" autocomplete="cc-number">
</div>

Meets 2.4.2

Open the passing example in a new tab

pass.html — the fix

<!-- The title tells the user where they are before they read anything:

     <title>Payment (step 3 of 4) — Checkout — Riverline Books</title>

     It names the page, the process it belongs to, and the site. Including
     "step 3 of 4" also supports 2.4.8 Location.

     In a single-page app you must update document.title on every route
     change, and announce the change - the browser will not do it for you. -->

<h1>Payment</h1>
<p>Step 3 of 4 — enter your card details.</p>
<div class="field">
  <label for="card">Card number</label>
  <input type="text" id="card" inputmode="numeric" autocomplete="cc-number">
</div>

How to test it

Check every page has a unique, descriptive title, most-specific information first — "Checkout: Payment — Riverline Books" rather than "Untitled" or "Home" on every page.

  • Automated

    Missing or empty titles are caught reliably. Whether the title is descriptive and unique across the site needs a human or a custom check.

    This demo's failure is not machine-detectable. axe's document-title rule only checks that a <title> element exists and is non-empty. "Untitled Document" satisfies it completely. Whether a title is descriptive or unique across a site is a judgement no scanner makes.

    Relevant axe rules:

    • document-title

  • Keyboard

    Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.

  • Screen reader

    Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.

  • Visual

    Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.

In the specification