2.4.2 Page Titled: Web pages have titles that describe topic or purpose. (Level A)
This applies to native apps by replacing “Web pages” with “Screens”.

Requirements

• Each page has a title that is unique within the app/website.
• Each page has a title that indicates its topic or purpose.

Why is it important?

This ensures that people with cognitive disabilities can quickly orientate themselves within the service and identify the purpose of the page without interpreting its entire contents.

The page/screen title is often the first thing people will see or hear and acts as a confirmation of where they have arrived at, helping people orientate themselves within websites and apps. It is particularly helpful for vision impaired users who cannot perceive the whole page/screen at once.

Summary

Give every page a unique and helpful title that indicates the purpose of the page.
Each page must have a unique title that indicates its topic or purpose.

Common mistakes

• The page title is not unique within the website/app;
• The page title does not indicate its topic or purpose;
• The title does not indicate the page is part of a service on Gov.UK;
• The page title isn’t updated when the main content of the page changes
  • This mistake is common in Single Page Apps

Design Guide

• Provide titles for each web page that you design
  • The page title is what appears in the browser’s tab for that website, and what gets announced by screen readers when the page loads
• Generally, the page title should be the same as the page’s main heading (the unique <h1> on the page)
• For pages that show dynamic results (like product research results), include the search query at the beginning of the page title, followed by the name of the site
  • Good example: ‘Red shoes – Google’
  • Less good example: ‘Amazon.co.uk: Red shoes’

Page Title Example for Web

• Each page has a unique and descriptive title, provided via the <title> element.
• In single page applications, the title is updated every time a new view is loaded.

Update the page title in Single Page Applications

From a user’s perspective, it doesn’t matter to them whether they’re visiting a Single Page App or not. They expect page titles to be updated to reflect the main content of the page as it changes. The simplest way to update the page’s title in a Single Page App is to update the value of document.title when the component that displays your page’s main content mounts or gets updated.

References

1. How to write better page titles on the Nomensa Blog
2. Providing descriptive titles for Web pages technique in the Web Content Accessibility Guidelines
3. Accessibility Guidelines- Github.io