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:

When a web page’s title can be identified and read by other software:

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:

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:

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.

Examples of titles for form error and success pages
<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.

Example of title for search results page
<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:

Testing page titles

For each web page:

  1. 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.
  2. Confirm that the title describes the page’s topic or purpose.