Skip to content
Get packs

Guide · Agent skill

How to use the Accessibility (WCAG 2.2) agent skill

Updated · written with AI from the project's own documentation and checked against our catalogue data

The Accessibility (WCAG 2.2) skill is a set of written guidance that tells your AI agent how to design, build and review user interfaces against WCAG 2.2 Level AA for web, iOS and Android. It is written for developers, designers and reviewers who want the agent to apply specific technical patterns, such as the right ARIA roles, SwiftUI traits or Compose semantics. After this guide you will know what the skill covers, how to install it, how to ask for it in plain language, and what it cannot do.

Accessibility (WCAG 2.2)affaan-m/ECC · MIT

Quick start

  1. 1Download the ZIP. Download the accessibility skill ZIP from this page. Confirm the unzipped folder contains SKILL.md.
  2. 2Choose a location. Use ~/.claude/skills/ for all projects, or .claude/skills/ inside one project folder.
  3. 3Unzip into the skills folder. Extract the accessibility folder into the chosen skills folder so that SKILL.md sits at accessibility/SKILL.md.
  4. 4Or upload it in the Claude apps. In the Claude apps, open Settings, go to Capabilities and upload the skill under Skills.
  5. 5Ask in plain language. Describe your component or screen and mention accessibility, WCAG, contrast or screen readers.
  6. 6Check the output yourself. Verify the suggestions with an audit tool or assistive technology, since the skill gives guidance only.

What is an agent skill?

An agent skill is a folder that contains instructions the AI agent can load when a task matches them. This one is a single file, SKILL.md, which holds the rules, examples and checklist for accessibility work. Nothing runs when you install it; the agent simply reads the guidance and applies it to your request.

What the skill makes the agent do

The skill is built around the four WCAG principles: content must be perceivable, operable, understandable and robust (POUR). Within that frame, the agent checks and suggests fixes for specific WCAG 2.2 success criteria.

  • Colour contrast: normal text at 4.5:1 and large text or UI components at 3:1.
  • Target size: interactive targets of at least 24x24 CSS pixels on the web (SC 2.5.8) and 44x44pt on native platforms.
  • Focus visibility: keyboard focus indicators that are clearly visible and high contrast (SC 2.4.11).
  • Keyboard access and focus management, including trapping focus in modals and returning it to the trigger when a menu closes.
  • Single-pointer alternatives for drag actions, and reflow when text is zoomed to 400%.
  • Descriptive error messages with suggested fixes (SC 3.3.3) and avoiding asking for the same data twice (SC 3.3.7).
  • Labels and live status updates, using aria-live on the web and the equivalent traits on iOS and Android.
  • Matching attributes across platforms: aria-label, .accessibilityLabel() and contentDescription, among others.

Install the skill

Download the skill ZIP from this page and unzip it. The skill folder should contain SKILL.md. Then put the folder in one of these locations:

For all of your projects, place it in your user skills folder at ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder. Alternatively, in the Claude apps, open Settings, go to Capabilities and upload the skill under Skills.

~/.claude/skills/accessibility/SKILL.md

How to trigger the skill with natural requests

You do not need a special command. Describe the UI task in plain language that mentions accessibility, WCAG, screen readers, contrast, focus or VoiceOver/TalkBack, and the agent can apply the skill. The source lists these typical situations: defining specs for a web, iOS or Android component, auditing existing code for barriers or compliance gaps, implementing a new WCAG 2.2 criterion such as Target Size or Focus Appearance, and mapping design requirements to technical attributes.

  • Review this login form for WCAG 2.2 AA issues, especially labels and error messages.
  • Make this icon-only delete button accessible in SwiftUI with VoiceOver labels and hints.
  • Add TalkBack support to this Compose toggle and suggest the right semantics.
  • Give me a short WCAG 2.2 checklist for this settings screen.

What the skill is not

The skill is a checklist and reference of technical patterns. It contains no scripts, scanners or test tools, so it cannot test a live page or prove that a site passes WCAG 2.2. Legal sign-off or certified compliance needs an expert audit, and real users should test with assistive technology. The skill's own guidance says it does not replace either of these.

  • The skill file is written in Japanese, so prompts in English still work, but the reference text is Japanese.
  • It lists no requirements and needs no network access.
  • It runs no scripts.

Tips for getting useful results

Give the agent the actual code or a description of the component, its states and its platform. The skill's cross-platform table maps each concept to web, SwiftUI and Compose equivalents, so naming the platform helps the agent pick the correct attribute. For reviews, ask for a checklist against the skill's best-practice list so you can work through it item by item.

Use the related skills in the same directory when they fit: frontend-patterns, design-system, liquid-glass-design and swiftui-patterns.

What people use it for

  • Specifying an accessible web component, such as a search form with a labelled input and an icon button.
  • Adding VoiceOver labels, hints and traits to a SwiftUI icon-only button.
  • Adding TalkBack-readable semantics to a Compose switch.
  • Reviewing a form for error suggestions, redundant entry and focus visibility before release.
  • Producing a WCAG 2.2 AA checklist for a designer to walk through with a team.

Frequently asked questions

Is the WCAG 2.2 accessibility skill free?

The source is published under the MIT licence, which is stated on this page. The skill itself is a single SKILL.md file with no listed costs or requirements.

What do I need to use the accessibility skill?

The source lists no requirements. You need an agent environment that supports skills, such as Claude, and either the ~/.claude/skills/ folder or the Skills upload in the Claude apps.

How do I install the accessibility agent skill?

Download the ZIP from this page, unzip it, and place the accessibility folder in ~/.claude/skills/ or a project's .claude/skills/ folder. You can also upload it in the Claude apps under Settings, Capabilities, Skills.

Does the skill test my website for accessibility?

No. It contains no scripts or scanners and cannot prove a site passes WCAG 2.2. Use it for guidance and checklists, then verify with an expert audit and testing with assistive technology.

Does it cover iOS and Android as well as the web?

Yes. It covers web (ARIA and HTML), iOS (SwiftUI accessibility traits and labels) and Android (Compose semantics and content descriptions), with a cross-platform mapping table.

How is this different from an automated accessibility checker?

A checker scans pages and reports issues. This skill is a reference of WCAG 2.2 patterns and a checklist that the agent applies while you design, build or review. It does not scan anything.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use this skill if you are a front-end, mobile or design practitioner who wants an agent to apply concrete WCAG 2.2 AA patterns and attributes while you build or review UI. Pick a dedicated audit service or automated scanner if you need certified compliance, legal sign-off or proof that a real site passes.

Download the skill