For Global Accessibility Awareness Day this year, I participated in a panel discussion with several colleagues, including Nick Corbett, Accessibility Training and Research Coordinator at The Carroll Center for the Blind. In addition to being an accessibility trainer, Nick is blind and uses a screen reader to get around the web and his computer.
During the panel discussion, an attendee asked, “What are the top four ways websites can be made more accessible?” There were four panelists, so we decided to each say one thing that majorly impacts website accessibility.
Nick answered the question first. You can probably guess what his number one recommendation for improving website accessibility is based on the title of this article. Nick said one of the most important ways you can ensure the accessibility of your website is by including a meaningful and accurate page title.
What do I mean by page title?
When I write that you need an accurate page title, I’m not talking about the H1 heading on the page. While having an accurate and informative H1 heading on the page is important, what we’re talking about today is the HTML title between the opening and closing <head> tags on a webpage.
HTML titles are defined with the <title> tag. You can see this in use if you view the source of the Accessibility Weeklies archive page on The Admin Bar website. On that page, you’ll find code defining the page title like this:
<title>Accessibility Weeklies – The Admin Bar</title>
In this title tag, we have the page name, “Accessibility Weeklies,” followed by the HTML code for an en dash (–), then the site name, “The Admin Bar.” This tells the browser and screen readers that the page’s name is “Accessibility Weeklies – The Admin Bar.”
Meta Titles Cannot Replace HTML Titles
The <title> tag is a required element on all HTML pages. For a web page to pass checks with HTML validators, this tag cannot be missing or empty.
Defining a meta title or og:title (open graph title), which many SEO plugins do, is not a substitute for having a correctly defined title in a title tag. You can have these in addition to the title tag, but not instead of the title tag.
Why do HTML page titles matter for accessibility?
Screen readers use the page title to identify and announce the current page to users. When a screen reader user visits a website, the screen reader reads out the page title before any other content, allowing the user to understand the page’s purpose. Concise and descriptive page titles help users quickly grasp the content and navigate efficiently throughout a site.
For sighted people, the page title appears in the browser’s title bar or tab. This makes it easier for people of all abilities – including you and me, to distinguish between multiple open web pages.
Additionally, page titles are the default label when users bookmark a page or view their browsing history. Descriptive and informative titles help users recognize and recall previously visited pages, making it easier to revisit specific content.
How to Write Quality Page Titles
Title Length
It is important to have short titles that accurately reflect the page’s purpose. SEO best practices recommend that titles be no longer than 50 to 65 characters, as that’s where Google cuts off page titles in search results.
From an accessibility perspective, 50 to 65 characters is probably a good length as well. It’s long enough to convey information about the page but not so long it slows users down as they try to reach the content.
Include the Website Name
Make sure to append the website name after the page name in the <title> tag.
How many of us have “blog” pages on our websites? More than I can guess.
It’s important to include the website name in the page title so that if a user has multiple tabs open at once, it’s easy for a screen reader user to quickly hear which website’s “blog” page (etc.) they’re on when they enter the tab.
Title vs. H1 Heading
Your title can include the exact text as the H1 heading on the page but it doesn’t have to. Sometimes, you may need to shorten the H1 to generate a more concise title. You don’t want the title to be wildly different from the H1, however, as that can confuse users.
For example, I might add a page on my website with an H1 heading that says, “Equalize Digital is a Proud Certified B Corporation.” To reduce redundancy with my included site name and to simplify, I would write the HTML title as “Certified B Corporation – Equalize Digital.”
Avoid Duplicate Titles
Duplicating the same title across multiple pages can cause confusion and is an accessibility and SEO no-no.
If you have the same title on multiple site pages, a blind person may not realize they are two different pages if moving quickly. Or, they may be forced to listen and compare the content on the page to see how the pages are different, which will slow them down or stop them from being able to take the actions you want them to take on the website.
Just Say No to Keyword Stuffing
Some content creators think the way to “win” SEO and get higher rankings, especially for local searches, is to include many keywords in page and post titles. Law firms and photographers, I’m looking at you…
Users don’t need to hear the city and state or a list of practice areas, or any other redundant information in every page title. Repetitive keyword stuffing can be annoying and frustrating to users, and adding irrelevant keywords to the title stops them from understanding what a page is about or whether they want to stay on it.
If you’re training clients on how to add content, ensure they know not to abuse the title or meta title fields, and give them tips for other more meaningful ways to include desired keywords in the content.
Missing or Low-Quality Page Titles in WordPress
There are several reasons why HTML page titles might be missing or inaccurate on a WordPress website. Here are some common causes:
Poorly Coded Themes
This is less likely if you use a mainstream theme, but I have seen older or custom WordPress themes where the developer forgot to code in page titles, or the page title tag was present but wasn’t correctly querying and loading the page title set in the editor.
Page Title Left Blank in The WordPress Editor
In the Missing Title accessibility error documentation for Accessibility Checker, I shared a screenshot from a WordPress website with 410 pages, more than 50 of which didn’t have a title. Not only is this bad for accessibility, but it’s also a content management nightmare. How would you know which page to edit?
Content creators intentionally leaving the page title blank is probably the most common culprit for a missing title in WordPress. This frequently happens because the content creator doesn’t want the H1 to show on the page (usually because they don’t like how it is styled) and they don’t know how to hide it.
The fix for this is easy – add a title in the editor – but it may also require adding some CSS to go along with it or using a plugin to hide the title completely.
If you’re handing a website off to a client, stress to them how important it is to always title pages and posts in the WordPress editor. Then, make sure they have the tools and knowledge to hide or move and style H1s as needed.
Misconfigurations in Plugins
We did a scan on a website the other day and saw there were 30+ posts, all with the same HTML title. At first glance, this was confusing because all the posts (the website’s case studies) have unique titles in the editor. After some digging, it was discovered that someone had edited the default meta title in the Yoast SEO settings for that post type to have static text instead of the post title variable.
If you come across pages with missing or duplicate titles that don’t represent the content on the page, make sure to check settings for any SEO plugins or other plugins that may impact titles or HTML tags.
Proper Page Titles: Low Effort, Big Win
Having HTML page titles that accurately reflect the purpose of the page and its content is a low-effort change that can be made as you’re planning and building out websites. It may be low-effort, but it’s a change that has a big impact on accessibility and useability.
Many of you are probably already paying attention to page titles, but if you aren’t, now is the time to start!
Join the Conversation!
There's a dedicated thread on this post inside of The Admin Bar community. Join in on the conversation, ask questions, and learn more!
Group Thread
Amber Hinds
Amber Hinds is the CEO of Equalize Digital, Inc., a Certified B Corp specializing in WordPress accessibility, maker of the Accessibility Checker plugin, and lead organizer of the WordPress Accessibility Meetup and WP Accessibility Day conference.
Through her work at Equalize Digital, Amber is striving to create a world where all people have equal access to information and tools on the internet, regardless of ability. Since 2010, she has led teams building websites and web applications for nonprofits, K-12 and higher education institutions, government agencies, and businesses of all sizes. Through this journey, she learned about the importance of making websites accessible to everyone, and it has been her passion to bring awareness to accessibility and make website accessibility easier, ever since.
