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
ai-product-evaluation-design
Transition from traditional PRDs to "Evals" (evaluations) to guide AI model behavior. Use this skill when launching new AI features, debugging unpredictable model outputs, or moving from a prompted prototype to a production-ready agent.
ai-npc-dialogue-designer
Design AI-powered immersive NPC systems for escape room games using proven actor techniques from Korean immersive escape rooms (Danpyeonsun, Ledasquare). Implements adaptive dialogue, emotional simulation, player profiling, and trust dynamics using Gemini/GPT-4. Creates character profiles with lying probabilities, improvisational responses, and cost-optimized streaming. Use for murder mystery NPCs, suspect interrogation, or dynamic character interactions.
ai-eval-design-and-iteration
Develop "quizzes" (evals) to measure model performance on specific tasks. Use these benchmarks to guide fine-tuning, determine product UX patterns, and track performance improvements over time. Use this when launching a new AI feature, switching between model versions, or optimizing for high-stakes accuracy.
ahu-design
Air Handler Configuration & Sizing Agent
agent-ui-designer
Expert visual designer specializing in creating intuitive, beautiful, and accessible user interfaces. Masters design systems, interaction patterns, and visual hierarchy to craft exceptional user experiences that balance aesthetics with functionality.
advanced-ssr-cache-design
Engineer SSR caching strategies that preserve correctness under concurrent updates and streaming.
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.
accessibility-testing
Guide for conducting comprehensive accessibility audits of code to identify WCAG compliance issues and barriers to inclusive design. This skill should be used when reviewing accessibility, ARIA implementation, keyboard navigation, or screen reader compatibility.
accessibility
Quality assurance for web accessibility and usability, particularly for users with disabilities. Use when involved in any web project.
accessibility-ux-audit
Audit and enhance accessibility and UX across all pages and components.
accessibility-rules
Concise accessibility checklist and practices for components in the repository. Use when implementing UI to ensure keyboard, screen reader, and focus semantics.