Give every web page a unique title that describes its topic or purpose.
Meeting the Web Accessibility Standard
When a web page’s title describes its topic or purpose, this meets WCAG 2 Success Criterion 2.4.2 Page Titled (Level A).
What is a page title?
On the web, a title is the text that succinctly and accurately describes the topic or purpose of the web page, whether that’s an HTML document or a document in another format like PDF.
Benefits of accessible titles
Well-written titles enable users to:
- understand what the web page contains without having to read it
- identify the page or pages they’re interested in from a list of titles, such as search results or a site map
- know what page they’re currently viewing — for example, from the title that’s displayed in the browser’s title bar or page tab
- see what pages they’ve already viewed — for example, in the browser history which lists the titles of previously viewed pages.
When a web page’s title can be identified and read by other software:
- assistive technology users have direct access to it — the title is the first thing a screen reader announces when reading a web page, and many users will check a page’s title to orient themselves
- social media platforms can display the page’s title when its URL is added to a post
- search engines learn about what the page contains and display its title in relevant search results — search engines also use the title to rank the page, which makes it an important element for search engine optimisation (SEO).
If a web page is missing a title, browsers will often use the page’s URL or path, which normally will not be as helpful.
How to create a title
Titles in HTML documents
In HTML documents, a page’s title is provided by the
<title> element, which goes inside the
<head> element. A web page must have a
<title> element, and it can only contain text and no other HTML markup.
For more details on the
<title> element, see:
Note: Do not confuse the
<h1> elements. While the
<title> often reproduces what’s in the page’s
<title> element provides the title for the HTML document as a whole, and the
<h1> represents the top-level heading for the page’s main body content.
Titles in PDF documents
To set the title for a PDF document, edit the ‘Title’ value in the Document Properties using PDF editing software such as Adobe Acrobat. For more details, see:
- Title — Create and verify PDF Accessibility (Acrobat Pro) — Adobe
- PDF18: Specifying the document title using the Title entry in the document information dictionary of a PDF document — WCAG 2 — W3C.
Titles in Microsoft Office documents
To set the title for a Microsoft Office document — for example, Word, Excel, or PowerPoint — enter a value for ‘Title’ in the document’s properties. For more information, see View or change the properties for an Office file — Microsoft Support.
Make a title accessible
A good title:
- is descriptive — it succinctly describes the specific purpose or subject of the web page and make sense when read out of context
- is unique within the website that the page belongs to — when 2 or more pages have the same title, the title cannot be relied on to identify a specific page among others
- is succinct — shorter titles are easier to understand than longer titles, and titles longer than 65 characters risk being truncated in search engine results pages
- is front-loaded — it starts with the most important identifying information
- reflects search keywords — it includes words that people use when searching for related content
- matches the page’s main heading — it reproduces, or at least uses the primary keywords in, the web page’s
<h1>(or the content’s main heading in the case of PDF and Microsoft Office documents).
For more on writing good titles, see:
Titles for form error and success pages
If someone submits a form and the page is updated to include an error or confirmation message, reflect this in the page’s title.
Titles for search results pages
With search engine results pages, include some information about the search in the page’s title.
Titles in Single Page Applications (SPAs)
Update the page’s
<title> element on each route change to help indicate that a new view has loaded and to keep the user updated on the state of, or their ‘location’ in, the application. For more, see:
- Accessible page title in a single-page React application — Kitty Giraudel
- Page Titles and A11y in Single Page Applications (esp. React & Vue) — Suzanne Aitchison — DEV Community
- Accessible page titles in a Single Page App — Hidde de Vries.
Testing page titles
For each web page:
- Check that the web page has a title.
- In HTML documents, review the value of the
<title>element, either by checking the page’s markup or the browser’s title bar or page tab — see TetraLogical’s video, Quick accessibility test: Page titles.
- For PDF and Microsoft Office documents, review the value for ‘Title’ in the document’s properties.
- In HTML documents, review the value of the
- Confirm that the title describes the page’s topic or purpose.