Update and Loading Notifications inform users of the current working state of their request and help reduce uncertainty. These notifications update pre-existing, inline page content.
Often a Loading Notification will precede an Update Notification, affecting the same content element on a page and intentionally paired together to communicate to users the ongoing status of their request. When not pairing Loading and Update Notifications, remember to create sufficient visual feedback as many Update Notifications will be unassociated to their triggering actions.
Update Notifications inform users of advisory information that enhances the site experience such as quantity updates or busy states. These notifications update a specific part of an inline content section, such as the number of items in a cart.
Priority
Low
Expectancy
Expected / Assumed
Purpose
Updating inline messaging
Providing UI responses to user initiated actions
Interaction
Non-blocking, Not Required
Information
Passive state changes
Examples
After a user adds an item to their cart, a section of content near the Shopping Cart icon increases in number. Additionally, assistive technology should announce 'x items in your cart'.
After a user selects the 'Bontrager' filter on the Mountain Bike Helmets search results page, the 'Mountain Bike Helmets
(number of results)' updates to 'Bontrager Mountain Bike Helmets (5 results)'. Ensuring this is marked up as a notification enable users of assistive technology stay informed of this update.
As a user updates the quantity of an product in the shopping cart, multiple items are updated to reflect this change: item price, order summary subtotal, order total, and total and savings of the shopping cart.
Providing errors, warnings, or success messaging related to user entered formatting, incomplete inputs, or invalid selections (see Validation Notifications)
The content added to the page is critical and needs immediate attention (see Alerts)
Page usage should be blocked until the user takes an action within the message or exits (see User Confirmation Alerts)
User interaction is required or content is critical to the user flow (see Modal)
The message contains a rich UI experience (see Modal)
During the appearance or disappearance of content following a user's interaction which is also announced to assistive technology such as the following:
The Update Notification content container wraps both the element being updated and any assistive technology helpers such as screen reader text. It may be a pre-existing section of a page or dynamically added upon user action.
Design
Should ensure the Update Notification does not receive focus as a result of a change in status
Should ensure sufficient visual feedback is provided to inform users that an update that may not be associated with the element they have interacted with has been updated
Should not overuse Update Notifications as they may interrupt the user experience
May be stacked with a Loading Notification
Development
Must ensure the container generating the update is able to receive focus
Must define pre-existing page sections where content may be updated as a WAI-ARIA live region
Must use the aria-live attribute on the container of the content that may be updated or, in special cases, use one of the WAI-ARIA special live region roles:
<!-- EXAMPLE: while stable --><divaria-live="polite"role="region"aria-labelledby="shopping-cart">
4
<spanclass="sr-only">items in your cart</span></div>
1 2 3 4 5
<!-- EXAMPLE: when updated --><divrole="status"aria-live="polite"role="region"aria-labelledby="shopping-cart"><spanclass="sr-only">there are now</span>
5
<spanclass="sr-only">items in your cart</span></div>
1 2 3 4 5 6 7
May use role=”status” in place of or in addition to aria-live
May include aria-atomic(opens new window) markup attribute to define what content will be presented to assistive technologies
May include aria-relevant to define what type of changes are being announced to assistive technologies
Loading Notifications signal to users that loading is occurring, but do not give any specific indication of progress. Use Loading Notifcations to communicate the busy state of the page or content element, reassuring users that that page is not frozen and their request is in progress.
Transitions should also notify assistive technology to temporarily ignore changes to an element. This can be added in the form of additional element attributes that communicate to assistive technology, though consider if the action without context will create any cognitive dissonance for our visual users.
Priority
Low
Expectancy
Expected / Assumed
Purpose
Communicating the refresh of page data
Disabling a section of a page as new data is presented
Reporting the busy status of a page or section
Interaction
Blocking, disabling
Information
User requested state changes
Examples
As the 'Find a store near you' modal is loading results, it displays a loading icon. Additionally, assistive technology should inform non-vision users of the busy state. For more information, review the loading notification section above.
After a user presses the Add to Cart button, the button grays out or changes to a loading icon. Additionally, assistive technology should inform users of the busy state. For more information review the loading notification section above.
Should define pre-existing page sections where content may be updated as a WAI-ARIA live region
Should use the aria-busy attribute to indicate an element is being modified and that assistive technologies may want to wait until the modifications are complete before exposing them to the user