How Page Titles Increase Accessibility
When we speak about the "page title" we're not necessarily talking about the text in the primary h1 element. Rather, the text which appears in the browser tab, the same text which is placed in the title element in the head section of the document.
Although this content often reflects that of the primary h1, it's important to know why this content is crucial to creating an accessible user experience and when it needs to be updated.
The page title is the first bit of information that is announced by a screen reader.
The reason why having clear and unique title content for each page of the website is important is due to the fact that this is the first bit of information that is announced by a screen reader.
In order to provide context for where the user currently is in a task, or if they clicked on a link from a social media site directly to a page, it's important to provide this information right away. The title text helps to give immediate feedback of where the user currently is.
How to write title text
What ends up in the title element actually depends on the current page or state of the site. Ideally, the flow of information in the title would be, from left to right: state | page | site.
For example, a homepage title would simply reflect the site name:
<title>Website</title>
The title for a Contact page might be:
<title>Contact | Website</title>
A blog post would include the title of the post within the title element:
<title>How to make pasta sauce | Website</title>
Notice the page hierarchy does not get included in the title. This is to avoid having screen readers announce too much information at once.
Updating the state
Using the title element to convey the current state of a website is an extra bonus for someone using a screen reader. With this, they'll receive the message right away and can avoid wading through page content to find the current state of things.
For example, if someone submits a form with invalid data which results in a full-page refresh, having the title reflect this state would be helpful in quickly informing the user of the error state of the form.
<title>Error | Contact | Website</title>
If someone is filling out a multi-step form, perhaps making an online purchase, the title might reflect the current step of the process which they're about to complete.
<title>Payment information (Step 3 of 4) | Shop | Website</title>
With clear and unique title element content, both sighted users and screen reader users will benefit in knowing exactly where they are within your site.
Single Page Apps
So, here's the problem. When browsing a Single Page App (SPA) using a screen reader, loading a new page or view tends to repeat the initial page announcement. Why? Typically with a SPA, the page title element remains static. This is due to app authors setting its value once in the global template and never really thinking about it again.
As we've learned, setting a unique page title value is critical in generating a positive user experience. So, how do we overcome this issue of setting a unique page title in a SPA? One of the most straightforward methods is to utilize the JavaScript document.title global property.
React example
One example of using this global property is within a React componentDidMount() lifecycle method:
componentDidMount() {
document.title = 'My page title';
}
The code within this function executes when the component is loaded onto the screen. The single line within this function is using document.title to set a string value of, "My page title." So when this components loads, the page title will be set to this value.
It's worth noting document.title is not specific or unique to React; this method can be used in any JavaScript based SPA or web site.
WCAG success criteria
This comes back to 2.4.2: Page Titled which states:
"Web pages have titles that describe topic or purpose."