A div that looks like a button is not a button
Both look the same and both work with a mouse. Now click in the preview and press Tab: focus jumps straight to the real button. The div can't take focus, and even if you give it tabIndex={0}, Enter and Space still do nothing until you write a key handler.
React renders plain HTML, so most accessibility comes free when your components output the right elements: real buttons, labelled inputs, headings and landmarks, with Fragments instead of wrapper divs that break the structure.
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.
Rewrite <div className="icon-btn" onClick={close}><svg …/></div> so it is accessible.
A NavItems component returns <div><li>Home</li><li>About</li></div> and is used inside <ul>. Fix it.
Write a search form with a labelled search field and a submit button, using landmarks correctly.
Explain it without notes
Why is <div onClick> an accessibility bug, and what exactly does <button> give you instead?
What is the accessibility tree, and how does React's output reach it?
Why do Fragments matter for accessibility, not only for tidy markup?
What can eslint-plugin-jsx-a11y catch, and what can't it catch?
Preview
Console
Nothing logged yet.Expected console output
div | tabIndex: -1 | took focus: false
button | tabIndex: 0 | took focus: true