A polite live region
With a screen reader running, each change is read out without focus leaving the button. The region was in the page, empty, from the start.
ARIA attributes add roles, names and states to the accessibility tree when HTML has no element for the job; they change only what assistive tech hears, never behaviour, so native HTML always comes first.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write an icon-only "Delete" button and a toggle button "Bold" that tells assistive tech whether it's on, starting off.
Write a search form whose result count ("5 results") is announced politely after each search, without moving focus.
Mark up a site navigation where the link to the current page is identified to assistive tech.
Explain it without notes
What is the first rule of ARIA, and why does it exist?
What's the difference between aria-label, aria-labelledby and aria-describedby?
When would you use aria-live="polite" versus role="alert"? What's the common bug with live regions?
What does aria-hidden="true" do, and when is it harmful?
Preview
Console
Nothing logged yet.Expected console output
role: status | exists before any message: true
announced: 1 item in your cart.
announced: 2 items in your cart.