Best practice

ARIA live regions

  • Identify a live region with an aria-live attribute on a container element.
    • The live region must be empty on page load or when it’s first added to the DOM.
    • Use aria-live="polite" for most announcement.
    • Use aria-live="assertive" when the user needs immediate feedback.
  • Use the aria-atomic attribute to specify if the whole live region should be announced, or only the text that changed.
    • Use aria-atomic="false" to announced only the updated text.
    • Use aria-atomic="true" to announce static and updated text.
  • Only use the aria-relevant attribute if the removal of content from a live region needs to be announced.
  • Use the aria-busy="true" attribute to notify assistive technology that it should temporarily ignore changes to an element when things are loading. Once everything is in place, clear the attribute or set it to aria-busy="false".
  • Use a special type of live region role when appropriate:
    • Use role="alert" to announce important and typically time-sensitive information that requires the user’s immediate attention.
    • Use role="status" to announce advisory information to the user that is less urgent than an alert.
    • Use role="timer" to identify a numerical counter listing the time elapsed from a starting point or the time remaining until an end point.
    • Use role="marquee" to define an area as a type of live region with non-essential announcements that change frequently.
    • Use role="log" to keep track of sequential updates, such as a chat log, messaging history, game log or an error log.

Time limits

  • Any design with a time limit must offer the user the ability to either:
    • Turn off the time limit before encountering it.
    • Adjust the time limit before encountering it to a length at least ten times the default setting.
    • Extend the time limit. The user must be warned at least 20 seconds before time expires.
  • With session timeouts, present warning messages in a popup dialog with options for the user to either extend or end the session.
  • For timers with fixed deadlines, provide a countdown feature with ARIA live announcements at strategic intervals.
  • When refreshing/reloading a page, ask the user’s permission. Notify users that newer content is available and provide the options to update or continue
Back to top