A live region announces async results
The MutationObserver plays the role of a screen reader watching the region. The list itself is not in the live region: only the short summary is announced, and users can then move into the list.
ARIA attributes add roles, names, relationships and states that HTML can't express; in React you write them as hyphenated aria-* props, connect elements with ids from useId, and announce async changes with live regions.
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 a Toggle button component for "Mute" that exposes its on/off state to screen readers.
Write a SaveStatus component that announces Saving…, then Saved after a fake 500 ms save.
Explain it without notes
How do you write ARIA attributes in JSX, and how does React render boolean values for them?
Why does a reusable component need useId for accessibility, and what properties does useId guarantee?
What is a live region, and what mistake makes React live regions silent?
What is the first rule of ARIA? Give two cases where ARIA is genuinely needed.
Preview
Console
Nothing logged yet.Expected console output
live region now says: Searching…
live region now says: 2 results