Re: Focus on a new page

I’m not sure that there’s a single correct answer to this, but I’ve seen a number of recommendations to programmatically place the focus on the h1 (and add tabindex=-1). Here are a few resources that I found useful:

https://www.gatsbyjs.com/blog/2019-07-11-user-testing-accessible-client-routing/


https://johnsweetaccessibility.com/2020/05/accessibility-in-spas-part-2/


https://daverupert.com/2019/01/accessible-page-navigations-in-single-page-apps/


https://dev.to/robdodson/managing-focus-64l




> On Apr 15, 2024, at 10:58 AM, Brian Lovely <brian.lovely.23@gmail.com> wrote:
> 
> I'm curious about this question as it applies to single-page applications-style web sites, 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. 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 web site, where should focus be placed? I specify "web site" to differentiate from a single page application that is simply a series of form views.
> 
> On Fri, Apr 12, 2024 at 7:21 AM Samuel George <Samuel.George92@hotmail.com> wrote:
> Thank you for your response. 
> 
> I am unable to find anywhere in WCAG 2.2 Criterion 2.4.3 Focus Order, where it states that forcing a users focus into the main content on a new page is a failure, this is the reason I raise the question.
> The description is the only aspect that would relate to it, however, I don’t feel that skipping the <header> when arriving on a new page for example, removes operability or meaning in the content, especially when it is in a step by step process and you have already encountered the <header> which has not changed in these subsequent steps.
> 
> 
> Kind
> 
>  
> 
> Sent from Mail for Windows
> 
>  
> 



--
Peter Weil
Web Developer
University Marketing Web Services
Office of Strategic Communications
University of Wisconsin–Madison
608-220-3089

Received on Wednesday, 17 April 2024 16:09:37 UTC