Skip to content

Chapter 4 of 8

Live Regions and Modal Dialogs

Modern web applications update content dynamically without a page reload, and assistive technology users need to be informed of those changes. The aria-live attribute marks a region whose content may change so that assistive technologies announce updates, and it accepts three politeness levels: "off" silences announcements, "polite" waits until the user pauses speaking or typing, and "assertive" interrupts the current announcement immediately. Assertive updates should be used sparingly to avoid disorienting users. A "live region" is any element with aria-live (or a role that implies it) whose text content can change dynamically and should be announced.

Several roles imply a default aria-live behavior. role="alert" implies aria-live="assertive" and triggers immediate announcement of an urgent message, while role="status" implies aria-live="polite" and is suitable for non-urgent updates like "Saved" or "Loading complete". The aria-atomic attribute on a live region determines whether assistive technology announces the entire region on every change (when true) or only the changed nodes (when false). The aria-relevant attribute controls which kinds of changes — additions, removals, or text changes — trigger announcements. role="timer" is a specialized live region for time-elapsed or time-remaining displays; setting aria-live="off" on it makes it announced as a timer rather than a generic status, distinguishing it from role="status" which is for general polite textual updates.

Modal dialogs require careful focus management because they temporarily take over the user's interaction. The standard ARIA pattern applies role="dialog" with aria-modal="true" on the dialog container, aria-labelledby pointing to the dialog's title, focus moved into the dialog when opened, and Tab trapped inside until it is closed. The aria-modal="true" attribute tells assistive technology that the rest of the page is inert and should not be navigated to. Authors should also apply the inert HTML attribute to content outside the dialog so it is non-interactive and hidden from assistive technology, complementing the focus trap. role="alertdialog" is a specialized variant used for urgent messages that require confirmation, inheriting aria-live="assertive" so the message interrupts the user; unlike the non-modal role="alert", it requires a response.

All chapters
  1. 1Foundations of Web Accessibility
  2. 2ARIA Fundamentals
  3. 3Keyboard Interaction and Focus
  4. 4Live Regions and Modal Dialogs
  5. 5Common Widget Patterns
  6. 6Forms, Buttons, and Controls
  7. 7Content Semantics and Structure
  8. 8Advanced Patterns and Practices

Drill it

Reading is not remembering. These come from the Accessibility Aria Patterns deck:

Q

What does the acronym "a11y" stand for in web development?

"a11y" is a numeronym for "accessibility" — 'a' + 11 letters + 'y'.

Q

What is the difference between web accessibility (a11y) and usability?

Accessibility means people with disabilities can perceive, understand, navigate, and interact with the web. Usability is the broader quality of a design being e...

Q

Which four disability categories does WCAG primarily address?

Visual, auditory, physical/motor, and cognitive/neurological disabilities.

Q

Name the three conformance levels defined by WCAG 2.1.

A (lowest), AA (mid), and AAA (highest).