WebAIM - Web Accessibility In Mind

E-mail List Archives

Meaningful Sequence in SPAs

for

From: Brian Lovely
Date: Apr 16, 2024 8:47AM

I'm curious about focus order in single-page application-style websites,
where the base URL doesn't change, but the content of the previous page is
"blown away" and replaced by the content of the new page. Let's call them
pages A and B.

If on page A there is a control that causes page A to be replaced with page
B, then the currently focused element is removed from the DOM, along with
the rest of page A, when that control is activated. Screen reader users
will hear nothing, and if they try navigating "forward" they will be at
roughly the same distance from the top of page B as they were from the top
of page A (that's been my experience, anyway.) Navigating forward, they may
just encounter the footer, but no matter what they encounter it will be
confusing to be at some random point in the page B content.

My question is when changing views in a single-page application-style
website, how should focus be handled? I specify "website" to differentiate
from a single page application that is simply a series of form views.