Stats
Actions
Tags
From core
Audit TSX files for WCAG 2.1 AA accessibility compliance. Reports findings by severity with WCAG references and code fixes. Use when the user says 'a11y audit', 'accessibility check', 'check accessibility', 'WCAG audit', 'is this accessible', 'audit for screen readers', or asks about accessibility of changed or specific files.
How this skill is triggered — by the user, by Claude, or both
Slash command
/core:a11y-auditThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Audit TSX files for WCAG 2.1 AA compliance. Reports findings by severity with WCAG references and code fixes.
Audit TSX files for WCAG 2.1 AA compliance. Reports findings by severity with WCAG references and code fixes.
If the user specified files or a directory, use those. Otherwise, run these commands in order, stopping at the first that returns results:
git diff --cached --name-only --diff-filter=ACMR -- '*.tsx' (staged files)git diff --name-only --diff-filter=ACMR HEAD -- '*.tsx' (unstaged changes)Report the file list before proceeding. If more than 15 files, confirm with the user before continuing.
Check for A11Y_STANDARDS.md at the project root. If it exists, read it — those are the authoritative rules for this project and supplement the checklist below. If it doesn't exist, proceed with the built-in checklist only.
Read each TSX file in full. For every file, check against the checklist below. Note the specific line numbers of issues.
Be aware of component library primitives — libraries like @base-ui/react, @radix-ui, @headlessui, and shadcn/ui provide built-in ARIA attributes, focus management, and keyboard navigation. Do not flag issues that the primitive already handles. If unsure, read the component's import to confirm what the library provides.
Semantic Structure — WCAG 1.3.1 Info and Relationships (A)
<main>, <nav>, <header>, <section>, <article>, <aside>) over generic <div> for landmark content<ul>/<ol>/<li> for list content<section> elements have a heading or aria-label/aria-labelledbyKeyboard Accessibility — WCAG 2.1.1 Keyboard (A), 2.4.3 Focus Order (A)
tabIndex={0})tabIndex valuesImages and Icons — WCAG 1.1.1 Non-text Content (A)
aria-hidden="true" and/or alt=""alt textaria-label or visually hidden text (sr-only)Forms — WCAG 1.3.1 (A), 3.3.2 Labels or Instructions (A)
<input>, <textarea>, <select> has an associated <label> via htmlFor/idaria-describedbyrequired attribute (not just visual indicators)aria-describedbyARIA Patterns — WCAG 4.1.2 Name, Role, Value (A)
role="tablist", role="tab", role="tabpanel", aria-selectedaria-expandedrole="button" on an <a> that navigates)aria-busy="true"disabled attribute (not just visual styling)Dynamic Content — WCAG 4.1.3 Status Messages (AA)
role="alert" or use aria-live="assertive"aria-live="polite"aria-live="polite"aria-describedbyFocus Management — WCAG 2.4.7 Focus Visible (AA)
focus-visible: or focus:ring-* classes)Color and Contrast — WCAG 1.4.3 Contrast Minimum (AA), 1.4.1 Use of Color (A)
Motion — WCAG 2.3.1 Three Flashes (A)
prefers-reduced-motion media querymatchMedia('(prefers-reduced-motion: reduce)')For each issue found, output in this format:
### [SEVERITY] path/to/component.tsx:LINE
**WCAG:** 1.3.1 Info and Relationships (Level A)
**Issue:** Tab buttons use plain `<button>` without `role="tab"` or `aria-selected`
**Fix:**
```tsx
<button
role="tab"
aria-selected={activeTab === id}
onClick={() => setActiveTab(id)}
>
{label}
</button>
Group findings by file, then by severity within each file.
### Severity Definitions
- **Critical** — Blocks access for users with disabilities. Must fix before merging.
- Missing keyboard access to interactive elements
- No labels on form controls
- Missing alt text on informational images
- No focus management in modals/dialogs
- Interactive elements not reachable via keyboard
- **Important** — Significantly degrades experience. Should fix before merging.
- Missing `aria-live` regions for dynamic content
- No skip-to-content link (when layout files in scope)
- Inconsistent heading hierarchy
- No `prefers-reduced-motion` support for animations
- Form errors not linked via `aria-describedby`
- Missing tab/tablist ARIA roles on tab-like UI
- Charts without text alternatives
- **Minor** — Best-practice improvements. Fix when convenient.
- Redundant ARIA attributes
- Suboptimal semantic element choice (`<div>` where `<section>` would be better)
- Missing `aria-describedby` on help text that isn't critical
- Decorative image handling could be cleaner
### 5. Summary
End with:
| Severity | Count |
| --------- | ----- |
| Critical | N |
| Important | N |
| Minor | N |
**Verdict:**
- **PASS** — 0 Critical and 0 Important findings. Ready to commit.
- **NEEDS WORK** — 0 Critical but Important findings exist. List them. Should fix before merging.
- **FAIL** — Critical findings. List them. Must fix before merging.
### 6. Remediation
If issues are found, ask: "Would you like me to fix the Critical and Important issues now?"
If yes, fix them file by file, re-reading each file before editing. After fixes, re-run the audit on the modified files to confirm resolution.
## Notes
- This audit is **file-scoped** — it checks changed files, not the full app
- Page-level concerns (heading hierarchy across layouts + pages, skip-link presence) are checked when layout files are in scope
- Color contrast is checked heuristically against known brand token pairings, not computed programmatically
- For a **full-app audit**, specify `src/` as the target directory when prompted
- This skill complements `eslint-plugin-jsx-a11y` — ESLint catches mechanical issues at lint time; this skill provides deeper contextual analysis
npx claudepluginhub trickycdm/tricky-cc-plugins --plugin coreGuides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.