Web Accessibility: A Practical Guide
Accessibility isn't just about compliance — it's about building products that work for everyone. And it's increasingly a legal requirement.
Why Accessibility Matters
- 15% of the global population has some form of disability
- SEO benefits — accessible sites rank better (semantic HTML, alt text, heading structure)
- Legal requirements — EU Accessibility Act takes full effect in 2025
- Better UX for everyone — accessibility improvements help all users
The Quick Wins
1. Semantic HTML
<!-- Bad -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="main">...</div>
<!-- Good -->
<header>...</header>
<nav>...</nav>
<main>...</main>
2. Alt Text
Every meaningful image needs descriptive alt text:
<!-- Bad -->
<img src="team.jpg" alt="image" />
<!-- Good -->
<img src="team.jpg" alt="IceCat Studio team working in Prague office" />
<!-- Decorative images -->
<img src="divider.svg" alt="" role="presentation" />
3. Color Contrast
Minimum contrast ratios:
- Regular text: 4.5:1
- Large text (18px+): 3:1
- UI components: 3:1
4. Keyboard Navigation
- All interactive elements must be focusable
- Focus order must be logical
- Focus styles must be visible
- No keyboard traps
5. ARIA Labels
<button aria-label="Close menu">
<XIcon />
</button>
<nav aria-label="Main navigation">...</nav>
Testing Accessibility
- Automated: Lighthouse, axe-core, eslint-plugin-jsx-a11y
- Manual: Tab through the page, use screen reader (NVDA, VoiceOver)
- Real users: Include people with disabilities in user testing
Common Mistakes
- Using
divandspanfor everything instead of semantic elements - Hiding focus outlines (
outline: none) without replacement - Color as the only way to convey information
- Missing form labels
- Inaccessible modals (no focus trap, no escape key)
Accessibility is a journey, not a destination. Start with the quick wins and improve incrementally.
Originally published on IceCat Studio Blog. Based on WCAG 2.2 guidelines and MDN accessibility documentation.