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.
Main Document
Secondary Live Region Display Area
Another live region which adds messages wrapped in div when
the button below is pressed.
output Container Display Area
The HTML5 <output> element adopts live region behavior.
Press the button to add messages to the output container below.
ariaNotify Injection of ARIA Live Content
Calling the JavaScript function ariaNotify(message, options) on the document object or
an element will programmatically create a screen reader announcemeent. Currently, not all browsers support this
function and the only supported option is a “priority” of either “normal” (the default and
equivalent to aria-live="polite") or “high” (equivalent to
aria-live="assertive"). The language of the announcement (its pronunciation) is taken from the
lang attribute of the element on which it is called or that of its nearest ancestor. If no language
is set on an ancestor, the pronunciation defaults to the browser's default language.
Below you can set a message to be announced using ariaNotify(), and set its priorty and language (by
setting the lang attribute on the element or on an ancestor).
Div
lang: none
Paragraph
lang: none
This paragraph element can be the target for ariaNotify.
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:
Load the page with an ARIA alert already in it, so that the alert text
should be read on page load:
I am an already existing ARIA alert.
Dynamically add an element that contains an ARIA alert:
Add the alert role to an already existing element: