Accessibility (a11y) ensures that all users — including those with disabilities — can use web applications effectively. In React, accessibility is achieved using semantic HTML, keyboard navigation, and ARIA roles.
ARIA stands for Accessible Rich Internet Applications. It provides additional semantic information for assistive technologies.
// Basic ARIA role and label examples
<button aria-label="Close Modal">❌</button>
<nav role="navigation">...</nav>
<div role="alert">Error: Please fill all fields.</div>
// React modal with proper ARIA roles and labels
function AccessibleModal({ onClose }) {
return (
<div
role="dialog"
aria-modal="true"
aria-labelledby="modalTitle"
aria-describedby="modalDescription"
className="modal"
>
<h2 id="modalTitle">Delete File</h2>
<p id="modalDescription">Are you sure you want to delete this file?</p>
<button onClick={onClose} aria-label="Close modal">Cancel</button>
<button className="btn btn-danger">Delete</button>
</div>
);
}
ARIA attributes help screen readers identify the modal as a dialog, associate its title and description, and guide user interaction correctly.
// Keyboard accessible div behaving like a button
<div
role="button"
tabIndex="0"
onClick={handleClick}
onKeyDown={(e) => e.key === "Enter" && handleClick()}
>
Press Enter or Click
</div>
// Install accessibility linting plugin
npm install eslint-plugin-jsx-a11y --save-dev
Try navigating your app using only the keyboard (Tab, Enter, Space). Notice how ARIA roles improve clarity when screen readers are enabled.
This component is built using a <div> instead of a checkbox. Without ARIA and proper event handling, it would be invisible to screen readers and keyboard users.
? Click it or focus using Tab and press Space/Enter.
role="dialog" to a modalaria-labelledby for headingsGoal: Build inclusive React applications accessible to everyone.