‘Page Titled’ means using helpful and clear… page titles.
Introduction
All users benefit from descriptive page titles. A good title tells your users which page they are on and what that page is for. This lets users quickly understand if they are on the right page.
Users with visual, cognitive and mobility impairments further benefit as the technology they use can more heavily rely on page titles.
How to Pass ‘Page Titled’
Give each page on your website a unique and descriptive meta title.
‘Page Titled’ Tips
A useful format for writing page titles is: ‘Page name – Page description – Website name’ ( ‘About Us – Learn our Secrets – ACME Corp’).
If pages are part of a process, such as a checkout, use the title to tell the user what stage they’re at (‘Checkout – Page 1 of 5 – ACME Corp’).
Don’t forget dynamic pages such as search results (‘Search Results for XXXX’) and 404 errors (Sorry, we can’t find that page).
In many cases, it makes sense to repeat the page title or a variation of it as the top heading on your page.
Type your page titles into a spreadsheet and review them. If they make sense out of context, they will work on your website.
Use these page titles in your sitemap (see Multiple Ways and Location) to make it more accessible.
See also
- Info and Relationships
- Meaningful Sequence
- Multiple Ways
- Location
- Understanding Success Criterion 2.4.2 (W3C)
Free Developer Resources
Join over 3,700 subscribers on my weekly web accessibility email and get free developer resources like WCAG Checklists and special offers.
Over 600 developers like you have learned more about the Web Content Accessibility Guidelines with my guidebook.
Also, the page title appears in the bookmarks / favorites and in the browsing history, further helping people find their way around. In this sense it benefits all users, regardless of ability.
Great point Michelangelo! Can’t count how many times I’ve edited bookmarks because they use a terrible title.
Great article: I see too many pages with blank titles. However, your example of how to code the title is missing the actual tag.
Thanks for the heads up Elizabeth, WordPress stripped out the tags on my behalf! All fixed now.
One area that often gets missed is multi page forms (e.g. a payment process). A generic title is useful, but even more helpful is to indicate the stage of the process in the title, e.g. “Contact details – shopping basket – Widgetworld”, then “payment method – shopping basket – Widgetworld”. Of course a balance has to be drawn between meaningful information and titles that are too long to be useful.
Good point Richard, often the checkout process is handled by a third party too – meaning that proper page titles can be hard to come by.
Good job, Luke, perfectly fit for an introduction to the art of titling a page. I especially like how you defend the right choice to be made when choosing between SEO and accessibility.
Don’t know if you plan an “advanced level” article, but once you have covered the 80 easy % of use cases, there’s more to know about page titles to ensure the 20 remaining % of more tricky cases.
Richard mentioned one, there are 3 others that come to my mind: decks of pages, search engine results, and dealing with HTML code that gets into the title.
Decks of pages: I mean numbered pages of one set, like the 3 pages of one long article split into 3 distinct parts (sorry, don’t know the actual conventional name in English). There you need to indicate the number of the current page, and if you can, the total number of pages. Eg.: “Why Web accessibility is so cool – Page 1 out of 3”.
Search engine results: ideally, you should be able to distinguish different searches. The safest way I have found for that is to recall the search key the user entered. Eg.: “Search results for ‘accessibility AND awesome NOT constraint'”. Note that in some cases you’ll get numbered pages.
Dealing with HTML code: this happens mostly when a CMS uses the title of an article to fill in the TITLE element of the page. Sometimes you need to key in some HTML code, for an emphasizing effect, or to mark a foreign word with a . Most CMS fail utterly at handling this situation, and tend to leave the HTML code as is. Since it’s not interpreted inside the tag, the code appears in the title, which is awkward, at best. The solution is to convert all HTML tags into plain text. WordPress does a very good job at this, for instance.
Hope this helps! Keep me posted if you write a follow-up article with advanced techniques.
Great comment Olivier! I think that – although this is aimed at beginners – the points you make can be added into the article.
“Decks” is a good way of describing those pages, where are article is split over several pages (pagination?). To my mind, it shouldn’t be done in the first place. I could be wrong, but I think the idea is to increase pageviews and therefore advertising revenue? Hopefully it’s something that will die out as advertisers become more savvy. There are some cases where it’s natural, such as a blog archive so if you have got them, I think your “Page 1 of 3” idea works well.
Search results is another good example, often left by developers as “Search”. I like your suggestion, subject to length issues.
I guess the HTML is something that needs to be watched out for, rather than planned out. Perhaps more suited to developers choosing or building a CMS.
One bonus thought: 404 error pages are often left with “404” as the title, which is absolutely useless to anyone. A helpful line like “We can’t find that page” or “Sorry, there’s been a mistake” are best.
Thanks for the follow up, Luke.
There are certainly situations where paginated (?) decks are an attempt at creating artificial advertising space. However, the situation exists and can be legitimate, especially with large contents that are difficult to handle when shown as a single page. And even if there was no legitimate reason at all, our job as accessibility advisers is to take care of it, no matter how much we like it or not. It’s very tempting to take benefit of our position and go beyond our mandate, but it’s a different job, with different skills. Whenever I can, I try to remain within my field of expertise, simply because I do not consider myself competent enough in other fields. But that’s a very personal point of view!
Great point about the 404 page, which is generally overlooked anyway.
Another situation that requires great attention, and this one can be critical in a purchasing or registering process: the handling of errors and completion messages in forms. Most systems do not inform the user of the occurrence of an error right from the TITLE, which can result in serious confusion or complete misunderstanding. But that could be an article in itself!