Simple Live Region Demo

Here is a simple demo of live region markup. Selecting the button below this paragraph will add a number to a counter and display the most recent value of the counter in a list. Since the list is inside a div which contains the aria-live attribute containing the value "polite", the screen reader will announce any additions or changes to any of the text inside this div as they occur. If the div includes the attribute aria-atomic with the value "true", then the entire text of the live region will be spoken whenever a change or addition is made. Generally speaking, this is not desired behavior, so leaving out the aria-atomic attribute will give the most commonly used behavior. Learn more about controlling live-region behavior, or read about live region authoring practices.