Page titles and the ADA

The first thing a screen reader says

When a page loads, a screen reader announces the title before anything else. People with many tabs open scan titles to find the right one. Magnifier users may not see the page heading at all at first. A title like "Home" or "Untitled" tells none of them where they are.

Success Criterion 2.4.2 says web pages have titles that describe topic or purpose. The title is the HTML <title> element for a web page, or the equivalent document title for other formats such as a PDF. In a single-page application, the title should change with the view.

A document or application name can serve as a title, and it is a good idea to show where the page sits in a larger set, though that is advisory rather than required.

Titles that go wrong on government sites

• The same department name on every page.
• Generated titles from the content system, such as "Page 4412" or "index".
• Case or permit search results that never say which search or which page of results.
• Routes in a single-page portal that leave the title from the first screen.

A permit portal that has a unique title on every step also helps the many people who bookmark or share pages with a caseworker.

Results and multi-step flows

Put the unique information first, then the site name. For paged results, say which page.

<title>Court Records</title>

<title>Case search results for "Rivera", page 2 of 7 | County Court</title>

Build titles from the template

Put the unique part first and the site name last: a long welcome message in front hides the useful words from anyone who hears only the start of the title. That ordering is best practice, not a requirement. Generating titles from the layout also means no page ships without one:

<title>City of Riverton</title>   <!-- hard-coded in the layout -->

<!-- layout.html -->
<title>{% block title %}{% endblock %} | City of Riverton</title>

<!-- permit.html -->
{% block title %}Apply for a building permit{% endblock %}

Single-page apps

When the view changes without a page load, the title has to change too.

function CampsiteReservation() {
  return <h1>Reserve a campsite</h1>;   // title still says "State Parks"
}

function CampsiteReservation() {
  useEffect(() => {
    document.title = "Reserve a campsite | State Parks";
  }, []);
  return <h1>Reserve a campsite</h1>;
}

Screen titles in mobile apps

For apps, the title of each screen plays the same role. SwiftUI:

NavigationStack {
    PayWaterBillForm()
}

NavigationStack {
    PayWaterBillForm()
        .navigationTitle("Pay water bill")
}

Jetpack Compose:

Scaffold { padding ->
    PayWaterBillForm(Modifier.padding(padding))
}

Scaffold(
    topBar = { TopAppBar(title = { Text("Pay water bill") }) }
) { padding ->
    PayWaterBillForm(Modifier.padding(padding))
}

How to test and mistakes to avoid

1. Open ten pages from different templates and read the browser tab or window title for each. Is each one different and meaningful out of context?
2. Trigger a form error, a step change and a results page change. Does the title follow?
3. Check downloadable documents: the PDF title property, not just the file name.
4. Run a crawl and export titles. Look for duplicates and for default values such as "Untitled".

A crawler can list the titles, but only a person can say whether they describe the page, so use both.

Common mistakes: one title for the whole site, titles from file names, titles that never change in an app, and keyword stuffing.

The ADA angle and a ship-it list

PDF forms need a document title too, and a wrong one is easy to miss. Review titles on forms and notices as part of every content update.

Ship it when:

• Every page and document has a unique, descriptive title.
• The title changes with the view, the step and the results page.
• Titles come from the template and cannot be left blank.

See documents and PDFs for guidance on titles in files.

Sources

• Understanding SC 2.4.2: Page Titled (W3C), opens in a new tab
• 28 CFR Part 35, Subpart H: Accessibility of Web Information and Services (eCFR), opens in a new tab

Standard version: WCAG 2.1 (W3C Recommendation, 5 June 2018), as named in the Title II web rule. This page is for informational purposes only and is not legal advice. For binding requirements, refer to the official ADA statute and regulations, and ask a lawyer how they apply to you.