accessibility-complianceby Seth Hobson

Accessibility Compliance Skill.

A skill for reviewing and improving interfaces against WCAG 2.2 guidance, including mobile accessibility and assistive-technology checks.

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 guides accessibility work against WCAG 2.2, covering semantic HTML, ARIA patterns, keyboard navigation, focus management, screen reader support, and dynamic content announcements. It names iOS VoiceOver, Android TalkBack, NVDA and JAWS as manual testing tools; using the skill is not proof that an interface conforms.

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

Interface changes addressing the requested accessibility issues, to be checked with automated tools, keyboard interaction and assistive technologies.

See the example prompt ↗

How It Works

01
Design keyboard-first Interactions
Design the interaction to work without a mouse, then check focus order and whether users can enter and leave each component.

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

Know the Boundaries

These are implementation and testing guidelines, not a conformance certificate. The source calls for both automated checks and testing with real users and assistive technologies.

What to Provide

Interface and Accessibility TaskShare the page or component to change and identify the problem: for example, keyboard navigation, an unlabeled form or a screen reader announcement.

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.

Editorial starter example based on the source workflow; not a recorded run.

Check the First Result

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

Tab through the affected interaction and check focus visibility, order and escape from components.
Check labels and dynamic announcements with a screen reader available on your target platform.
Combine automated findings with manual checks; include people with disabilities in user testing where possible.

In OpenDesign check your installed version’s skill list and supported tools. If this skill is absent, consult the current import guide and the upstream setup instructions. The source review is not a live compatibility test.

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.

Start with the example task above, supply the listed inputs and check the required tools. Review the output against the checklist before using it in a project.

Download OpenDesign Browse all skills