A11y Lablearn by doing
0/20

Forms · 17

Prepare live regions before updates

A live region can announce inserted text only when its container already exists for assistive technology.

What to do

  1. Add an initially empty role="status" region with id="status-message".
  2. Add an initially empty role="alert" region with id="alert-message".
  3. Keep both containers in place while the preview inserts routine and urgent messages.
/index.html
Preview
updating…

Result

Run the checks

Edit the HTML and select “Check solution”. The preview updates automatically.

If you are stuck

Create empty live-region elements in the original HTML. Do not create or replace them only after a button click.

Read the exact rule or pattern

Exercise 17 of 20

axe-core

Automated audit