accessibility-check
Run accessibility audit on frontend components for WCAG 2.1 AA compliance
Best use case
accessibility-check is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Run accessibility audit on frontend components for WCAG 2.1 AA compliance
Teams using accessibility-check should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/accessibility-check/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How accessibility-check Compares
| Feature / Agent | accessibility-check | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Run accessibility audit on frontend components for WCAG 2.1 AA compliance
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Accessibility Check Perform a WCAG 2.1 AA compliance audit on frontend components. ## Audit Areas ### 1. Keyboard Navigation - All interactive elements must be focusable - Tab order must be logical - No keyboard traps - Visible focus indicators (use `.focus-ring`) ### 2. Screen Reader Support Search for issues: ```bash # Icon-only buttons missing aria-label grep -rE "<Button[^>]*>[^<]*<svg" frontend/src/components/ --include="*.tsx" | grep -v "aria-label" # Images missing alt text grep -r "<img" frontend/src/components/ --include="*.tsx" | grep -v "alt=" # Missing form labels grep -rE "<input[^>]*>" frontend/src/components/ --include="*.tsx" | grep -v "aria-label\|id.*label" ``` ### 3. Color Contrast Pierre design system colors meet contrast requirements: - `pierre-gray-900` on white: 15.3:1 ✓ - `pierre-gray-700` on white: 8.5:1 ✓ - `pierre-gray-500` on white: 4.6:1 ✓ (minimum for large text) - `pierre-violet` on white: 5.7:1 ✓ **Flag if using**: - `pierre-gray-400` for body text (3.0:1 - FAILS) - Light colors on light backgrounds - Custom colors not in design system ### 4. Touch Targets - Minimum 44x44px for touch targets - Check Button `size="sm"` usage - ensure adequate padding ### 5. Motion & Animation - Respect `prefers-reduced-motion` - No auto-playing animations that distract ## Output Format ``` === Accessibility Audit Report === 📁 Files Analyzed: [count] == Keyboard Navigation == ✅/❌ Focus indicators: [details] ✅/❌ Tab order: [details] == Screen Reader == ✅/❌ Icon buttons: [count with aria-label / count missing] ✅/❌ Images: [count with alt / count missing] ✅/❌ Form labels: [details] == Color Contrast == ✅/❌ Text contrast: [details] ✅/❌ Interactive elements: [details] == Touch Targets == ✅/❌ Minimum size: [details] == Issues Found == [CRITICAL] [file:line] - [issue] [MAJOR] [file:line] - [issue] [MINOR] [file:line] - [issue] == Fixes Required == 1. [specific fix with code example] == Verdict == [PASS / NEEDS WORK - X critical, Y major, Z minor issues] ``` ## WCAG Quick Reference | Criteria | Requirement | |----------|-------------| | 1.1.1 | Non-text content has text alternative | | 1.4.3 | Contrast ratio 4.5:1 (text) | | 2.1.1 | All functionality keyboard accessible | | 2.4.7 | Focus visible | | 4.1.2 | Name, Role, Value for UI components |
Related Skills
adr-check
Validate code changes against Architecture Decision Records (ADRs)
add-strict-checks
Enable stricter TypeScript and linting checks to catch bugs early, especially useful when iterating with AI assistance.
add-check
Add a new code quality check to CI, justfile, and pre-commit hooks. Use when adding linters, formatters, type checkers, or other code quality tools to the project.
accessibility
Build WCAG 2.1 AA compliant websites with semantic HTML, proper ARIA, focus management, and screen reader support. Includes color contrast (4.5:1 text), keyboard navigation, form labels, and live regions. Use when implementing accessible interfaces, fixing screen reader issues, keyboard navigation, or troubleshooting "focus outline missing", "aria-label required", "insufficient contrast".
accessibility-wcag
Build accessible web applications following WCAG 2.1/2.2 guidelines with proper semantic HTML, ARIA attributes, keyboard navigation, screen reader support, and inclusive design. Use when implementing ARIA labels and roles, ensuring keyboard navigation, supporting screen readers, providing text alternatives for images, managing focus, creating accessible forms, building inclusive UI components, testing with accessibility tools, meeting WCAG compliance levels, or designing for users with disabilities.
accessibility-validation
Validate digital outputs for compliance with accessibility standards (e.g., WCAG, Section 508). Use when reviewing reports, dashboards, documents, or interfaces from pilot projects to identify and remediate accessibility barriers.
accessibility-ux-audit
Audit and enhance accessibility and UX across all pages and components.
accessibility-testing
WCAG 2.2 compliance testing, screen reader validation, and inclusive design verification. Use when ensuring legal compliance (ADA, Section 508), testing for disabilities, or building accessible applications for 1 billion disabled users globally.
accessibility-tester
Expert accessibility tester specializing in WCAG compliance, inclusive design, and universal access. Masters screen reader compatibility, keyboard navigation, and assistive technology integration with focus on creating barrier-free digital experiences.
accessibility-test-axe
Эксперт по a11y тестированию. Используй для axe-core, automated testing и accessibility audits.
accessibility-standards
Implement WCAG 2.1 accessibility standards for Vue 3 apps. Use when adding ARIA labels, keyboard navigation, screen reader support, or checking color contrast. Mentions "accessibility", "ARIA", "keyboard nav", "screen reader", or "color contrast".
accessibility-rules
Concise accessibility checklist and practices for components in the repository. Use when implementing UI to ensure keyboard, screen reader, and focus semantics.