a11y-audit

Accessibility Audit & Fix

Help users identify and fix accessibility issues in React/Next.js components with Tailwind CSS. The goal is practical, actionable guidance — not an exhaustive WCAG spec dump.

Quick Audit Checklist

When auditing a component or page, check these areas in order. Each section below explains what to look for and how to fix it.

1. Semantic HTML — are the right elements used?
2. Keyboard navigation — can everything be reached and operated with keyboard alone?
3. ARIA attributes — are labels, roles, and states correct?
4. Color and contrast — does it meet minimum contrast ratios?
5. Focus management — is focus visible and logical?
6. Screen reader experience — does it make sense when read aloud?
7. Motion and animation — is reduced motion respected?

Semantic HTML

Using the right HTML elements is the single highest-impact accessibility improvement because it gives you keyboard support, screen reader announcements, and proper roles for free.

Common mistakes and fixes

Instead of...	Use...	Why
<div onClick>	<button>	Buttons are focusable, respond to Enter/Space, announced as "button"
<div> for navigation	<nav>	Screen readers can jump to nav landmarks
<div> for main content	<main>	Landmark navigation — users can skip to main content
<span> for headings	<h1>–<h6>	Screen readers build a page outline from headings
<div> for lists	<ul>/<ol>	Screen readers announce "list, 5 items"
<a> without href	<button>	Links navigate, buttons perform actions

Heading hierarchy

Headings should form a logical outline. Don't skip levels for styling — use Tailwind to style any heading however you want:

// Bad — skips h2, uses headings for styling
<h1>Dashboard</h1>
<h3 className="text-lg">Recent Activity</h3>

// Good — proper hierarchy, styled independently
<h1 className="text-2xl font-bold">Dashboard</h1>
<h2 className="text-lg font-semibold">Recent Activity</h2>