Web Accessibility (WCAG)

⏱️ Reading time: 20 min📋 Prerequisites: HTML Fundamentals

WCAG Principles (POUR)

/* POUR - Four Principles */

1. Perceivable
   - Text alternatives for images
   - Captions for videos
   - Sufficient color contrast (4.5:1)
   - Resizable text (up to 200%)

2. Operable
   - Keyboard accessible
   - Enough time to read
   - No seizure-inducing content
   - Clear navigation

3. Understandable
   - Readable text
   - Predictable behavior
   - Input assistance
   - Error messages

4. Robust
   - Valid HTML
   - Compatible with assistive tech
   - Proper ARIA usage

Semantic HTML

<!-- Good: Semantic -->
<header>
    <nav aria-label="Main">
        <ul>
            <li><a href="/">Home</a></li>
        </ul>
    </nav>
</header>
<main>
    <article>
        <h1>Article Title</h1>
        <p>Content...</p>
    </article>
</main>
<footer>...</footer>