How do I install the Accessibility Design Checker skill?

Run npx skillmds@latest add tomevault-io/accessibility-design-checker in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Accessibility Design Checker safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Accessibility Design Checker?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Accessibility Design Checker free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Accessibility Design Checker?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Accessibility Design Checker by tomevault-io

Name: Accessibility Design Checker
Author: tomevault-io

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. Use when this capability is needed.

tomevault-io Updated Sep 17, 2026

File contents

Accessibility Design Checker Skill

Instructions

Review design specifications for accessibility
Check color contrast ratios
Verify keyboard navigation support
Check screen reader compatibility
Review focus management
Verify touch target sizes
Return accessibility review with:
- Accessibility compliance status
- Issues found
- Recommendations
- WCAG level compliance

Examples

Input: Review design for accessibility Output:

### 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

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: accessibility-design-checkerdescription: 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. Use when this capability is needed.---# Accessibility Design Checker Skill## Instructions1. Review design specifications for accessibility2. Check color contrast ratios3. Verify keyboard navigation support4. Check screen reader compatibility5. Review focus management6. Verify touch target sizes7. 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---> Converted and distributed by [TomeVault](https://tomevault.io/claim/lexicalninja) — claim your Tome and manage your conversions.

Frequently asked questions