Website Accessibility Checker
Run a comprehensive WCAG 2.2 accessibility checker directly in your AI coding assistant. Test color contrast ratios (4.5:1 minimum for AA), image alt text validation, keyboard navigation, ARIA attributes, form labels, focus management, and semantic HTML. Get detailed fix recommendations for ADA compliance.
Install and use:
curl -fsSL https://suparank.io/install | bash /suparank-a11y What It Checks
Image Accessibility
Alt text validation, decorative image handling, SVG accessibility
Color Contrast
4.5:1 for normal text, 3:1 for large text and UI components
Keyboard Navigation
Focus order, keyboard traps, focus visibility, skip links
Form Accessibility
Input labels, error identification, instructions, validation
ARIA Validation
Name, role, value checks, valid ARIA attributes and roles
Semantic HTML
Heading hierarchy, landmark regions, proper element usage
Touch Targets
Minimum 44x44px tap targets for mobile accessibility
Status Messages
Live regions for dynamic content updates
Example Output
═══════════════════════════════════════════════════════════════════
SUPARANK ACCESSIBILITY AUDIT
═══════════════════════════════════════════════════════════════════
File: src/components/ContactForm.tsx
Standard: WCAG 2.2 Level AA
COMPLIANCE SCORE: 73% (Partial)
───────────────────────────────────────────────────────────────────
CRITICAL (Must Fix) - 3 issues
───────────────────────────────────────────────────────────────────
[A11Y] Line 24: Image missing alt text
<img src="hero.jpg">
Fix: Add alt="Description of image content"
WCAG: 1.1.1 Non-text Content
[A11Y] Line 56: Button has no accessible name
<button><CloseIcon /></button>
Fix: Add aria-label="Close dialog"
WCAG: 4.1.2 Name, Role, Value
[A11Y] Line 89: Form input missing label
<input type="email" placeholder="Email">
Fix: Add <label htmlFor="email">Email</label>
WCAG: 1.3.1 Info and Relationships
───────────────────────────────────────────────────────────────────
SERIOUS (Should Fix) - 2 issues
───────────────────────────────────────────────────────────────────
[A11Y] Line 34: Focus outline removed
.btn { outline: none; }
Fix: Add :focus-visible { outline: 2px solid var(--focus); }
WCAG: 2.4.7 Focus Visible
[A11Y] Line 112: Color contrast insufficient (2.8:1)
Element: .text-gray-400 on white background
Fix: Use text-gray-600 or darker (4.5:1 ratio)
WCAG: 1.4.3 Contrast (Minimum)
───────────────────────────────────────────────────────────────────
PASSED CHECKS (25)
───────────────────────────────────────────────────────────────────
✓ [3.1.1] Page has lang attribute
✓ [2.4.2] Page has descriptive title
✓ [1.3.1] Heading hierarchy correct
✓ [2.1.2] No keyboard traps detected
...
═══════════════════════════════════════════════════════════════════ Frequently Asked Questions
What is WCAG 2.2 Level AA compliance?
WCAG 2.2 Level AA is the internationally recognized standard for web accessibility, required by ADA, Section 508, and EN 301 549. It includes criteria for perceivable, operable, understandable, and robust content. Level AA is the legal standard for most government and commercial websites.
How do I check color contrast ratio for accessibility?
This tool automatically analyzes your CSS to calculate contrast ratios between text and background colors. WCAG 2.2 requires a minimum 4.5:1 ratio for normal text and 3:1 for large text (18pt+ or 14pt+ bold) and UI components. The checker flags any combinations that fail these thresholds and suggests compliant alternatives.
What alt text is required for WCAG compliance?
Every meaningful image must have descriptive alt text (WCAG 1.1.1). Decorative images should have empty alt="" attributes. Alt text should describe the image's purpose or content, not just say "image of". This tool checks for missing alt attributes and flags generic phrases like "image" or "picture".
How do I test keyboard navigation accessibility?
The checker validates that all interactive elements are keyboard accessible, focus order is logical, focus indicators are visible, and there are no keyboard traps. It checks for proper tabindex usage, skip links, and ensures users can operate all functionality with keyboard alone (WCAG 2.1.1).
Make Your Site Accessible
Install Suparank tools and audit accessibility in seconds.
curl -fsSL https://suparank.io/install | bash