Web Accessibility: The Basics
Accessibility matters. Here are the fundamentals every web developer should know.
Why It Matters
About 15% of the world has some form of disability. That's over a billion people. Building accessible websites isn't just nice—it's essential.
Semantic HTML
The foundation:
<!-- ❌ Div soup -->
<div class="nav">
<div class="nav-item">Home</div>
</div>
<!-- ✅ Semantic -->
<nav>
<a href="/">Home</a>
</nav>Screen readers understand `<nav>`, `<main>`, `<article>`, `<aside>`. They don't understand your class names.
Keyboard Navigation
Can you use your site without a mouse?
// ❌ Click-only
<div onClick={handleAction}>Click me</div>
// ✅ Keyboard accessible
<button onClick={handleAction}>Click me</button>Buttons get keyboard focus and respond to Enter/Space for free.
For custom components:
<div
role="button"
tabIndex={0}
onClick={handleAction}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
handleAction();
}
}}
>
Custom button
</div>Alt Text
Every image needs it:
<!-- Decorative (empty alt) -->
<img src="decorative-line.png" alt="" />
<!-- Informative -->
<img src="chart.png" alt="Sales increased 25% from Q1 to Q2" />
<!-- Linked -->
<a href="/profile">
<img src="avatar.jpg" alt="Your profile" />
</a>Color Contrast
Text needs at least 4.5:1 contrast ratio against background.
Use tools:
- WebAIM Contrast Checker
- Chrome DevTools accessibility audit
Don't rely on color alone:
<!-- ❌ Color only -->
<span class="text-red">Error</span>
<!-- ✅ Color + text -->
<span class="text-red">❌ Error: Invalid email</span>ARIA Labels
When visual context isn't available:
<button aria-label="Close modal">
<svg><!-- X icon --></svg>
</button>
<input
type="search"
aria-label="Search products"
/>Testing
1. **Keyboard** - Tab through your site 2. **Screen reader** - VoiceOver (Mac) or NVDA (Windows) 3. **Lighthouse** - Automated accessibility audit 4. **axe DevTools** - Browser extension
Start Somewhere
You don't have to fix everything at once. Pick one area:
- Add alt text to images
- Fix heading hierarchy
- Ensure forms have labels
Incremental improvements add up.