eBay

Techniques: Live Regions

If an area of a page is dynamically updated without a full page reload, we might, but not always, need to inform the user that there was a change.

<div aria-live=”polite”>
    <p>Newcastle 0 - Barcelona 0</p>
</div>

Whenever the inner text changes, or the CSS display of the content changes from none to block[1] , the screen reader will announce the contents.

<div aria-live=”polite”>
    <p>Goal!</p>
</div>

Screen reader announces “Goal!”

<div aria-live=”polite”>
    <p>Newcastle 1 - Barcelona 0</p>
</div>

Screen reader announces “Newcastle 1 - Barcelona 0"

[1] It is very important to note that any CSS display operation must happen on a descendant node of the live region, and not on the live region node itself.

results matching ""

    No results matching ""