check-accessibility
An accessibility audit tool that evaluates UI components against WCAG 2.2 standards.
Install
mkdir -p .claude/skills/check-accessibility && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/3650" && unzip -o skill.zip -d .claude/skills/check-accessibility && rm skill.zipInstalls to .claude/skills/check-accessibility
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Review component for accessibility issuesKey capabilities
- →Validate semantic HTML structure for accessibility
- →Audit ARIA attribute usage and compliance
- →Test keyboard tab order and focus management
- →Verify color contrast and touch target size
- →Check motion and animation accessibility
How it works
Maps local component structure against W3C WCAG guidelines using automated standard fetching and manual analysis.
Inputs & outputs
When to use check-accessibility
- →Check component accessibility
- →Verify WCAG compliance
- →Validate ARIA attributes
- →Test keyboard navigation
About this skill
Usage: /check-accessibility COMPONENT_NAME
Examples:
/check-accessibility button/check-accessibility alert/check-accessibility v2/lib/src/components/Button.ts
Check accessibility for: $ARGUMENTS
Setup:
- Read
.claude/PROJECT_CONTEXT.mdfor AgnosticUI structure and accessibility principles
Process:
-
Search for latest standards:
- Use WebSearch for "WCAG 2.2 [component-type] accessibility"
- Use WebSearch for "ARIA [specific-pattern] best practices"
- Fetch W3C WAI-ARIA documentation if needed for specific patterns
-
Locate component files:
- Core component:
v2/lib/src/components/$ARGUMENTS* - Framework implementations if relevant:
v2/playgrounds/*/src/stories/*$ARGUMENTS* - Check PROJECT_CONTEXT for AgnosticUI's accessibility standards location
- Core component:
-
Analyze against current standards:
- Semantic HTML: Proper element usage for meaning and structure
- ARIA attributes: Correct, necessary, and following latest specs
- Keyboard navigation: Tab order, focus management, keyboard shortcuts
- Focus indicators: Visible focus styles meeting contrast requirements
- Screen reader support: Meaningful labels, descriptions, live regions
- Color contrast: WCAG 2.2 AA requirements (4.5:1 text, 3:1 UI)
- Touch targets: Minimum 44x44px for interactive elements
- Motion/animation: Respects prefers-reduced-motion
-
Framework-specific considerations:
- Check if accessibility differs across Lit, React, Vue implementations
- Verify ARIA is applied correctly in each framework's rendering
- Test that events work with keyboard in all frameworks
-
Report findings:
- List issues with severity (Critical/High/Medium/Low)
- Reference specific WCAG 2.2 success criteria
- Provide remediation steps with code examples
- Link to current W3C/MDN documentation
- Note AgnosticUI-specific patterns to follow
-
If fixes requested:
- Propose changes that work across all frameworks
- Ensure fixes align with AgnosticUI's CSS-first approach
- WAIT FOR USER APPROVAL before implementing
AgnosticUI Accessibility Requirements:
- WCAG 2.1 AA compliance minimum
- Framework-agnostic solutions preferred
- CSS custom properties for focus indicators
- Consistent behavior across Lit, React, Vue
When not to use it
- →When analyzing non-UI code (e.g., CLI tools)
- →If the target library has no visual elements
Prerequisites
Limitations
- →Remediation requires manual developer intervention
- →Cannot fully verify screen reader behavior
How it compares
It is specifically tuned to project-specific design standards like AgnosticUI rather than general-purpose checkers.
Compared to similar skills
check-accessibility side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| check-accessibility (this skill) | 1 | 6mo | No flags | Intermediate |
| roier-seo | 4 | 6mo | Review | Intermediate |
| a11y-audit | 0 | 4mo | Review | Intermediate |
| init | 1 | 5mo | Review | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by AgnosticUI
View all by AgnosticUI →You might also like
roier-seo
davila7
Technical SEO auditor and fixer. Runs Lighthouse/PageSpeed audits on websites or local dev servers, analyzes SEO/performance/accessibility scores, and automatically implements fixes for meta tags, structured data, Core Web Vitals, and accessibility issues.
a11y-audit
jarbitechture
Accessibility audit skill for scanning, fixing, and verifying WCAG 2.2 Level A and AA compliance across React, Next.js, Vue, Angular, Svelte, and plain HTML codebases. Use when auditing accessibility, fixing a11y violations, checking color contrast, generating compliance reports, or integrating acce
init
alirezarezvani
Set up Playwright in a project. Use when user says "set up playwright", "add e2e tests", "configure playwright", "testing setup", "init playwright", or "add test infrastructure".
frontend-developer
bonnguyenitc
Use when building web UI, designing component architecture, or reviewing frontend code — regardless of framework (React, Vue, Svelte, etc.)
ui-ux-expert-skill
fercracix33
Technical workflow for implementing accessible React user interfaces with shadcn/ui, Tailwind CSS, and TanStack Query. Includes 6-phase process with mandatory Style Guide compliance, Context7 best practices consultation, Chrome DevTools validation, and WCAG 2.1 AA accessibility standards. Use after Test Agent, Implementer, and Supabase agents complete their work.
ui-testing
alinaqi
Visual testing - catch invisible buttons, broken layouts, contrast