check-fix-accessibility
Installation
SKILL.md
Check and Fix Front-End Accessibility
Systematically audit and fix accessibility issues in any front-end project. Prioritize WCAG 2.2 Level A and AA unless the user specifies otherwise.
Scope
- Web (desktop + mobile web): Full scope. This skill applies to HTML/CSS/JS, React, Next.js, Vue, Angular, and other web frameworks, including responsive and PWA. Next.js: use
metadataor<Head>for page<title>; client-side navigation counts as SPA route changes — update focus/announce on route change (see Corner cases). - Native mobile apps (React Native, Swift/Kotlin, Flutter): Different APIs and patterns (e.g.
accessibilityLabel,accessibilityRole). Apply the same principles (labels, focus order, semantics) but use platform APIs. See reference.md for pointers.
Quick workflow
- Audit – Run automated checks and/or review key pages/components.
- Prioritize – Address critical (blocking) and serious issues first.
- Fix – Apply fixes following patterns below; re-check after changes.
- Verify – Confirm keyboard flow and, if possible, screen reader behavior.
Running audits
Use at least one automated tool; combine with manual review for important flows.