Run this using a screen reader to see how various live region attributes behave. Initially, nothing is set on the container, and adding / removing content does not cause the screen reader to speak. This is akin to an all-to-common situation where various parts of a page are changed dynamically via ajax. If a complete document is sent to the browser (via the click of a link for instance), the browser will alert the screen reader, which generally begins reading the document in its entirety. However, if only part of a page is changed (i.e. in response to a external event such as user input or server push), the screen reader is not notified automatically, thus the user will not know of the change.
Try adding and removing content via the buttons below; nothing will be spoken by the screen reader.
Type the following into the input field or accept the default value:
aria-live="polite"
This should speak additions, but not removals, and only the new text is spoken as it appears.
This works well for many applications.
aria-live="polite" aria-relevant="all"
This speaks all changes: both additions and removals.
role="alert"
This is similar to aria-live="polite" however:
- additions are prefixed with the word "alert";
- the entire contents of the container are spoken on each addition, not just the new content (similar to aria-atomic="true");
Click the rewrite button to see what happens when the entire contents are rewritten. Click the hide / show button to see how various combinations of attributes behave when content visibility is changed.
Click the replace button to test behavior when node is completely removed and re-appended. All existing parameters and innerHTML are kept on replacement node. Note that the "set parameters" button does essentially the same thing.