# Check Accessibility

Review component for accessibility issues

- Repository: https://github.com/AgnosticUI/agnosticui (833 stars)
- Category: Design
- License: Apache-2.0
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add AgnosticUI/agnosticui --skill check-accessibility -g -a claude-code -y`
Codex: `npx skills add AgnosticUI/agnosticui --skill check-accessibility -g -a codex -y`
Cursor: `npx skills add AgnosticUI/agnosticui --skill check-accessibility -g -a cursor -y`
Gemini CLI: `npx skills add AgnosticUI/agnosticui --skill check-accessibility -g -a gemini-cli -y`

## Description

Review component for accessibility issues

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

**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:**
1. Read `.claude/PROJECT_CONTEXT.md` for AgnosticUI structure and accessibility principles

**Process:**

2. **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

3. **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

4. **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

5. **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

6. **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

The rest: https://github.com/AgnosticUI/agnosticui/blob/HEAD/.claude/skills/check-accessibility/SKILL.md