WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Meaningful Sequence in SPAs

for

From: Weston Thayer
Date: Apr 16, 2024 1:07PM

Multi-page websites (I've seen those called multi page apps, MPAs) have
gotten much more consistent since https://web.dev/articles/bfcache gained
wide support. Bfcache creates consistent focus restoration because when
navigating forward, the departing page's state (including currently focused
element) is "frozen". When navigating back, the state is "unfrozen",
restoring focus and scroll position.

MPAs can break support for bfcache, see the article for what breaks it.

SPAs don't have access to bfcache, although they can technically match the
behavior. https://github.com/WICG/navigation-api has some platform APIs to
make this much easier, this issue discusses it
https://github.com/WICG/navigation-api/issues/190.

Also related, note that same-document/fragment navigation (like #anchor
links) does not use bfcache and has inconsistencies:
https://github.com/whatwg/html/issues/7397

On Tue, Apr 16, 2024 at 11:49 AM Brian Lovely < <EMAIL REMOVED> >
wrote:

> That's more or less what I thought. ...or "was afraid of" is more accurate.
> If there was consistent back button behavior across browsers, then a single
> page application could be coded to match that behavior.
>
> On Tue, Apr 16, 2024 at 12:58 PM <EMAIL REMOVED> <
> <EMAIL REMOVED> > wrote:
>
> > In an old-school website with multiple .html pages, when a user clicks
> the
> > browser's back button, the behavior primarily involves navigating back to
> > the previous page, similar to following a link to that page. However, the
> > restoration of focus—the specific element that was last focused before
> > navigating away—is not consistently handled across different browsers and
> > can depend on several factors.
> >
> > 617-799-1162
> >
> > > On Apr 16, 2024, at 12:15 PM, Brian Lovely < <EMAIL REMOVED> >
> > wrote:
> > >
> > > In an old-school website with multiple .html pages, does the browser
> back
> > > button restore focus, or does it simply navigate to the previous page
> > same
> > > as any link would?
> > > > > > > > > >
> > > > >