<p>Improve inclusivity and SEO with systematic auditing.</p>
<h2 id="1-automated-scan"><a href="#1-automated-scan">1. Automated Scan</a></h2>
<p>Run Lighthouse (Chrome DevTools) a11y tab. Export report.</p>
<h2 id="2-keyboard-navigation-pass"><a href="#2-keyboard-navigation-pass">2. Keyboard Navigation Pass</a></h2>
<p>Checklist:</p>
<ul>
<li>Can you tab through interactive elements in logical order?</li>
<li>Is focus visible everywhere?</li>
<li>Escape closes modals? (e.g., search dialog)</li>
</ul>
<h2 id="3-color-contrast"><a href="#3-color-contrast">3. Color Contrast</a></h2>
<p>Use a contrast checker for text over backgrounds. Meet WCAG AA (4.5:1 normal, 3:1 large text).</p>
<h2 id="4-semantic-landmarks"><a href="#4-semantic-landmarks">4. Semantic Landmarks</a></h2>
<p>Page should include: <code>header</code>, <code>nav</code>, <code>main</code>, <code>footer</code>. Use skip link for main.</p>
<h2 id="5-images--media"><a href="#5-images--media">5. Images &#x26; Media</a></h2>
<ul>
<li>Descriptive <code>alt</code> text or empty alt for decorative images.</li>
<li>Captions / transcripts for video/audio.</li>
</ul>
<h2 id="6-forms"><a href="#6-forms">6. Forms</a></h2>
<ul>
<li>Explicit labels</li>
<li>Associated <code>aria-describedby</code> for helper text</li>
<li>Clear error messaging.</li>
</ul>
<h2 id="7-aria-use"><a href="#7-aria-use">7. ARIA Use</a></h2>
<p>Use ARIA only to fill semantic gaps (e.g., <code>role="dialog"</code>). Avoid over-labeling.</p>
<h2 id="8-dynamic-content"><a href="#8-dynamic-content">8. Dynamic Content</a></h2>
<p>Announce status changes with <code>aria-live</code> if critical.</p>
<h2 id="9-screen-reader-pass"><a href="#9-screen-reader-pass">9. Screen Reader Pass</a></h2>
<p>Use NVDA (Windows) or VoiceOver (macOS). Navigate headings, landmarks, and links.</p>
<h2 id="10-track-remediations"><a href="#10-track-remediations">10. Track Remediations</a></h2>
<pre class="shiki-wrapper"><div class="code-body"><code data-raw="SXNzdWU6CldDQUcgY3JpdGVyaW9uOgpGaXggYXBwbGllZDoKRXZpZGVuY2U6Ck93bmVyOgo="><span class="line"><span>Issue:</span></span>
<span class="line"><span>WCAG criterion:</span></span>
<span class="line"><span>Fix applied:</span></span>
<span class="line"><span>Evidence:</span></span>
<span class="line"><span>Owner:</span></span>
<span class="line"><span></span></span></code></div><div class="code-actions"><button type="button" class="code-copy-btn inline-flex h-8 w-8 items-center justify-center rounded-md bg-background/70 border shadow-sm transition text-muted-foreground hover:text-foreground hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 dark:focus-visible:ring-accent-400 active:scale-95" title="Copy code" aria-label="Copy code"><span class="sr-only">Copy code</span><span class="icon icon-copy"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="8" width="12" height="12" rx="2" ry="2"/><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"/></svg></span><span class="icon icon-check hidden"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span></button></div></pre>
<p>Accessible by design beats retrofits.</p>

Accessibility Audit Quickstart

1. Automated Scan

2. Keyboard Navigation Pass

3. Color Contrast

4. Semantic Landmarks

5. Images & Media

6. Forms

7. ARIA Use

8. Dynamic Content

10. Track Remediations