Make status messages detectable semantically

Applicable Role(s): Developer

Overview

If a user can’t visually perceive a page, they may not realize that statuses, updates, or confirmations were loaded on a page. This is disorienting, and can make users wonder if the button or control they pressed worked.

People using magnification to enlarge webpage text may also miss status status message altogether due to the message being out of frame. If the message can be coded semantically, then the message can still be understood and conveyed by assistive technology.

Best Practices

Use live regions with caution!

If not coded carefully, the messaging can be too verbose for users and create a confusing user experience. Use the following pattern examples and related resources carefully before creating a live region.

Use the proper live region role for the context

  • The alert role (role="alert") or aria-live="assertive" should only be used if the messaging is time-sensitive and important (a potential loss of data/progress, progress errors, emergency alerts).
  • Use the status role (role="status") or aria-live="polite" for progress or other updates
  • Other live updates that don't fall into these categories can use a combination of aria-live="assertive/polite/off" and aria-atomic="true".

If there is a status or dynamic update related to existing content, then typically focus shouldn't move to the message.

Ensure the live region markup exists on the page before adding the updated content.

Pattern Examples

Example: Items in cart

On page load:

When the page loads, the aria-live and aria-atomic attributes are already part of the page, rather than added when the status updates.


<div aria-live="polite" aria-atomic="true">
0 items in cart // or other placeholder
</div>

After items added


<div aria-live="polite" aria-atomic="true">
1 item added to cart // announces as such to user
</div>

Need Accessibility Help?

Contact Carly Gerard

Contact David Engebretson