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
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>
);
}
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";
}
}
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!
Top comments (2)
This is cool! Thanks for sharing.
when the page/route changes in an SPA, would the screenreader announce the page title by default ?