Skip to content
LiveNew tools this week
Submit
AIMarketly
check-accessibility logo

Check Accessibility

check-accessibility

Review component for accessibility issues

gabrielmoreira/agent-skills-mirror0installs19stars

SKILL.md

Full skill instructions

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:

  1. 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

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

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

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

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

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