Improving client-side routing in single-page apps (SPAs) through good UX. This version of the SPA routing experience does the following:
- Announces route changes to screen readers with a live region
- Focus is set automatically on the live region to ensure screen readers announce it consistently
- Pressing
Tabalways sets focus on the skip to main content link - Previously this version made allownances to show / hide the skip link based on mouse or keyboard behavior, but that was factored out for a more unified UX
It's important to include a skip link for keyboard navigation. It's important to let screen readers know a route was changed client-side. These are fairly simple tasks in isolation, but become more nuanced when you try to do both well, together. This is our attempt at doing just that.
All examples are hosted on separte GitHub repos as GitHub pages.
This repo requires you to type a few commands into a terminal window. Commands are shown in code blocks that begin with a dollar sign like this $ command to type. You can retype these commands or copy and paste them into your terminal window. Do not include the dollar sign $ when you type or copy commands into your terminal.
- Confirm you have NodeJS installed. Open a terminal and type
$ node --version - You should see output like v16.14.2. If not, download NodeJS and install it on your local machine.
- Clone this repo. If you’ve never cloned a repo, GitHub has great instructions.
- Then type the following commands, one at a time:
$ cd /location/to/SPA-routing-experience/to change directories$ npm installto install libraries and dependencies$ npm run startto start a development server- The application will compile and be available at
localhost:3000in the browser of your choice
- What we learned from user testing of accessible client-side routing techniques with Fable Tech Labs
- React Router useLocation hook – Tutorial and Examples
- Deploying a CRA React App to GitHub Pages
- How to Deploy a Routed React App to GitHub Pages
- MacOS Monterey + Safari + VoiceOver
- MacOS Monterey + Firefox + VoiceOver
MacOS Monterey + Safari + VoicOver - Live region announcement is suppressed sometimes. This may be a timing issue, more reseach is needed.