DEV Community

loading...
Cover image for Accessible Titles In React

Accessible Titles In React

steady5063 profile image Mark Steadman ・3 min read

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>
    );
  }
Enter fullscreen mode Exit fullscreen mode

Resources

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

tags to set all the content. Within this, you can use this to set your title of your page as well!

Example Usage

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

Resources

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";
  }
}
Enter fullscreen mode Exit fullscreen mode

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!

Discussion (1)

Collapse
juanfrank77 profile image
Juan F Gonzalez

This is cool! Thanks for sharing.

Forem Open with the Forem app