🎨 Frontend Engineering · Accessibility

Run a practical accessibility audit pass

Combine automated scans with keyboard and screen-reader passes to find issues tools miss.

intermediate~40 minFrontend EngineersFull-Stack DevelopersDesign Engineers

Steps

1Automate first: axe scan on key routes, triage all criticals
2Unplug the mouse: complete every core flow keyboard-only
3Listen once with a screen reader through signup and checkout
4Check focus visibility, order, and trap-free modals manually
5Verify contrast against actual rendered colors including disabled states
6File findings with WCAG criterion references and own fixes within sprint

Common Pitfalls

▲Trusting automated score as proof of compliance
▲outline:none without a visible replacement

Success Signals

✓Zero critical axe issues
✓All flows completable keyboard-only

Commands

Install with skills CLI

$ npx skills add aniruddhaadak80/skills --skill accessibility-a11y-audit-pass

Install globally

$ npx skills add aniruddhaadak80/skills --skill accessibility-a11y-audit-pass -g

Tags

#a11y#wcag#testing#frontend-engineering#accessibility

Install this skill

$ npx skills add aniruddhaadak80/skills --skill accessibility-a11y-audit-pass -a opencode

SKILL.md

# Run a practical accessibility audit pass

> Combine automated scans with keyboard and screen-reader passes to find issues tools miss.

## When to Use This Skill

Combine automated scans with keyboard and screen-reader passes to find issues tools miss.

## Steps

1. Automate first: axe scan on key routes, triage all criticals
2. Unplug the mouse: complete every core flow keyboard-only
3. Listen once with a screen reader through signup and checkout
4. Check focus visibility, order, and trap-free modals manually
5. Verify contrast against actual rendered colors including disabled states
6. File findings with WCAG criterion references and own fixes within sprint

## Common Pitfalls

- Trusting automated score as proof of compliance
- outline:none without a visible replacement

View source on GitHub ↗

Native elements carry behavior and semantics for free; ARIA is the fallback, not the default.

🎨 Frontend Engineering·~25m

Open →