Skip to content

Improving client-side routing in single-page apps (SPAs) through good UX

License

Notifications You must be signed in to change notification settings

elastic/SPA-routing-experience

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

SPA-routing-experience (blue header)

Improving client-side routing in single-page apps (SPAs) through good UX. This version of the SPA routing experience does the following:

  1. Announces route changes to screen readers with a live region
  2. Focus is set automatically on the live region to ensure screen readers announce it consistently
  3. Pressing Tab always sets focus on the skip to main content link
  4. 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

A better accessible router and skip link

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.

Get started testing the user experience

All examples are hosted on separte GitHub repos as GitHub pages.

  1. Live region with focus set on skip link
  2. Live region with focus set on body tag
  3. Focus set on H1 only

Get started coding on your machine

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.

  1. Confirm you have NodeJS installed. Open a terminal and type $ node --version
  2. You should see output like v16.14.2. If not, download NodeJS and install it on your local machine.
  3. Clone this repo. If you’ve never cloned a repo, GitHub has great instructions.
  4. Then type the following commands, one at a time:
  5. $ cd /location/to/SPA-routing-experience/ to change directories
  6. $ npm install to install libraries and dependencies
  7. $ npm run start to start a development server
  8. The application will compile and be available at localhost:3000 in the browser of your choice

Resources

Tested combinations

  • MacOS Monterey + Safari + VoiceOver
  • MacOS Monterey + Firefox + VoiceOver

Known issues for this solution

  • MacOS Monterey + Safari + VoicOver - Live region announcement is suppressed sometimes. This may be a timing issue, more reseach is needed.

About

Improving client-side routing in single-page apps (SPAs) through good UX

Resources

License

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published