Handling Page Titles in React

Why is the page title important?

The short answer to this is that the page title is immediately available to a user without entering or navigating your page content. To get a feel for the accessibility implication of this, try turning on your screen reader now. You should find that the title of this page is immediately announced to you, along with any other relevant browser information. If you have other tabs open, try tabbing or clicking through them and see how useful the titles are in understanding whether that tab contains the content you are looking for.

It’s clear that a concise, descriptive page title can be vital in surfacing your content to screen reader users.

How to title your pages

W3C has some excellent tips on page titles, which are summarised below.

The title of each web page should:

• Identify the subject of the web page
• Make sense when read out of context, for example by a screen reader, in a site map or list of search results
• Be short

It may also be helpful for the title to:

• Identify the site or other resource to which the web page belongs
• Be unique within the site or other resource to which the web page belongs

It’s also usually preferred that the most important/specific information comes first, e.g.

Handling Page Titles: Up Your A11y

Rather than:

Up Your A11y: Handling Page Titles

Setting the title in React

Given that React produces single page applications, the page title never changes unless it is specifically managed. This leaves your users with few clues to the page that they’re currently viewing without entering and reading your content. The great news though is that managing the page title can be done with minimal effort via the React Document Title component.

For each page in your app, wrap the rendered components in the DocumentTitle component, and pass in the page title, e.g.

You can even tie the page title to a property in your component’s state if need be, e.g. if you need to load the page title from an API or elsewhere when the component mounts.

This solution will help a whole range of users browse your apps, as well as giving your pages a professional look and feel.