Live Region
Definition
Screen readers normally speak what has focus. Anything that changes elsewhere — a file count updating, a validation summary appearing, a search result total — happens in silence unless the page says otherwise. Marking a container with aria-live tells the browser to watch it and pass changes to the accessibility tree as announcements. The attribute takes three values: off, which is the default, polite, which queues the announcement until the reader pauses, and assertive, which interrupts immediately. Two ARIA roles carry these behaviours implicitly, so role status behaves as polite and role alert behaves as assertive, and using the role is usually tidier than setting the attribute by hand. WCAG added 4.1.3 Status Messages at level AA in WCAG 2.1 in 2018, which is the criterion that requires status changes to be available without a change of focus.
Why It Matters
Without one, half of a modern interface disappears for anyone not watching the screen. Submit a form and the error summary is invisible, filter a list and the 'no results' message goes unheard, start an upload and the progress that everyone else can see reports nothing. In a single-page application, where clicking a link swaps content instead of loading a new page, even the page change itself can pass unannounced. Overused, the same feature becomes a fault of its own: an assertive region tied to a per-keystroke character count interrupts every word the reader types.
How It Works
The container has to exist in the document before the change happens, because assistive technology only watches regions it has already seen — inserting a fresh div that already contains the message frequently announces nothing. Put an empty element with role status in the markup at load time, then set its text content when there is something to report. Keep the message short, because the whole region is read out; aria-atomic set to true forces the entire region to be spoken rather than only the changed part, which suits a sentence that must be heard whole. Reserve assertive and role alert for things that genuinely cannot wait, such as a session about to expire, and use polite for everything else. A live region is not a substitute for an ARIA label on the control that triggered the change, and it is not a place to put content the reader will need again later.
Real-World Example
A studio publishes a one-page file browser at team-files.99helpers.site that filters a list of downloads as you type. Typing 'invoice' narrowed 40 rows to 3 with no announcement, so a screen reader user heard only their own keystrokes. Adding an empty element with role status above the list, updated to read '3 files match invoice' after a short debounce, made the result audible without stealing focus from the search box. The page is plain static HTML served from 99helpers, so the whole change was four lines and one redeploy.
Common Mistakes
- ✕Creating the live region and its message in the same update — the browser was not watching that node beforehand, so the text arrives with nothing listening and is never spoken
- ✕Marking everything assertive because it feels more important — each announcement cuts off the one before it, and the reader loses the thread of what they were doing
- ✕Toggling a region between display none and visible to 'show' a message — several screen readers treat that as nothing having changed, so the message stays silent
Related Terms
ARIA Label
aria-label is an attribute that gives an element an accessible name in words, for the cases where no visible text can do it. The first rule of ARIA is not to use ARIA: if a native HTML element already does the job, use that instead.
Screen Reader
A screen reader is software that turns what is on screen into speech or braille and gives the user a keyboard interface for moving through it. JAWS, NVDA, VoiceOver, Narrator and TalkBack are the ones in common use.
Accessible Name
The accessible name is the short string that identifies an element to assistive technology — the words a screen reader speaks when focus lands on a link, button or field. Browsers work it out from several possible sources in a fixed order.
Form Label
A form label is the visible text tied programmatically to an input, so that software as well as sighted readers knows what belongs in the box. In HTML it is a label element linked to the field by id.
Single-Page Application
A single-page application loads one HTML file and then rewrites the page in the browser as you navigate, instead of fetching a new document for every link. The address bar still changes; the page never fully reloads.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →