# Check Accessibility

> Check and verify accessibility compliance for Spark UI components. Use when the user wants to test accessibility, verify WCAG compliance, or fix accessibility issues. Use when this capability is needed.

- Skill: `tomevault-io/check-accessibility` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/check-accessibility`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/check-accessibility/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/check-accessibility

---


# Check Accessibility

Verify that components meet WCAG 2.1 AA accessibility standards.

## When to Use

- User wants to check accessibility
- User mentions "a11y", "accessibility", or "WCAG"
- Component has accessibility issues
- Before submitting a PR

## Instructions

1. **Automated Testing**:

   ```bash
   # Test all components
   npm run test:a11y
   
   # Test specific component(s)
   npm run test:a11y -- tabs
   npm run test:a11y -- tabs button card
   
   # Combine with Playwright options
   npm run test:a11y -- tabs --workers 1
   ```

   This runs Playwright tests with `@axe-core/playwright` for automated accessibility checks. You can test specific components by passing their names as arguments after `--`. Component names are case-insensitive and should match the keys in `e2e/a11y/routes/components.ts`.

2. **Manual Checks**:
   - Verify semantic HTML elements
   - Check ARIA attributes are correct
   - Test keyboard navigation
   - Verify focus management
   - Test with screen readers

3. **Common Accessibility Requirements**:
   - All interactive elements must be keyboard accessible
   - Proper ARIA labels and roles
   - Focus indicators visible
   - Color contrast meets WCAG AA (4.5:1 for text)
   - Semantic HTML structure

4. **Testing Tools**:
   - `@axe-core/playwright` for automated testing
   - `@testing-library/react` for unit test accessibility
   - Browser DevTools Accessibility panel
   - Screen reader testing (NVDA, JAWS, VoiceOver)

5. **Fix Issues**:
   - Add missing ARIA attributes
   - Fix keyboard navigation
   - Improve focus management
   - Fix color contrast
   - Use semantic HTML

## Standards

All components must meet WCAG 2.1 AA standards. See `.cursor/rules/accessibility-standards.md` for details.

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/leboncoin) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->