Operable · 2.4 Navigable
Each web page must have a title that describes its topic or purpose. In HTML this is the title element, which browsers show in tabs and screen readers announce when the page loads.
Live demo
The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.
Open each page of the small bank site and read its title in the tab strip. Try to tell which tab is which without looking at the page.
Open a current account, save for later or borrow for a new home.
Compare our easy access and fixed rate savings accounts.
Chat with us in the app at any time, or visit one of our branches.
Open a current account, save for later or borrow for a new home.
Compare our easy access and fixed rate savings accounts.
Chat with us in the app at any time, or visit one of our branches.
The tools follow the version you last used.
What happened
Why it passes
Each title names the page first and the bank second. A screen reader announces Savings accounts when that page opens, and tabs, bookmarks and history entries can all be told apart.
Why it fails
All three pages are titled Northbank. A screen reader user hears the same name whichever page opens, and three open tabs look exactly alike.
Examples
Five examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.
+ Savings accounts –
Fails
Live preview
<head> <meta charset="utf-8"> <title>Northbank</title></head><body> <h1>Savings accounts</h1></body>The title is the same on every page of the site, so it does not say that this page is about savings accounts. Screen reader users arriving on the page, and anyone with several tabs open, cannot tell where they are.
Passes
Live preview
<head> <meta charset="utf-8"> <title>Savings accounts – Northbank</title></head><body> <h1>Savings accounts</h1></body>The title describes the page's topic and puts it before the site name, so it stays useful even when a narrow tab cuts off the end (techniques G88 and H25).
Fails
Live preview
<head> <meta charset="utf-8"> <title>Untitled Document</title></head><body> <h1>Contact us</h1></body>The page has a title element, but its text is a leftover default that describes nothing about the page (failure F25).
Fails
Live preview
function showView(view) { document.querySelector("main").replaceChildren(view.render()); history.pushState({}, "", view.url); // document.title is never changed, so every view is called "Northbank"}The content and the address change, but the title stays the same, so every view in the app is announced, bookmarked and listed in history under one name.
Passes
Live preview
function showView(view) { document.querySelector("main").replaceChildren(view.render()); history.pushState({}, "", view.url); document.title = `${view.heading} – Northbank`;}Setting document.title each time the view changes gives every screen its own descriptive title, just as a separate page would have.
Why it matters
Screen reader users hear the title first and use it to confirm where they are, and everyone relies on titles to tell apart tabs, bookmarks, history entries and search results. Clear titles also help people with cognitive disabilities stay oriented.
W3C: Understanding 2.4.2Level A
Level A is the minimum: failing it can shut some people out completely.
Where it is required
Required where the law names WCAG 2.0 or later at this level: the United States, Canada, the European Union, the United Kingdom, France, Germany, Italy, Spain, the Netherlands, Ireland, Norway, Switzerland, India, Japan, Australia, New Zealand and Israel.
How to test
A few concrete steps. Automated tools find some failures; most need a person.
Common failures