← Lessons

quiz vs the machine

Gold1450

Frontend

The Screen Reader Live Regions

Announce dynamic updates like saved confirmations and errors to screen reader users at the right moment.

5 min read · core · beat Gold to climb

Why live regions exist

When content changes after the page loads, a screen reader does not automatically read it. A toast saying Saved or a count of search results could pass by silently. A live region is a container marked so that updates inside it are announced when they change.

  • Politeness controls timing so updates wait or interrupt.
  • The region must exist before updates so the browser is watching it.
  • Only the changed text is usually announced, not the whole page.

Polite and assertive

The two common levels decide how urgent an update is.

  • A polite level waits until the user pauses, good for status messages.
  • An assertive level interrupts immediately, reserved for urgent errors.
  • Overusing assertive is jarring, so prefer polite for routine updates.

Making them reliable

Live regions are finicky, so a few habits keep them dependable.

  • Render the empty region first, then insert text into it later.
  • Keep messages short and specific so the announcement is clear.
  • Avoid flooding the region with rapid changes that pile up.

A status role gives a polite region, and an alert role gives an assertive one, so you can choose the right tool for the message.

Key idea

A live region announces dynamic updates to screen reader users, with polite for routine status and assertive reserved for urgent messages.

Check yourself

Answer to earn rating on the learn ladder.

1. Why must a live region exist before its content changes?

2. Which politeness level should routine status messages use?