Status changes to content

When content is altered and updated dynamically using JavaScript, sighted users can understand the changes to content as they can be perceived visually.

For users who are blind, or have poor vision, are using a screen reader, or screen magnifier, this change to content needs to be provided in other ways.

For example, when a page is loading, usually a visual spinning circle can be seen by default, this update would not be provided to screen readers.

How to prevent issues

ARIA live regions are one way changes to content can be provided to screen readers. Ensure the correct live region is provided depending on the type of change.

You can find more information about ARIA live regions on the Mozilla Developer Network.

Incorrect implementation of ARIA can sometimes make a user experience worse. If you need advice on how to implement ARIA live regions, contact DesignOps.

Examples of issues in DfE

Below are some examples of common issues where services use dynamic content updates and how to avoid them.

Changes to content not provided to screen readers

Do

Use ARIA attributes to tell screen readers about content changes.

Example of a circle of lines which spin around and code for aria region.

Don't

Don't rely on icons alone to alert users to changes on a page.

Example of a circle of lines which spin around and no code to support aria live region.
Information about this page
Created
13 August 2024
Last reviewed
13 August 2024
Last updated
13 August 2024
Reason this page exists
This page exists to help people understand how to prevent introducing common accessibility issues in products and services.
Suggest a change or comment
Issue 43