Building Accessible Web Apps

Accessibility Benefits Everyone

Not just screen reader users. Good accessibility helps:

• Keyboard users
• People with slow connections
• Mobile users
• Search engines

Semantic HTML

<!-- Bad -->
<div class="header">
    <div class="nav">
        <div onclick="goHome()">Home</div>
    </div>
</div>

<!-- Good -->
<header>
    <nav>
        <a href="/">Home</a>
    </nav>
</header>

Image Alt Text

<!-- Decorative - empty alt -->
<img src="divider.png" alt="">

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

<!-- Linked image -->
<a href="/profile">
    <img src="avatar.jpg" alt="View profile">
</a>

Form Labels

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

<!-- Good -->
<label for="email">Email</label>
<input type="email" id="email" name="email">

<!-- Hidden label (visually) -->
<label for="search" class="sr-only">Search</label>
<input type="search" id="search">

Keyboard Navigation

<!-- Make interactive elements focusable -->
<div role="button" tabindex="0" onkeydown="handleKeydown(event)">
    Click me
</div>

<!-- Better: use actual buttons -->
<button type="button">Click me</button>

ARIA When Needed

<!-- Live region for updates -->
<div aria-live="polite">
    {{ statusMessage }}
</div>

<!-- Expanded/collapsed -->
<button aria-expanded="false" aria-controls="menu">
    Menu
</button>
<ul id="menu" hidden>...</ul>

Color Contrast

Minimum ratios:

• Normal text: 4.5:1
• Large text: 3:1
• UI components: 3:1

Tools: WebAIM Contrast Checker

Testing

1. Navigate with keyboard only
2. Use browser accessibility inspector
3. Test with screen reader (VoiceOver, NVDA)
4. Run Lighthouse audit