Page Titles
The page title element is displayed in the browser tab. Page titles define the name of the html document.
Impacted Users
Screen reader users hear the page title as the first thing spoken when they set focus to a webpage and when switching between browser tabs. Each page title needs to be unique and describe the purpose of the page.
Low Vision users need to see the unique portion of the page title displayed in their browser tab to confirm they're on the right page.
Users with cognitive disabilities need unique and specific page titles so they know they're on the correct page.
Designers
Designers have the same accessibility responsibilities as content designers for page titles.
Content Designers
Write page titles that are unique and describe the purpose of the page.
Each page must have a unique and meaningful title that describes the specific purpose of the page.
✅ Do
- Write page titles that are unique and describe the purpose of the page.
- Write page titles that are meaningful when listed in the Sitemap.
- Place the unique portion of the page title in the front so that it's visible in the browser tab.
Good Content Example
See the Pen Page Title - Good Example by Paul J. Adam (@pauljadam) on CodePen.
Live Good Content Example
Page Title - Good Example❌ Don't
- Don't write page titles without describing the purpose of the page.
- Don't write the same page title for multiple pages.
- Don't write the unique portion of the page title at the end.
Bad Content Example
See the Pen New Page 1 by Paul J. Adam (@pauljadam) on CodePen.
Live Bad Content Example
Testing for Accessibility
Using Web Inspector
- Right Click > Inspect the page.
- Make sure the title element inside the head is unique and describes the purpose of the page.
- If title element is unique and describes the purpose of the page then it passes. ✅
- If title element is not unique or does not describe the purpose of the page then it fails. ❌
Developers
Developers have the same accessibility responsibilities as content designers for page titles.
⚠️ Developers must also make sure SPAs (Single Page Apps) which dynamically update their content via AJAX also update their page titles. e.g. document.title = "New Title"
Disabilities Affected
Assistive Technologies Applicable
Design System Documentation
N/A
ARIA Design Patterns
N/A