Accessibility Auditor

Accessibility Auditor

Scan web application source code for WCAG 2.1 accessibility violations and produce a prioritized remediation report.

Workflow

1. Discover UI components and templates

Find all files containing HTML, JSX, TSX, Vue, Svelte: ``bash find . -maxdepth 5 \( -name "*.tsx" -o -name "*.jsx" -o -name "*.vue" -o -name "*.svelte" -o -name "*.html" \) -not -path "*/node_modules/*" -not -path "*/.next/*" | head -100 `` Prioritize: layouts, navigation, forms, interactive widgets, media components.

1. Check images and media (WCAG 1.1.1)

• ` without alt` — Critical
• Icon-only buttons without accessible labels — Critical
• SVG without role="img" and aria-label — Major
• `/` without captions — Major

1. Check semantic HTML (WCAG 1.3.1)

• ` instead of ` — Critical
• Missing landmark elements (`, , `)
• Heading levels that skip (h1 → h3)
• Inputs without associated ``

1. Check ARIA usage (WCAG 4.1.2)

• Interactive elements without accessible names
• aria-hidden="true" on focusable elements — Critical
• Missing roles on custom widgets (tabs, dialogs, accordions)
• Missing state attributes (aria-expanded, aria-selected)

1. Check keyboard navigation (WCAG 2.1.1)

• Custom controls without tabIndex
• Missing onKeyDown handlers on custom interactive elements
• outline: none without replacement focus style
• Keyboard traps in modals

1. Check focus management (WCAG 2.4.3)

• Modals without focus trapping
• Missing skip navigation link
• Route changes without focus management

1. Check color contrast (WCAG 1.4.3)

• Low-contrast text/background combinations
• Information conveyed by color alone
• Common Tailwind pitfalls: text-gray-400 on bg-white = 2.7:1 (fails AA)

1. Check forms (WCAG 3.3.1)

• Inputs without labels
• Placeholder as only label — Major
• Error messages not linked via aria-describedby

1. Generate the audit report by severity:

Critical — Blocks assistive technology access Major — Significant barriers Minor — Improvement opportunities

Each finding: file:line, WCAG criterion, current code, fixed code, who is affected.

Rules

• Always reference specific WCAG 2.1 success criteria by number
• Provide before/after code snippets for every finding
• Distinguish decorative images (alt="" is correct) from informative ones
• Check both JSX and CSS files
• Prioritize critical issues over minor improvements
• Note which user groups are affected per finding

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: sourav15mukherjee
• Source: sourav15mukherjee/skillforge-free-skills
• License: MIT

Install and usage instructions live in the source repository linked above.