Accessibility Compliance

This covers WCAG 2.1/2.2 implementation with practical examples for semantic HTML, ARIA attributes, keyboard navigation, and screen reader support. You'll want this when building public-facing apps that need ADA or Section 508 compliance, or when you're fixing accessibility issues in existing code. The reference guides include React components, focus management patterns, and a color contrast validator. The quick start does a good job showing bad versus good markup, which is honestly more useful than most a11y documentation that assumes you already know what you're doing wrong. Includes real keyboard event handling and proper form labeling patterns.

skills.sh installs: 487
GitHub stars: 379
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add aj-geddes/useful-ai-prompts --skill accessibility-compliance --agent claude-code

Installs into .claude/skills of the current project.

Files

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>

SKILL.md on GitHub