How React writes aria props
aria-* booleans become the strings "true"/"false" (aria-hidden={false} writes "false", it does not remove the attribute). hidden, a normal HTML boolean, is added or removed instead. Pass undefined to drop an aria attribute.
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
<button aria-expanded="false" aria-controls="more">More options</button>
after click: aria-expanded = true
<div id="more" aria-hidden="false">Extra settings…</div>