Back to blog

Web accessibility: from basics to compliance

February 8, 20256 min read
AccessibilitéWCAGUX

What is accessibility?

Web accessibility (a11y) aims to ensure that websites and applications are **usable by as many people as possible**, including those with disabilities.

WCAG Principles

  • **Perceivable**: alt text, contrast, captions.
  • **Operable**: keyboard navigation, no focus traps.
  • **Understandable**: clear language, predictable forms.
  • **Robust**: content interpretable by assistive technologies.

Quick Checklist in React / Next.js

  • Use **correct HTML semantics**: `<main>`, `<nav>`, `<header>`, `<footer>`.
  • Ensure all interactive buttons are real `<button>` elements (not `<div onClick>`).
  • Add **explicit labels** to form fields:
<label htmlFor="email" className="text-sm font-medium">
  Email address
</label>
<input
  id="email"
  name="email"
  type="email"
  className="mt-1 w-full rounded-md border border-border px-3 py-2 text-sm"
/>
  • Test **keyboard-only navigation** (Tab, Shift+Tab, Enter, Space).
  • Check contrast with Lighthouse or axe DevTools.

Conclusion

Integrating accessibility from the start of a project is less costly than fixing it afterward.

Web accessibility: from basics to compliance | Izayid Ali