Sometimes a page will have some interaction which means content is updated without a full page navigation being required - like a notification popping up or something being deleted from a shopping cart. In either case the screen‐reader user needs to understand what has happened.
Adding content to the page
To tell a screen-reader something has happened we can use something called a live region. This allows an notification to be read out to the screen‐reader user without them moving from their current position.
Activity - live regions
In the example below, use Voiceover to activate the button. This will cause a notification to appear above the button and be announced without you having to move to it to have the screen‐reader read it out.
Without the live region the user would not hear the announcement unless they specifically navigated to it - and with the new content being above the trigger this is unlikely.
Just like aria-describedby values, a live region announcement will not convey any semantic information about the markup it contains, such as there being a link in our example. For this reason you should keep live regions simple text.
Insight: One thing to be aware of is that live region announcements like this can sometimes be blocked by other announcements - including other live region announcements - so if something is very important for the user to hear you might need to think of other options. Users also cannot re‐read a live region announcement unless they move to it on the page.
Removing the focussed item from the page
When it comes to content changes, particular attention needs to be given to removal of content which the user is currently on. This could be a dialog which the user closes or where an item is deleted. Removing the item a user is currently focussed on will result in loss of focus and the focus is often dropped back to the top of the page which can be confusing and cause the user to have to make their way back to the desired location.
Insight: Whilst browsers do help keyboard users with disappearing focus, the support for screen‐readers is still patchy, so we still need to be mindful of manually managing focus.
How you manage focus will very much depend on the situation, but it is something which should always be asked when creating dynamic content.
Key takeaway
When dealing with page updates, always test with a screen‐reader to:
- check you are getting the same information a visual user would
- check how the changes affect the placement of the screen‐reader focus