Lost in Transition
Therein lies the problem; to a user who is using assistive technologies such as NVDA or JAWS, the focus becomes lost or stagnant on the page and the user is not made aware that a new page has appeared. This can leave a user feeling confused or lost on your page as they may think the link did not work OR they may leave your site entirely because it is extremely difficult to navigate. Assistive technology users are not the only ones in trouble here, as keyboard-only users can also become very frustrated because focus is not managed, forcing them to traverse back to the new content that has appeared on screen.
Now that you understand the issue, how do we fix the problem? There are a couple of different solutions that can work well to fix this issue, but we need to look at it from a designer’s and a developer’s perspective.
The solution to the above problem actually has a couple of different avenues depending on how your application is set up. The solutions listed below would be the recommended fixes in order of the best solution to the bare minimum to make the transition of pages work.
Move focus to the first heading on the new page content
Move focus to the body of the page
Move focus to a skip to main content link with a live announcement that page has changed
Last but not least, if the top two solutions are not available and you have a skip to main content link on your site, then move focus to the skip to main content link.
With this, also have a live announcement be made to the user that the page has changed, or the new name of the page so they know the page has changed. This allows a user to know that the page has changed and they can then jump directly to the new page content using the skip to main content link.
Make sure each page has a proper heading, preferably <h1> or <h2>
By ensuring that each page has a proper heading on it, developers can then properly put focus to the heading for page transitions. In addition, the heading should be descriptive enough to understand the page’s purpose as well.
Include what should happen between page to page transitions
Make sure visible focus is available on the body of the page if needed
If there is no relevant heading on the page, or it is not an option to put focus on the heading and you have to put focus on the body of the DOM, then a focus indicator must be present so users can know where the current focus is.