Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Accessibility Testing

A hands-on reference for wiring up axe-core, auditing against WCAG 2.2 AA, and writing keyboard, screen reader and ARIA tests.

Dev & CodingIntermediate★ 534⑂ 45AI score 7/10Last updated: Aug 8, 2026

What it does

  • Gives ready-to-paste axe-core integrations for three setups: jest-axe (component tests), @axe-core/playwright (E2E) and cypress-axe.
  • Provides a top-20 WCAG 2.2 AA violation checklist as a table: image alt text, form labels, 4.5:1 contrast, heading hierarchy, visible focus, no keyboard traps, reflow at 400% zoom, timeout warnings and more.
  • Supplies keyboard navigation test patterns in Playwright: modal tab order, focus trap plus Escape handling, skip links, and arrow-key listbox/menu interaction.
  • Includes correct ARIA markup templates for live regions (role="alert", aria-live), dialogs, tabs, comboboxes, plus the .sr-only CSS utility.
  • Adds a violation → fix comparison block, a GitHub Actions a11y workflow, contrast ratio tables and macOS VoiceOver shortcuts.

Who it's for

  • Frontend developers (React/Next.js, Vue, etc.) automating accessibility QA.
  • Teams on public-sector, fintech or edtech projects that must document WCAG AA compliance.
  • UI engineers standardising ARIA markup across a design system.
  • QA/DevOps engineers who want a11y regressions blocked on every pull request.

Usage examples

  1. "Add a jest-axe test for the LoginForm component" → produces a test file with toHaveNoViolations wired up.
  2. "Write a Playwright test that verifies this modal's focus trap and Escape behaviour" → checks tab order, focus wrap-around, and focus returning to the trigger.
  3. "Audit this page markup against WCAG AA" → flags icon-only buttons without aria-label, placeholders used as labels, and color-only error states, with fixes.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/vibeeval/vibecosystem/HEAD/skills/accessibility-testing/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/accessibility-testing folder from the GitHub repo vibeeval/vibecosystem into my ~/.claude/skills/accessibility-testing/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/vibeeval/vibecosystem.git /tmp/vibecosystem && mkdir -p ~/.claude/skills && cp -r /tmp/vibecosystem/skills/accessibility-testing ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal (Terminal on macOS/Linux, Git Bash or WSL on Windows).
  2. Clone the skill repository: git clone https://github.com/vibeeval/vibecosystem.git /tmp/vibecosystem
  3. Make sure the Claude Code skills folder exists: mkdir -p ~/.claude/skills
  4. Copy just this skill: cp -r /tmp/vibecosystem/skills/accessibility-testing ~/.claude/skills/
  5. Verify with ls ~/.claude/skills/accessibility-testing that SKILL.md is present.
  6. Restart Claude Code and try: "Use the accessibility-testing skill to audit this component."
  7. To actually run the tests, install the tooling in your project: npm i -D jest-axe @axe-core/playwright cypress-axe (pick whichever matches your test runner).
View source on GitHub ↗License: MIT