Walking into a library you are faced with thousands of books to read. Each one has a title, and they’re grouped together in like topics. You’re looking for a book on how to develop accessible websites, so you head to the internet section. As you walk into the aisle, all the books are pages out with spines to the back of the shelf.
When we don’t provide a clear <title> in the <head> element of our HTML, we create issues. Issues a lot like trying to find the right book on accessible web development when the pages are facing you. Sure it isn’t one-to-one, so let’s look at how they are similar.
Dewey in a Nutshell
I am not a librarian and I don’t have the Dewey Decimal System memorized, but we don’t need that. The system breaks down the categories of non-fiction books into numbers. Within that number range, the topic is broken into subtopics. This goes all the way down until we get several decimals deep. At this point you’ve narrowed down the category via the system. Now to read titles, authors, editions, and publication dates.
These are all things unique to the book. And it’s how we tell one book from another.
Website Titles
We don’t have a Dewey Decimal System for the internet. However, we do have some tools to classify our sites.
First, every website has two addresses. One human friendly one, tarnoff.info, and one computer friendly one, the IP address. The human friendly only includes some context, not unlike a book title. If we compared it to the Dewey Decimal System, our human readable address would resemble the title of a book. As we move into different sub-pages of the site, we’re opening up different chapters. On some pages, we may have links into a page, these might reflect the individual paragraphs.
When a screen reader user is working on a computer, they are likely to have multiple tabs open. This is just like a sighted user. The <title> is what fills the tab with the text it has. Usually the text is partially obscured, but with AT it can still be read. Having a unique name for that page will enable the blind user to navigate between tabs easier.
Comparison
I go to Wikipedia. I’m going to open 10 tabs, hit “Random” on all of them and use that to write a song. I’m using NVDA. Now for Wikipedia, if all I heard was “Wikipedia” on all 10 tabs, I don’t know what each is about. If we include the topic we hear “Wikipedia [TOPIC]” which is significantly clearer. Now I know what each tab is about. This way, as I’m writing a line about the topic in tab 9, I recall there was another related term. I can check my page titles for the word.
How to Construct a Proper Title
We want to provide our users with as much information as possible to orient them within the site. Because of this it will vary by site as it is ultimately down to the information architecture. However, we can apply simply rules to help. The ideal title is going to similar to a street address or a revers breadcrumb. It should give us a specific location within a set within the site.
Breadcrumb
<nav aria-label="breadcrumbs">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Top Category</a></li>
<li><a href="#">Sub Category</a></li>
<li><a aria-current="page">Page</a></li>
</ul>
</nav>
If we use the breadcrumb code, and start with text from the bottom, we build a strong title. Working upwards strengthens this title further.
<head> <title>Page - Sub Category - Category - Site</title> </head>
The Page portion of the title should include an overlap with the page’s <H1>. This helps build the strong connection from what the user tried to do (open a link to the page). The title confirms they went to the page, the heading further elaborates what the page is about.
Page titles need to be unique, otherwise we built a library of books with no way to tell them apart. Every site will have different needs. A good rule is to start specific. Then move to less specific until you reach the site name.
Now get out there and fix your titles! Want to discuss this? Find me on LinkedIn and BlueSky!