Building Accessible React Components That Everyone Can Use

Building accessible React components ensures your app works for everyone, including those with disabilities.

Semantic HTML First

Use real HTML elements:

• <button> over <div> for clicks
• <label> + <input> for form controls

Example:

<label htmlFor="email">Email</label>
<input type="email" id="email" />

Keyboard Navigation

Support Tab, Enter, and Escape:

const handleKeyDown = (e) => {
  if (e.key === 'Enter') openModal();
};

Aria Roles and Properties

• aria-label
• aria-expanded
• aria-live

Use them where semantics alone don't cover it:

<button aria-label="Close modal">×</button>

Focus Management

Trap focus inside modals:

useEffect(() => {
  modalRef.current.focus();
}, []);

Color Contrast and Design

• Ensure 4.5:1 contrast ratio
• Avoid relying on color alone to convey meaning

Testing Tools

• Axe DevTools: Chrome extension
• Lighthouse: In Chrome DevTools
• VoiceOver/NVDA: Screen reader testing

Wrap-Up

Don’t bolt accessibility on at the end. Build it in from day one. Small tweaks can make huge differences in usability and inclusivity.