Does your website have accessible page titles?
Also known as a title tag, a page title is a brief description of a webpage. Page titles don’t actually appear within the text of a web page. They’re communicated to user agents (such as web browsers), then displayed to users in a variety of ways.
The Web Content Accessibility Guidelines (WCAG) address titles in Success Criterion (SC) 2.4.2, “Page Titled.” As WCAG’s authors note:
The intent of this Success Criterion is to help users find content and orient themselves within it by ensuring that each Web page has a descriptive title. Titles identify the current location without requiring users to read or interpret page content. When titles appear in site maps or lists of search results, users can more quickly identify the content they need.
That guidance is helpful, but not especially specific. To write titles accurately, it may be helpful to understand how page titles could affect accessibility for real-world users.
Below, we’ll provide an overview — along with a few tips for titling your pages.
Page titles enable users to quickly identify content
On a conventional web browser, the title tag appears at the top of the browser window or tab. Screen readers (software that converts text to audio or braille) may read the page title when the user opens the page.
If the page is titled accurately, the title provides people with a useful navigational tool. For example:
- A screen reader user might open several tabs. When navigating to a tab, the screen reader announces the page title, and the user understands whether they’ve selected the appropriate page.
- A user with a memory or neurocognitive disability may use page titles to quickly decide whether the page contains the information they need.
- People with mobility impairments may also use page titles for navigation. Switching tabs or opening web pages may be time-consuming for these users, and accurate titles may enable them to browse more efficiently.
Like many accessibility improvements, accurate page titles improve the internet for every user, regardless of their abilities. Page titles are also displayed in search engine results, and they’re an important ranking factor for search engine optimization (SEO).
Best Practices for Writing Accessible Page Titles
Needless to say, if your website’s title tags are inaccurate or redundant, you’ll want to address the problem as soon as possible. WCAG 2.1 SC 2.4.2, “Page Titled,” is a Level A requirement — if you don’t meet that requirement, your website isn’t truly accessible. Read more about WCAG conformance levels.
Fortunately, this is a simple accessibility barrier to fix. Some best practices to keep in mind:
- Write page titles for users, not search engines. Use keywords naturally (for example, “Dan’s Used Cars in Peoria, Illinois"), but don’t be redundant (for example, “Used Cars - Dan’s Used Cars - Used Cars in Peoria Illinois).
- Limit your titles to about 30-60 characters. Longer titles are generally less helpful, and extremely long titles may be frustrating to screen reader users.
- Make sure every page has a unique title.
- Don’t confuse page titles with H1 subheadings. While H1s and title tags often share identical text, the H1 is part of the on-page content.
- Avoid vague title tags like “Services,” “Home,” or “Store.” Your users should be able to determine the contents of the page by reading the title tag alone.
Performing a page title audit can help you find title tags that need some extra work — and improve your SEO in the process.
For more guidance, read: Perform a Page Title Audit to Improve Mobile & Website Accessibility
The principles of accessible design can help you build better content
Clear, concise title tags are an important accessibility feature, and regularly reviewing your titles can help you communicate more effectively with your audience.
While you’re reviewing your page titles, look for other opportunities to make improvements:
- Use subheadings to break up longer pieces of content. Review the best practices for writing headings and make sure you’re using appropriate semantic HTML.
- Make sure all images have alternative text (also called alt text). Alternative text describes images for people who cannot perceive content visually, and accurate alt text can benefit SEO.
- Test your website with a keyboard alone (no mouse) to find keyboard accessibility issues. Read our quick guide for testing keyboard accessibility.