A keyed Fragment keeps a definition list valid
The Fragment leaves no trace in the DOM: the dl gets dt, dd, dt, dd, exactly what HTML (and a screen reader announcing "description list, 2 items") expects.
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
children of <dl>: [ 'DT', 'DD', 'DT', 'DD' ]