WebAIM - Web Accessibility In Mind

Page Titles

Overview

Providing a descriptive, succinct page title is important for accessibility. The page title text usually appears at the very top of the browser window or in the web page's browser tab.

The page title:

  • Is often the first thing seen by sighted users.
  • Is used to determine the content of the page, and to differentiate the page from other pages.
  • Is the first thing read by screen readers when visiting a web page.
  • Is used by search engines to determine the content of the page and to generate search results content or links.

Defining the Page Title

The page title is defined by adding the <title> element to the <head> of a web page.

<title>Amazon.com. Spend less. Smile more.</title>

The <title> contents will be presented within the browser tab:

Screenshot of the browser tab presenting the page title: Amazon.com. Spend less. Smile more.

Page Title Best Practices

WCAG 2 requires that page titles describe the page content or purpose. Because the page title is read on each page, it should be short—generally no more than a few words.

Because the page's first level heading (<h1>) should also describe the page content, the page title and the first level heading text are often the same or similar.

The page title may contain other information like the site name or area within a website. There is no rule about whether this information should come before the descriptive information (e.g., "Acme, Inc.: Order Form") or after (e.g., "Order Form: Acme, Inc."), but the length of the site name may have some impact. Because the page title is used to readily differentiate web pages - especially if there are multiple tabs open from the same web site - and because the number of characters visible in the browser tab is limited, it is best to ensure the distinctive information is presented early in the page title.

As an example, this page's title presents the site name of "WebAIM" before the distinctive page information - "Page Titles". The distinctive page description is still readily visible.

Screenshot of the browser tab for this web page.

If the site name was more lengthy, such as "Web Accessibility in Mind", then it would be better to put the distinctive information first.

Screenshot of a browser tab showing 'Page Titles' followed by 'Web Accessibility in Mind' with 'in Mind' truncated and not visible.