Write descriptive page titles

Examples of specific and descriptive page titles (accessible) vs. vague ones (inaccessible)
Image description: Accessible and inaccessible comparison of page titles. The accessible example says, "Beds - Shopping. Couches - Shopping. Desks - Shopping." The inaccessible example says, "Furniture 1. New Page. Untitled Doc."

This page is in progress -

If you would like to contribute or make a case to prioritize this page, please fill out the form below.

Why This is Important

Descriptive page titles are accessible to screen reader users and people with cognitive disabilities because it describes where they are and what they should expect from the page.

Blind and visually impaired people use screen readers to interact with websites and apps. A screen reader is a type of assistive tech that converts text, buttons, and other screen elements to audio and/or braille. If you are new to screen readers, I recommend watching a video to learn how it works.

A unique and descriptive page title is accessible to screen reader users because it lets them know where they are. Especially considering that many people today have multiple tabs open, this helps orient them in a set of pages.

This is also accessible to people with cognitive and intellectual disabilities, who benefit from support and clarity.

This references WCAG criterion 2.4.2 Page Titled (Level A).

How to Implement This

Writing guidelines

The page title should:

  • Accurately describe the page's content and purpose
  • Be unique (no duplicates)
  • Be simple and concise
  • Use language that's familiar to the user (no jargon)
  • Include the unique name first and overall site name last

For example here is a good example:

<title>Banana Bread Recipe - World’s Best Cookbook</title>

Here is a poor example. It includes the overall site name first (which becomes tiresome if the screen reader reads through that for every page). The name that follows is not unique and doesn’t describe what kind of recipe it is.

<title>World’s Best Cookbook - Recipe</title>

Here are some helpful guides to writing page titles:

Information architecture

Information architecture (IA, which is the process of organizing and labeling content in a way that's intuitive to users, can also help ensure that page titles are unique and descriptive because it encompasses a complete content inventory.

This article lists some very effective IA exercises: How to Create Information Architecture for Web Design.

How to Test This

Use automated checkers such as Deque Axe and the IBM Accessibility Assessment check for the presence of a page title. Conduct a manual audit to further check the page title is appropriately unique and descriptive.

Credits

No credits yet. But this could be you!

Corrections to page title illustration by Cam Beaudoin, The A11y Coder

Contribute and Give Feedback

If you would like to provide feedback or contribute content on this resource, please fill out the form below.

Thank you, your submission has been received!
Oops! Something went wrong while submitting the form. Please check your internet connection and try again.

If you continue to encounter issues, please reach out to alexyingchen(at)gmail.com.