check-accessibility

为 Spark UI 组件新建完整文件结构，包括组件代码、样式表、测试用例、故事场景与详细文档。适用于用户希望创建新组件，或为设计系统新增组件时。

SKILL.md

--- frontmatter

name: check-accessibility
description: Check and verify accessibility compliance for Spark UI components. Use when the user wants to test accessibility, verify WCAG compliance, or fix accessibility issues.

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

•
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.
•
Manual Checks:
- •Verify semantic HTML elements
- •Check ARIA attributes are correct
- •Test keyboard navigation
- •Verify focus management
- •Test with screen readers
•
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
•
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)
•
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.