This document is in beta. Help us by reporting issues via Github or email
On this page:
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.
- Each page has a title that is unique within the app/website;
- Each page has a title that indicates its topic or purpose.
- The page title is not unique within the website/app;
- The page title does not indicate its topic or purpose;
- The page title isn't updated when the main content of the page changes
- This mistake is common in Single Page Apps
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.
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".
See the W3C's detailed explanation of this guideline with techniques and examples.
- 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'
- How to write better page titles on the Nomensa Blog
- Providing descriptive titles for Web pages technique in the Web Content Accessibility Guidelines
- 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.
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.titlewhen the component that displas your page's main content mounts or gets updated. - In React, you can use Dan Abramov's React Document Title component if you prefer a declarative approach.
- W3C Web Content Accessibility Guidelines 2.1
- Government Digital Service WCAG 2.1 Primer
- Barclays' Accessibility Design Standards
- The BBC's Mobile Accessibility Guidelines
This document is in beta. Help us by reporting issues via Github or email