Accessibility

WCAG 2.1 Principles (POUR)

Perceivable

Content must be presentable in ways users can perceive.

Operable

Interface must be operable by all users.

Understandable

Content and operation must be understandable.

Robust

Content must work with current and future technologies.

Common Issues & Fixes

Images

<!-- Bad -->
<img src="chart.png">

<!-- Good -->
<img src="chart.png" alt="Sales increased 25% in Q4 2024">

Forms

<!-- Bad -->
<input type="email" placeholder="Email">

<!-- Good -->
<label for="email">Email</label>
<input id="email" type="email" aria-describedby="email-hint">
<span id="email-hint">We'll never share your email</span>

Color Contrast

• Normal text: 4.5:1 minimum
• Large text (18pt+): 3:1 minimum
• UI components: 3:1 minimum

Keyboard Navigation

• All interactive elements focusable
• Visible focus indicator
• Logical tab order
• Skip links for navigation

Screen Readers

<!-- Hidden visually but accessible -->
<span class="sr-only">Open menu</span>

<!-- Live regions for updates -->
<div aria-live="polite">Item added to cart</div>

ARIA Basics

<!-- Roles -->
<nav role="navigation">

<!-- States -->
<button aria-expanded="false">Menu</button>

<!-- Properties -->
<input aria-required="true">

<!-- Labels -->
<button aria-label="Close dialog">×</button>

Testing Checklist

• Keyboard navigation works
• Screen reader announces correctly
• Color contrast passes
• Focus visible
• Form labels present
• Images have alt text
• Headings hierarchical
• Links descriptive

Tools

• Axe DevTools (browser extension)
• WAVE (web accessibility evaluator)
• Lighthouse (Chrome DevTools)
• Screen readers: NVDA, VoiceOver, JAWS