This document is in beta. Help us by reporting issues via Github or email
Back to the overview page
Page title
On this page:
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.
Requirements
- Each page has a title that is unique within the app/website;
- Each page has a 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
Why?
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.
Official wording in the Web Content Accessibility Guidelines
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.
Guidance for Design
- 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’
More guidance for design
Guidance for iOS
This section needs more content. Contribute via Github or email.
Guidance for Android
This section needs more content. Contribute via Github or email.
Guidance 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 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.
More info
Sources
Contribute
This document is in beta. Help us by reporting issues via Github or email