Module 5 · Forms, performance and access Lesson 15 of 15

Accessibility in a React app

Worked example

<button onClick={...}> is keyboard-operable; <div onClick={...}> is not, and adding role="button" plus key handlers to fix it is work you did not need.

Your practice task

Audit one component: replace two clickable divs with buttons and add a label to every input.

Do this before moving on. Reading a solution teaches the shape of it; typing it teaches you.

Key takeaway

React makes accessible markup easy if you use the semantic element instead of a div with a click: a button is focusable and keyboard-pressable for free. Labels, alt text and a live region cover the rest.

Almost there

15 lessons left of 15

Finish every lesson to unlock the certificate. Each one ends in a practice task — do them and the final project brief writes itself.

Next recommended course Full-Stack Web Development Bootcamp