Accessibility

If you're implementing WCAG 2.2 Level AA compliance across web, iOS, or Android, this gives you the technical specifics: semantic ARIA mappings, accessibility traits, target sizes, focus management patterns. It's built around the POUR principles and includes cross-platform translation tables so you know exactly how `aria-label` maps to `.accessibilityLabel()` or `contentDescription`. The examples are concrete, from search forms to SwiftUI buttons, and it covers newer 2.2 criteria like the 24px minimum target size and redundant entry prevention. Most useful when you're auditing existing code or writing component specs where you need to get the accessibility tree right the first time. The anti-patterns section alone (div-buttons, uncontained modal focus) is worth keeping around.

skills.sh installs: 6.1K
GitHub stars: 300.3K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add affaan-m/ecc --skill accessibility --agent claude-code

Installs into .claude/skills of the current project.

Files

Accessibility (WCAG 2.2)

This skill ensures that digital interfaces are Perceivable, Operable, Understandable, and Robust (POUR) for all users, including those using screen readers, switch controls, or keyboard navigation. It focuses on the technical implementation of WCAG 2.2 success criteria.

When to Use

Defining UI component specifications for Web, iOS, or Android.
Auditing existing code for accessibility barriers or compliance gaps.
Implementing new WCAG 2.2 standards like Target Size (Minimum) and Focus Appearance.
Mapping high-level design requirements to technical attributes (ARIA roles, traits, hints).

Core Concepts

POUR Principles: The foundation of WCAG (Perceivable, Operable, Understandable, Robust).
Semantic Mapping: Using native elements over generic containers to provide built-in accessibility.
Accessibility Tree: The representation of the UI that assistive technologies actually "read."
Focus Management: Controlling the order and visibility of the keyboard/screen reader cursor.
Labeling & Hints: Providing context through aria-label, accessibilityLabel, and contentDescription.