WCAG 2.1 Accessibility Compliance: Complete Guide 2026

Web accessibility ensures everyone can use your website. With increasing legal requirements and 15% of the population having a disability, it's a moral and business necessity.

1. Semantic HTML

Use the right element for the job to provide improved navigation and context.

<!-- Bad: Div soup -->
<div class="nav" onclick="go()">Home</div>
 
<!-- Good: Semantic structure -->
<nav>
  <ul>
    <li><a href="/">Home</a></li>
  </ul>
</nav>
 
<!-- Proper Heading Hierarchy -->
<h1>Page Title</h1>
<section>
  <h2>Section Title</h2>
  <h3>Subsection</h3>
</section>

2. ARIA (Accessible Rich Internet Applications)

Use ARIA to enhance, not replace, HTML.

Common Patterns:

<!-- Labels -->
<button aria-label="Close menu">X</button>
 
<!-- Dynamic Status -->
<div role="status" aria-live="polite">
  Item added to cart
</div>
 
<!-- Errors -->
<input aria-invalid="true" aria-describedby="error-msg">
<span id="error-msg">Invalid email</span>

3. Keyboard Navigation

All interactive elements must be usable via keyboard.

• Tab: Move focus forward.
• Shift+Tab: Move focus backward.
• Enter/Space: Activate.

Skip Links: Allow users to bypass navigation.

<a href="#main" class="skip-link">Skip to content</a>
<style>
  .skip-link { position: absolute; left: -9999px; }
  .skip-link:focus { left: 0; }
</style>

4. Color and Contrast

• Normal Text: 4.5:1 ratio.
• Large Text: 3:1 ratio.
• Indicators: Don't rely on color alone (use icons/text).
• Focus: Ensure visible focus outline.

5. Images and Media

Alt Text:

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

Video: Include captions (CC) and transcripts for all video content.

6. Forms

Always link labels to inputs.

<label for="email">Email</label>
<input id="email" type="email" required>
 
<!-- Grouping -->
<fieldset>
  <legend>Choose Plan</legend>
  <label><input type="radio" name="plan"> Basic</label>
</fieldset>

7. Testing

Automated:

npm install -g pa11y
pa11y https://yoursite.com

Manual Checklist:

• Can you tab through everything?
• Is focus always visible?
• Does it work with a screen reader (VoiceOver/NVDA)?
• Is contrast sufficient?

WCAG Compliance Checklist (Level AA)

• ✅ Perceivable: Alt text, captions, valid contrast.
• ✅ Operable: Keyboard accessible, no traps, sufficient time.
• ✅ Understandable: Readable text, predictable navigation, form labels.
• ✅ Robust: Compatible with assistive tools (valid HTML).

Need an audit? WebScore.now provides detailed WCAG reports.