Screen Reader Not Reading The Page When Navigated With Keyboard On React.js

When the user navigates to a new page by clicking the Link component the screen reader reads the new page perfectly and in correct order. If the user selects the new page by pressi

Solution 1:

Not able to tell you how to do this in React but it is a straightforward process so I am sure you won't struggle. The key part to fix your issue is the "after navigation" heading, however try to implement everything if you can as it will vastly improve screen reader user experience.

SPA pattern best practices for navigation

The method recommended for handling navigation in SPAs is actually quite straight forward with two steps.

1. tell a user that navigation is about to occur (before navigation)
2. let a user know that loading is complete (after navigation).

before navigation (link click)

You need to signal to a user that a page is loading if you are using a SPA pattern (and therefore interrupting normal navigation). e.g. I click your link, you need to let me know that an action is being performed (loading.....) as you intercept the normal browser behaviour with e.preventDefault() or equivalent.

The simplest way is to use aria-live=assertive on a region that explains the page is loading. You can Google how to implement that correctly but essentially you would update the content of a hidden div (<div aria-live="assertive" class="visually-hidden">loading</div>) with some loading message the second a link is clicked.

This should be done before any AJAX calls are made.

after navigation (new content loaded)

When the new page loads you need to manage focus.

The best way to do this is to add a level 1 heading (<h1>) to each page that has tabindex="-1". By using tabindex="-1" it means that the heading won't be focusable by anything other than your JavaScript so won't interfere with the normal document flow.

Once the page loads and the content has been populated fully the last action you perform in your JavaScript navigation function is to place the focus onto this heading.

This has two benefits:

1. it lets the user know where they are now
2. it also lets them know when the page load is complete (as AJAX navigation doesn't announce when the page is loaded in most screen readers).

At this point you may also want to clear the <div aria-live="assertive"> contents so that it is ready for further navigation.