Let’s look at the frequently overlooked page title.
Page titles are most important for search engine optimization (SEO), right? Once a page is found, page titles are also used for navigation. Think of it, how many browser windows or tabs do you have open right now? If you are a screen reader user with no vision, how do you determine which browser tab you are on or which browser tab you are looking for? The effective, descriptive page title.
Descriptive page titles help users find content and orient themselves. In cases where the page is a document or a web application, the name of the document or web application would be sufficient to describe the purpose of the page.
We won’t go into the subject of Single Page Applications, or SPAs; we’re early on, and we’ll let the vendor handle that. Also, if you’d like to learn more about page titles and conforming to the Web Content Accessibility Guidelines (WCAG) standard, check out this Success Criterion’s Understanding document.
To check page titles, open and view each page in a browser. The page title should uniquely describe the purpose or topic of the page.
Dell Inspiron 15″ Touch Screen Laptop Intel Core i5 with 8GB Memory 512GB SSD Black i3530-5623BLK-PUS – Best Buy
In this example, the topic of the page is first, followed by the site name. This is a good, although lengthy, page title.
Issues with Page Titles
So what are the issues you are looking for?
- Missing or Empty Page Titles: Screen readers have nothing to announce to orient the user. Instead, they may read the URL or the filename, which is confusing and unhelpful. Browser tabs will display “Untitled Document” or the file path, making it impossible for users to distinguish between multiple open tabs.
- Non-Descriptive or Vague Page Titles: The title exists, but it doesn’t adequately describe the page’s content or purpose. A user navigating a site needs to understand the context of each new page they land on. Vague titles like “Welcome” or “Home” don’t confirm the user has landed on the correct page of the correct website. This is especially disorienting for users who cannot see the visual layout of the page for context.
- Identical Titles Across Multiple Pages: Many pages on the same website share the exact same title, often just the name of the organization. This makes it impossible for users to differentiate between pages in their browser history, bookmarks, or a list of open tabs. A screen reader user navigating from the “About Us” page to the “Contact Us” page will hear no change in the title, leading them to believe the page hasn’t loaded or they are still in the same place.
- Order of Title Information: The most important and unique information is buried at the end of a long page title. Screen readers read from the beginning. If the first part of the title is identical on every page (e.g., the company name), the user has to listen to repetitive information before hearing what is unique about the current page. Additionally, browser tabs have limited space and will truncate long titles, hiding the most relevant part.
- Mismatch Between Page Title and Main Content: The page title and the main visible heading on the page are significantly different. This creates a “cognitive disconnect.” A user hears the title, forms an expectation, and then encounters a main heading that says something else. This can be jarring and make the user question if they are on the right page. While the title and pahe heading don’t need to be identical, they should be closely related and consistent.
If you run into any of these issues, its time to write up a bug ticket.
Page Title Summary and Best Practices
To avoid these issues, follow these simple rules for crafting accessible page titles:
- Be Present: Every single page must have a title.
- Be Unique: Each page’s title should be unique within the site.
- Be Descriptive: Clearly and concisely describe the page’s main content or purpose.
- Effective Order: Put the most unique and specific information first. A good formula is [Unique Page Content] – [Website/Organization Name].
- Be Consistent: Ensure the title aligns with the main page heading on the page.