Accessibility
Building inclusive web applications — WCAG, ARIA, and semantic HTML
What you'll learn
Understand the four WCAG POUR principles (Perceivable, Operable, Understandable, Robust)
Write semantic HTML instead of generic divs with ARIA roles
Use ARIA attributes (aria-label, role, aria-live) to enhance screen reader support
Implement keyboard navigation with tabIndex and appropriate role attributes
Apply accessibility best practices: heading hierarchy, alt text, color contrast, screen reader testing
Distinguish when to use semantic HTML over ARIA overrides
Accessibility ensures your app works for everyone, regardless of ability.
Core Principles
| Principle | Description |
|---|---|
| Perceivable | Content must be available to senses |
| Operable | UI must work with various input methods |
| Understandable | Content and UI must be clear |
| Robust | Works with assistive technologies |
Semantic HTML
<!-- Bad -->
<div class="btn" onclick="submit()">Submit</div>
<!-- Good -->
<button type="submit">Submit</button>
ARIA Attributes
<button aria-label="Close dialog" onClick="{close}">
<XIcon />
</button>
<div role="alert" aria-live="polite">Form submitted successfully</div>
Keyboard Navigation
function Menu({ items }: { items: string[] }) {
return (
<ul role="menubar">
{items.map((item) => (
<li key={item} role="menuitem" tabIndex={0}>
{item}
</li>
))}
</ul>
)
}
Best Practices
- Use proper heading hierarchy (h1 → h2 → h3)
- All images need alt text
- Color contrast ratio ≥ 4.5:1
- Support keyboard-only navigation
- Test with screen readers (VoiceOver, NVDA)
Next Steps
Key Takeaways
WCAG defines four core accessibility principles: Perceivable, Operable, Understandable, Robust
Semantic HTML elements like <button> have built-in keyboard and screen reader support — prefer them over ARIA-inflated divs
ARIA attributes bridge accessibility gaps when semantic HTML alone is insufficient
Keyboard navigation requires correct tabIndex values and role attributes like menubar and menuitem
Color contrast must meet a 4.5:1 minimum ratio; all images need alt text
Proper heading hierarchy (h1 to h2 to h3) and screen reader testing (VoiceOver, NVDA) verify real-world accessibility