Accessibility a11y

Accessibility means building interfaces that people with different abilities can use. In React this includes semantic HTML, keyboard support, labels, focus management, accessible names, error announcements, and appropriate ARIA when native HTML cannot express the required behavior.

Start with semantic HTML

<button type="button">
  Save
</button>

<label htmlFor="email">
  Email
</label>

<input id="email" type="email" />

Native HTML elements provide keyboard and accessibility behavior for free. Prefer them over clickable divs.

Keyboard navigation

Every interactive feature should be usable without a mouse. A custom dialog, menu, or dropdown must manage keyboard interaction appropriately.

Accessible forms

<label htmlFor="email">Email</label>
<input
  id="email"
  aria-invalid={Boolean(error)}
  aria-describedby="email-error"
/>

{error && (
  <p id="email-error">
    Enter a valid email
  </p>
)}

Accessible button vs div

Focus management

After opening a modal, focus should move into the dialog and be managed correctly. After closing it, focus should normally return to the triggering control.

Screen-reader friendly output

<button aria-label="Remove Laptop from cart">
  ×
</button>

Testing accessibility

Use automated checks together with keyboard testing and assistive-technology testing. Automated tools can find many issues but cannot prove that an interface is fully accessible.

Output

Keyboard user:
Tab -> Email
Tab -> Password
Tab -> Login
Enter -> Submit

Validation:
Email field is announced as invalid
Error message is associated with field

Common mistakes

• Using div elements for buttons.
• Removing focus outlines without replacement.
• Missing form labels.
• Using ARIA where native HTML would be better.
• Ignoring keyboard interaction.

Interview questions

• What is semantic HTML?
• Why is button better than div onClick?
• What is aria-describedby?
• How do you manage modal focus?
• Can automated accessibility tests find everything?