WebAIM - Web Accessibility In Mind

E-mail List Archives

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


From: Jonathan Avila
Date: Nov 23, 2021 12:16PM

It's a fairly common pattern to move the user to the first heading or first unique content when changing context on user interaction such as pressing a button that changes the main portion of the screen in a single page application like Gmail.

For things like carousels that change less of the page more people seem to favor keeping focus on the button and announcing the change.


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Nolan Darilek
Sent: Tuesday, November 23, 2021 9:06 AM
Subject: [WebAIM] What are the current best practices for accessible client-side routing?

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.

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

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!