Fake button versus real button
role="button" changed only the announcement. The div still can't be focused, so a keyboard user can never press it. Making it work needs tabindex="0" plus Enter and Space key handlers: all things <button> already does.
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
fake focusable: false
real focusable: true