---name: accessibility-compliancedescription: >---

Accessibility Compliance

Table of Contents

• Overview
• When to Use
• Quick Start
• Reference Guides
• Best Practices

Overview

Implement comprehensive accessibility features following WCAG guidelines to ensure your application is usable by everyone, including people with disabilities.

When to Use

• Building public-facing web applications
• Ensuring WCAG 2.1/2.2 AA or AAA compliance
• Supporting screen readers (NVDA, JAWS, VoiceOver)
• Implementing keyboard-only navigation
• Meeting ADA, Section 508, or similar regulations
• Improving SEO and overall user experience
• Conducting accessibility audits

Quick Start

Minimal working example:

<!-- Bad: Non-semantic markup -->
<div class="button" onclick="submit()">Submit</div>

<!-- Good: Semantic HTML -->
<button type="submit" aria-label="Submit form">Submit</button>

<!-- Custom components with proper ARIA -->
<div
  role="button"
  tabindex="0"
  aria-pressed="false"
  onclick="toggle()"
  onkeydown="handleKeyPress(event)"
>
  Toggle Feature
</div>

<!-- Form with proper labels and error handling -->
<form>
  <label for="email">Email Address</label>
  <input
    id="email"
    type="email"
    name="email"
    aria-required="true"
// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

Guide	Contents
Semantic HTML with ARIA	Semantic HTML with ARIA
React Component with Accessibility	React Component with Accessibility
Keyboard Navigation Handler	Keyboard Navigation Handler
Color Contrast Validator	Color Contrast Validator
Screen Reader Announcements	Screen Reader Announcements
Focus Management	Focus Management

Best Practices

✅ DO

• Use semantic HTML elements
• Provide text alternatives for images
• Ensure sufficient color contrast (4.5:1 minimum)
• Support keyboard navigation
• Implement focus management
• Test with screen readers
• Use ARIA attributes correctly
• Provide skip links
• Make forms accessible with labels
• Support text resizing up to 200%

❌ DON'T

• Rely solely on color to convey information
• Remove focus indicators
• Use only mouse/touch interactions
• Auto-play media without controls
• Create keyboard traps
• Use positive tabindex values
• Override user preferences
• Hide content only visually that should be hidden from screen readers