accessibility-complianceby Seth Hobson

Accessibility Compliance Skill.

A Claude Code and Codex skill for design review: wCAG 2.2 compliant interfaces with mobile accessibility and assistive-technology support.

Design Review & Accessibility
UI code

Download OpenDesign View usage guide

wshobson/agents · plugins/ui-design/skills/accessibility-compliance/SKILL.mdSKILL.md

--- name: accessibility-compliance description: Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences. --- ## When to Use This Skill ## Detailed patterns and worked examples ## Best Practices ## Testing Tools

Front matter and section headings read from the upstream file on 2026-09-14 · 2,402 characters in full

01 What it does

What the accessibility-compliance Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

This skill implements WCAG 2.2 compliant interfaces with mobile accessibility and assistive technology support. It guides agents through semantic HTML, ARIA patterns, keyboard navigation, focus management, screen reader compatibility, and dynamic content announcements. The skill covers iOS VoiceOver, Android TalkBack, and desktop screen readers (NVDA, JAWS).

It emphasizes native elements over custom ARIA, respecting user preferences like prefers-reduced-motion and prefers-contrast, and testing with automated tools (axe DevTools, WAVE, Lighthouse) and real assistive technologies. The skill addresses common violations including missing alt text, poor contrast, keyboard traps, and unlabeled form inputs.

What it produces

WCAG 2.2 compliant interfaces with proper ARIA patterns, focus management, and screen reader support

See the example prompt ↗

How It Works

01
Design keyboard-first Interactions
Ensure all interactive components work without a mouse, establishing keyboard navigation before adding pointer events.

02 Find your fit

When to Use the accessibility-compliance Skill

Use the accessibility-compliance skill in Claude Code or Codex when the job is design review of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

Implementing WCAG 2.2 Level AA or AAA compliance for a web application or site
Building screen reader accessible interfaces that work with VoiceOver, NVDA, JAWS, or TalkBack
Adding keyboard navigation and focus management to interactive components
Conducting accessibility audits and fixing violations in existing interfaces
Supporting reduced motion and high contrast user preferences in the interface

03 Inside the skill

What the accessibility-compliance Skill Brings to Design Review

2 things the SKILL.md instructs Claude Code or Codex to do, in the file's own section order.

Best Practices
Prefer native elements over ARIA when possible; Include people with disabilities in user testing; Design interactions to work without a mouse
Testing Tools
axe DevTools, WAVE, Lighthouse; VoiceOver (macOS/iOS), NVDA/JAWS (Windows), TalkBack (Android); NoCoffee (vision), Silktide (various disabilities)

04 Put it to work

Install accessibility-compliance in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add accessibility-compliance to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

npx skills add https://github.com/wshobson/agents --skill accessibility-compliance

Generic skills CLI form for plugins/ui-design/skills/accessibility-compliance/SKILL.md; the repository may document its own path.

Give the Skill a First Design Review Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

Audit the [product dashboard] for WCAG 2.2 Level AA compliance. Check for missing alt text, color contrast violations, keyboard traps, and unlabeled form inputs. Implement focus management for the [modal dialog component] and add ARIA live regions to announce [real-time notification updates]. Test with VoiceOver and ensure the interface respects prefers-reduced-motion.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

Test manually with VoiceOver on macOS or iOS to verify screen reader announcements and navigation
Use vision simulators like NoCoffee and disability simulators like Silktide to test various impairments

In OpenDesign import accessibility-compliance from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
Skill file: plugins/ui-design/skills/accessibility-compliance/SKILL.md Content checksum recorded at verification; commit 4236bb9
License: MIT From LICENSE.
Repository stars: 39,635 GitHub snapshot taken 2026-09-14 for the whole wshobson/agents repository, which contains 18 skills in this catalog. Not a rating or usage count for accessibility-compliance.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

When to Use This SkillWCAG compliance, screen readers, keyboard navigation, focus management, forms, mobile accessibility, audits
Detailed patterns and worked examplesPoints to references/details.md for pattern documentation when top-level guidance is insufficient
Best PracticesEight core rules: semantic HTML, real user testing, keyboard-first, focus styles, text alternatives, zoom, live regions, preferences
Common IssuesMissing alt text, poor contrast, keyboard traps, unlabeled inputs, auto-play, bad custom controls, skip links, focus order
Testing ToolsAutomated tools (axe, WAVE, Lighthouse), manual screen readers (VoiceOver, NVDA, JAWS, TalkBack), simulators (NoCoffee, Silktide)

The Skill's Own Description

“Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences.”

Front-matter description from SKILL.md. The full file is about 2,402 characters. Read the full file on GitHub.

Accessibility Compliance

Run accessibility-compliance on a Real Design Review Task.

Download OpenDesign, import accessibility-compliance from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills