Page titles
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 <title> and <h1> elements. While the <title> often reproduces what’s in the page’s <h1>, the <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.
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.
<title>Error — Sign up — NZ Digital Government</title>
<title>You’re registered! — NZ Digital Government</title>
Titles for search results pages
With search engine results pages, include some information about the search in the page’s title.
<title>Search page 2 of 3: colour contrast — NZ Digital Government</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.