Important dynamic changes in content, that are not given focus, are announced by screen readers

Design Notes

Design decisions are not relevant.

Developer Notes

Use aria-live to announce important visual updates

Users of assistive technology should be aware of important changes in content that are not given focus in a way that doesn’t interrupt them.

Inform users change of context by using the aria-live attribute on a sentence that notifies users on the change.

In most cases, aria-live should be set to "polite", which ensures any existing announcements will be allowed to finish before the context change.

Assigning aria-live="assertive" means information is announced immediately. You may want to use "assertive" in instances where an immediate response is required — such as to alert users of destructive actions (delete all Yes/No) or where there is a time limit coming to an end.

Information and tools

Testing Notes

Users are aware of important dynamic changes in content that are not given focus

Users of assistive technology should be aware of important changes in content that are not given focus — for example adding an item to a shopping basket. Generally this should be done in a way that doesn't interrupt users.

Developers should ensure users are informed of a change of context using aria-live regions. To ensure these updates occur only after existing announcements, the live region should be set to aria-live="polite".

Steps to check

  • Test interface using a screen reader — for example, NVDA on PC and VoiceOver on Mac
  • ARC Toolkit provides a way to identify all the live regions that have been implemented on a page

Impact range: Medium - High

Test type: Manual

Tool: ARC Toolkit (ARIA live)

Information: Developers Mozilla: ARIA Live Regions

WCAG Reference: Understanding Success Criterion 4.1.3 Status Messages