a11y-checker

Accessibility Checker Skill

This skill performs comprehensive CSS accessibility audits based on WCAG 2.2 guidelines. I'll identify issues and provide specific, actionable fixes to make your styles more accessible.

What I Check

Visual Accessibility

• Color contrast ratios (text, UI components)
• Text sizing and readability
• Focus indicators
• Visual hierarchy
• Spacing and target sizes

Motion & Animation

• Reduced motion support
• Animation safety (no seizure triggers)
• Auto-playing content
• Parallax effects

Interaction

• Keyboard navigation
• Focus management
• Interactive element states
• Touch target sizes

Screen Readers

• Visually hidden but accessible content
• Display/visibility usage
• Content order
• Skip links

WCAG 2.2 Guidelines I Follow

Level A (Must Have)

• 1.4.1: Color not sole indicator
• 2.1.1: Keyboard accessible
• 2.4.1: Skip navigation
• 3.2.1: Consistent on focus

Level AA (Should Have)

• 1.4.3: Contrast minimum (4.5:1)
• 1.4.11: Non-text contrast (3:1)
• 2.4.7: Focus visible
• 2.5.5: Target size (44x44px)

Level AAA (Best Practice)

• 1.4.6: Contrast enhanced (7:1)
• 1.4.8: Visual presentation
• 2.4.8: Location indication

Common Issues & Fixes

1. Missing Focus Indicators

❌ Problem

/* Removes default focus outline */
button:focus {
  outline: none;
}

/* No visible focus indicator */
.link:focus {
  text-decoration: underline;
}

✓ Solution

/* Clear, visible focus indicator */
button:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* High contrast focus ring */
.link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  text-decoration: underline;
}

/* Fallback for browsers without :focus-visible */
button:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

button:focus:not(:focus-visible) {
  outline: none;
}

2. Insufficient Color Contrast

❌ Problem

/* 2.85:1 contrast - fails AA */
.text-muted {
  color: #999999;
  background: #ffffff;
}

/* 3.2:1 contrast - fails AA for normal text */
.button {
  color: #3b82f6;
  background: #ffffff;
}