ARIA Live Region Playground

A fun (perhaps?) and safe place for exploring ARIA live regions, their attributes, and their behaviors.

Live Region Display Area

Container below can be set to be an ARIA-live region. See Options in the aside to control properties and to start, stop, and reset messages that get added to the the container.

Force focus to live region container above

Secondary Live Region Display Area

Another live region which adds messages wrapped in div when the button below is pressed.

Alert Role Implementations Live Region

ARIA live regions with role=alert should behave differently from other sorts of live regions. Alerts are supposed to be used for immediate reporting of time sensitive messages and, because of this, should be announced even if the container itself or the ARIA role attribute is added dynamically or the container exists already when the page loads. See MDN's page on Using the alert role for further discussion.

The controls for the main ARIA Live Region Display Area allow you to add content to an already existing element. But the controls immediately below allow you to add ARIA alerts to this page using three different means, documented as viable by MDN:

  1. Load the page with an ARIA alert already in it, so that the alert text should be read on page load:

  2. Dynamically add an element that contains an ARIA alert:
  3. Add the alert role to an already existing element:

ARIA alerts get added below:

You pushed a button to add an ARIA alert to me.