WebAIM - Web Accessibility In Mind

E-mail List Archives

What are the current best practices for accessible client-side routing?

for

From: Nolan Darilek
Date: Nov 23, 2021 7:06AM

Hey folks,

I'm a screen-reader-using software developer under contract to add
accessibility-related functionality to a hybrid server/client-side web
framework. I'm currently trying to make their routing more accessible,
and naturally want to do so to as many groups even though my own
disability makes doing some of that work myself impossible. It's one of
those frameworks that patches the DOM directly on route change, so it
doesn't benefit from the more traditional "one route, one page"
strategy. Broadly speaking, there seem to be two related issues:

1. Announcing the page change to screen readers (easy enough.)

2. Managing focus on page transitions effectively, possibly implementing
1) in the process (more challenging, especially for non-screen-reader
users.)

As a screen reader user, I typically just suck it up and deal with
whatever a given app does, and this is one area I've never done a deep
dive into fixing.

I'm also trying to do both so they're configurable on the framework
level (I.e. maybe you turn off 2 and just announce page titles, or
implement your own algorithm for finding a focus target for 2, or use 1
on some routes and a custom algorithm for 2 in certain situations... So
whatever solution I come up with won't necessarily be definitive, but it
may very well be the default for many users, and I'd like it to be a
good one.

Are there any comprehensive, modern resources on this? I found
https://www.gatsbyjs.com/blog/2019-07-11-user-testing-accessible-client-routing/
which was a bit confusing--it seemed to lay out a couple different
focus-management strategies, imply that these caused challenges for some
groups but that doing something was better than nothing in that regard,
then later doubled back and advocated for an announcement-only strategy.
I could very well be misreading this--I've been deep in the trenches
relearning this particular framework so my brain is a bit overloaded.

Naturally I'll be advocating for more accessibility testing too, since
the goal is to open source and upstream both the work itself and blog
posts about the process. But I want them on the best foundation possible
before we do that testing, so if anyone has a favorite accessible
client-side routing strategy then please do share. :) Thanks!