If you’re a front-end developer in today’s world, you’ve probably used the various JavaScript tooling available (React, Vue, Webpack, etc) to build a single page application (SPA). SPAs are easy, fast, and most importantly, provide a concise way to manage your front-end assets. What’s more, you can handle your page changing using client-side tools like react-router-dom ! What more could you ask for?

Alongside the myriad benefits that come along with SPAs comes one of the most crucial parts of your site taking the biggest hit: accessibility.

Features that came out-of-the-box with more traditional tech stacks and server based routing now require special handling, since all or most of the routing happens client side. Two big issues that are easy to overlook when working with client-side routing of SPAs include:

Managing the focus of each page’s main header (h1 tag); and Providing the correct page title and description between pages (and in general, meta information)

Let’s take a look at some easy ways to handle these issues with React.