accessibility-design-checker
Ensures designs meet accessibility requirements including WCAG compliance, color contrast, keyboard navigation, screen reader support, and focus management. Reviews designs for accessibility issues and provides recommendations.
Best use case
accessibility-design-checker is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Ensures designs meet accessibility requirements including WCAG compliance, color contrast, keyboard navigation, screen reader support, and focus management. Reviews designs for accessibility issues and provides recommendations.
Teams using accessibility-design-checker 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-design-checker/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How accessibility-design-checker Compares
| Feature / Agent | accessibility-design-checker | 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?
Ensures designs meet accessibility requirements including WCAG compliance, color contrast, keyboard navigation, screen reader support, and focus management. Reviews designs for accessibility issues and provides recommendations.
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 Design Checker Skill ## Instructions 1. Review design specifications for accessibility 2. Check color contrast ratios 3. Verify keyboard navigation support 4. Check screen reader compatibility 5. Review focus management 6. Verify touch target sizes 7. Return accessibility review with: - Accessibility compliance status - Issues found - Recommendations - WCAG level compliance ## Examples **Input:** Review design for accessibility **Output:** ```markdown ### Accessibility Review **Overall Compliance:** WCAG 2.1 Level AA ✓ **Color Contrast:** - Primary text on white: 4.5:1 ✓ (WCAG AA) - Secondary text on white: 4.2:1 ✗ (needs improvement) - Large text on primary: 3.1:1 ✓ (WCAG AA) - Recommendation: Increase secondary text contrast to 4.5:1 **Keyboard Navigation:** - All interactive elements keyboard accessible ✓ - Focus indicators visible ✓ - Tab order logical ✓ - Skip links present ✓ **Screen Reader Support:** - Semantic HTML structure ✓ - ARIA labels where needed ✓ - Alt text for images ✓ - Form labels properly associated ✓ **Touch Targets:** - All interactive elements ≥ 44x44px ✓ - Adequate spacing between touch targets ✓ **Text Resizing:** - Design works at 200% zoom ✓ - No horizontal scrolling required ✓ **Issues Found:** 1. Secondary text contrast below 4.5:1 (should be improved) 2. Missing ARIA label on icon-only button (needs label) **Recommendations:** - Increase secondary text color darkness - Add aria-label="Close" to icon button ``` ## Accessibility Areas to Check - **Color Contrast**: Text/background contrast ratios (WCAG AA: 4.5:1) - **Keyboard Navigation**: All interactive elements keyboard accessible - **Focus Indicators**: Visible focus states - **Screen Reader Support**: Semantic HTML, ARIA labels, alt text - **Touch Targets**: Minimum 44x44px for mobile - **Text Resizing**: Works at 200% zoom - **Reading Order**: Logical content order - **Form Labels**: Properly associated labels - **Error Messages**: Accessible error communication - **Skip Links**: Skip navigation links ## WCAG Compliance Levels - **Level A**: Basic accessibility (minimum) - **Level AA**: Standard compliance (recommended) - **Level AAA**: Enhanced accessibility (ideal) ## Common Issues - **Low Contrast**: Text/background contrast too low - **Missing Alt Text**: Images without descriptive alt text - **Missing Labels**: Form inputs without labels - **Small Touch Targets**: Interactive elements too small - **No Focus Indicators**: Missing visible focus states - **Poor Semantic Structure**: Incorrect HTML structure - **Keyboard Traps**: Elements that trap keyboard focus
Related Skills
Advanced Modular Library Design
Design modular libraries with clear package boundaries, feature-first organization, and clean API surfaces. Use when structuring monorepos, defining module boundaries, or designing library APIs.
admin-design
Minimal, high-clarity admin UI design for this repo. Use when redesigning /admin pages (translation manager, dashboards, tables, forms), defining admin design tokens, or improving admin UX/keyboard workflows without changing core functionality.
adhd-design-expert
Designs digital experiences for ADHD brains using neuroscience research and UX principles. Expert in reducing cognitive load, time blindness solutions, dopamine-driven engagement, and compassionate design patterns. Activate on 'ADHD design', 'cognitive load', 'accessibility', 'neurodivergent UX', 'time blindness', 'dopamine-driven', 'executive function'. NOT for general accessibility (WCAG only), neurotypical UX design, or simple UI styling without ADHD context.
actionable-alerting-runbook-design
Designing effective alerts and runbooks for incident response. PROACTIVELY activate for: (1) Creating alerting rules, (2) Writing runbooks, (3) Reducing alert fatigue, (4) On-call escalation setup, (5) Incident response procedures. Triggers: "alerting", "runbook", "on-call", "pagerduty", "incident", "alert fatigue", "escalation", "playbook"
action-mapping-designer
This skill should be used when ensuring training focuses on performance outcomes and business impact. Use this skill to identify essential content, design performance-focused activities, create job aids, and eliminate unnecessary training.
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.