Announcing a change in HTML

A region that updates silently is a region a screen reader user never learns about.

<p id="save-state" role="status" aria-live="polite">
  All changes saved
</p>

<div role="alert">
  Connection lost. Retrying in 5 seconds.
</div>

<div aria-live="polite" aria-atomic="true">
  <p>3 of 12 files uploaded</p>
</div>

How it works

1. aria-live="polite" waits for a pause; assertive interrupts.
2. The live region must be in the DOM before the text changes.
3. role="status" is a polite live region with a name already attached.

The run, in numbers

Lines

11

Characters to type

224

Tokens

49

Three-star pace

75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 39 seconds.

Type this snippet

Step 4 of 4 in Names and state, step 8 of 15 in Accessible HTML.

← Previous Next →