Live region design pattern

This live region is created using the <button> and <div> elements, with scripting to provide the expected behaviour. Additional semantic information is provided with ARIA.

Example

Basket summary

Your basket contains 0 items.

Notes

The aria-live attribute has been used to convert the <div> into a live region. The assertive value means that screen readers will interupt their current activity to notify the user that the content of the live region has changed.

The aria-atomic attribute has been used to define how much of the live region content should be announced. The value of true means that all the content in the live region will be announced, even when only part of the content has been updated.

Notes on screen reader support for live regions are available.