accessibility-checklist
When building UI components, forms, or any user-facing interface. Check before every frontend PR.
When & Why to Use This Skill
This Claude skill provides a comprehensive accessibility (A11y) checklist based on WCAG 2.2 and MDN standards to ensure web interfaces are inclusive and compliant. It helps developers and QA engineers validate keyboard navigation, screen reader support, ARIA implementation, and visual contrast during the frontend development and code review process, reducing the risk of accessibility regressions.
Use Cases
- Pre-PR Validation: Use the checklist to systematically verify UI components before submitting a pull request to ensure they meet global accessibility standards.
- Component Library Development: Audit reusable UI elements like buttons, forms, and modals for proper ARIA labels, focus management, and touch target sizes.
- Accessibility Auditing: Identify and remediate common anti-patterns such as color-only indicators, missing form labels, or keyboard traps in existing web applications.
- Inclusive Design Implementation: Ensure full screen reader compatibility and respect for user preferences like 'prefers-reduced-motion' for complex interactive interfaces.
| name | accessibility-checklist |
|---|---|
| description | When building UI components, forms, or any user-facing interface. Check before every frontend PR. |
| version | 1.1.0 |
| tokens | ~450 |
| confidence | high |
| - https | //developer.mozilla.org/en-US/docs/Web/Accessibility |
| last_validated | 2025-12-10 |
| next_review | 2025-12-24 |
| tags | [accessibility, a11y, frontend, ux] |
When to Use
When building UI components, forms, or any user-facing interface. Check before every frontend PR.
Patterns
Keyboard Navigation
<!-- All interactive elements focusable -->
<button>Click me</button> <!-- ✅ Naturally focusable -->
<div role="button" tabindex="0">Click me</div> <!-- ✅ Made focusable -->
<!-- Focus visible and not obscured (WCAG 2.2) -->
button:focus { outline: 2px solid blue; }
Screen Reader Support
<!-- Images -->
<img src="chart.png" alt="Sales increased 20% in Q4" />
<img src="decoration.png" alt="" /> <!-- Decorative: empty alt -->
<!-- Form labels -->
<label for="email">Email</label>
<input id="email" type="email" aria-required="true" />
<!-- Dynamic content -->
<div aria-live="polite" aria-busy="false">Loading complete</div>
ARIA Essentials
<!-- Button without text -->
<button aria-label="Close dialog"><svg>...</svg></button>
<!-- Expanded/collapsed -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<!-- Modal -->
<div role="dialog" aria-modal="true" aria-labelledby="title">
Anti-Patterns
- Color-only indicators (add icons/text)
- Missing form labels (placeholder is NOT a label)
- Tiny touch targets (<44x44px)
- Keyboard traps (can't escape with Tab/Escape)
- Auto-playing media without controls
- Focus obscured by sticky headers/modals
Verification Checklist
- All interactive elements reachable via Tab
- Focus indicator visible on all focusables
- Focus not obscured by sticky content (WCAG 2.2)
- Images have meaningful alt (or alt="" if decorative)
- Form inputs have associated labels
- Color contrast ≥4.5:1 (text) / ≥3:1 (large text)
- Touch targets ≥44x44px
-
prefers-reduced-motionrespected - No cognitive tests for auth (avoid CAPTCHAs)