SKILL.md
Accessibility Compliance
Table of Contents
- [Overview](#overview)
- [When to Use](#when-to-use)
- [Quick Start](#quick-start)
- [Reference Guides](#reference-guides)
- [Best Practices](#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