Page title, frames and zoom Rule

Every page needs a title document-title

The title element in the head is the first thing a screen reader says when a page loads, the text on the browser tab, the name of the bookmark, and the headline in search results. A missing or empty title leaves people with a tab labelled by the URL and a screen reader that announces untitled. Make it specific to the page and put the page's own name first.

WCAG 2.2 A 2.4.2 Page Titled

Websight reports this as Documents must have <title> element to aid in navigation

Who it affects

Someone using a screen reader with the local newspaper open in eight tabs hears untitled eight times when switching tabs, and has to read into each one to find the article they wanted.

Someone with a memory impairment bookmarks the page and later finds a bookmark called index.html.

Someone who has just searched for the dentist's opening hours sees a result with a bare address for a headline and clicks the next one instead.

Broken versus fixed

The broken markup is shown as code rather than rendered, because the effect is in how it is announced or handled, not how it looks.

Broken
<head>
  <meta charset="utf-8">
</head>

The tab shows the file name. A screen reader announces the URL, or untitled document.

Fixed
<head>
  <meta charset="utf-8">
  <title>Opening hours: Mill Street Dental</title>
</head>

The tab reads Opening hours: Mill Street Dental. The page's own name comes first so it is still visible in a narrow tab.

Test it by hand in two minutes

  1. Look at the browser tab. If it shows a URL or Untitled, the title is missing.
  2. Open four pages from the site in four tabs. Can you tell them apart by the tab text alone?
  3. View the source and check the title is inside head, is not empty, and is not the same on every page.
  4. With a screen reader running, reload the page. The title is the first thing announced.

The fix

Before
<head>
  <meta charset="utf-8">
</head>
After
<head>
  <meta charset="utf-8">
  <title>Opening hours: Mill Street Dental</title>
</head>

Page name first, then the site, separated by a colon or a vertical bar. Keep it under about 60 characters so it is not cut off.

Single-page app

Before
<title>App</title>
After
document.title = "Results: 12 matches";

When the view changes without a page load, update document.title from script so each screen has its own name.

Search results page

Before
<title>Search</title>
After
<title>3 results for opening hours: Mill Street Dental</title>

Put the outcome in the title so a screen reader user hears it straight away.

Common mistakes

  • The same title on every page, usually the site name.
  • Site name first, so every tab reads Mill Street Dental | ... and the useful part is cut off.
  • A list of keywords for search engines instead of a name a person would use.
  • A title that is only spaces, which counts as empty.

WCAG criteria this rule maps to

axe-core tags this rule as WCAG 2.2 level A. It is one of the checks for:

The scanner checks that the document has a title element with text in it. It cannot tell whether the title describes the page, or whether every page on the site shares the same one. Automated tools find only part of the accessibility problems on a page; a pass on this rule is not a pass on the criterion.

A Frames must have a title frame-title An iframe is a window onto another page: a map, a video, a booking form, a payment field. A Frames on the same page must have different titles frame-title-unique If a page has several frames, each needs its own title. A The page must say what language it is in html-has-lang The lang attribute on the html element tells browsers and screen readers which language the page is written in. A Give people a way to skip past repeated navigation bypass Most pages start with the same header and menu.

Scan your own page for this and 63 other checks

Open any page in Chrome, click Websight, and get a score out of 100 with every issue explained and a draft fix snippet per element.

Add Websight to Chrome

Free scans, no account, nothing leaves your computer. Automated tools find only part of the problems; the extension says so on every report.