Accessible Titles In React

Page titles that are clear and concise help users with disabilities understand the web page's content and overall purpose. Titles identify the current location without requiring users to read or interpret page content. Without titles, users with disabilities can either lose track of the page they are currently on, or not understand the purpose of the page.

What Makes An Accessible Title

An accessible title gives enough information that clearly and quickly defines the page's purpose and content. Adding a single word to describe the page as a title does not meet the needs of a person with disabilities.

An example of a title that is commonly seen is 'Shop'. 'Shop' simply doesn't give enough overall detail to the purpose of the page. Let's look at a couple ways we could make the title more accessible:

• Bad: Shop
• Better: Mark's Store - Shop
• Best/Accessible: Mark's Store - Shop - Socks

The most accessible title gives details like the site name, the pages purpose, which is to shop, and then the specific item they are shopping for.

Why It's A Problem In React

In React, page titles are a forgotten piece of application development. There are a few factors that play into this. The first being the misconception that changing page titles can be very difficult. The second, believe it or not, is due to the nature of React being a single page application, there are some developers that believe you cannot even change the page title at all!

Both of these are simply not true. React has a multitude of different ways to implement effective and accessible page titles between routes in your application!

Document Title Package

The react-document-title package allows you to easily add a page title to your React page components using a custom HTML tag called 'DocumentTitle' that wraps your page component. Once added, simply use the title attribute on the tag and you can set your pages title.

Example Usage

 render() {
    return (
      <DocumentTitle title="Mark's Store - Shop - Socks" >
        <div>
          <h1> Shop Socks </h1>
        </div>
      </DocumentTitle>
    );
  }

Resources

• https://github.com/gaearon/react-document-title

React Helmet

The react-helmet package will manage all of your changes to the document head. The good news with this package, is it allows you to use basic HTML

Example Usage

  render () {
    return (
        <div className="main">
            <Helmet>
                <meta charSet="utf-8" />
                <title>Mark's Store - Shop - Socks</title>
            </Helmet>
            ...
        </div>
    );
  }

Resources

• https://github.com/nfl/react-helmet

Component Lifecycle

Using Reacts component lifecycle, you can set the document title after the component has rendered using document.title.. This is a great technique for teams that do not want to use a third party library in order to create accessible titles.

Example Usage

class PageTitle extends Component {
  render() {
    return (
        <div>
           <h1> Shop Socks </h1>
        </div>
    );
  }

  componentDidMount() {
    document.title = "Mark's Store - Shop - Socks";
  }
}

In Summary

Writing accessible titles in React isn't as hard as it has been made out to be. Using any of the above techniques to add titles to your page components, while also ensuring your titles are clear, concise, and describe the pages overall purpose, will make your application more accessible for all!