ARIA Live Regions for single page applications

user_1635845 0
Viewed 975

I am new to accessibility of web pages. I have an application where the content of the body changes based on the header link clicks in an ajax call without page refresh. So the HTML content inside the body gets updated for each link click with different page content (table + button + information text).

My requirement here is the screen reader should announce the information text each time when the page gets loaded. Here the container is body (or an immediate div inside body) for all pages. So I have made it aria-live="polite", but every time page loads it is announcing the whole page content but I want to make it announce only the information text. Other elements of the page should be announced on focus/visit. I hope I can apply aria-live="off" for all other elements but I'm looking for any ideal solution for this. I cannot change the layout of the application.

Can some one help me on this. Thanks in advance.

wai-aria accessibility html
2 Answers

SPA pattern best practices

You are essentially following a Single Page Application pattern. As such the method recommended for handling navigation 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.

user_27028940

Have you tried to wrap the "live zones" - where updates happen in div with aria-live="polite". Then screen reader will announces only these zones on updates.Don't wrap whole page or div in aria-live="polite".

<div aria-live="polite">
    <p id="errorText">Announced on update</p>
</div>
<div>
  other page sections..
</div>
user_95453970
Related