Form Accessibility Checker
Checker
WCAG Compliance Scanner
The accessibility checker scans your form for WCAG 2.1 compliance issues and generates a detailed report with fix recommendations. Sign up to run unlimited checks.
Check Accessibility FreeWhat We Check
Form Labels
Every input field has a visible, associated <label> element or aria-label.
Color Contrast
Text and interactive elements meet WCAG 2.1 minimum contrast ratios (4.5:1 for normal text, 3:1 for large text).
Keyboard Navigation
All form fields and buttons are reachable and operable using only a keyboard (Tab, Enter, Space).
Focus Indicators
A visible focus ring appears on every interactive element when navigated via keyboard.
Error Identification
Errors are identified in text (not color alone) and describe how to fix the problem.
ARIA Attributes
Required fields use aria-required, errors use aria-describedby, and live regions announce dynamic changes.
Touch Target Size
Interactive elements are at least 44x44 CSS pixels for easy tapping on mobile.
Screen Reader Compatibility
Form structure is logical when read aloud, with fieldsets and legends for grouped controls.
WCAG Conformance Levels
Level A
Minimum accessibility: essential for basic access by assistive technology users.
Examples: Form labels, keyboard access, text alternatives
Level AA
Mid-level accessibility: the standard most organizations target. Required by many laws.
Examples: Color contrast, focus indicators, consistent navigation
Level AAA
Highest accessibility: ideal but not always practical for all content.
Examples: Enhanced contrast, sign language for video, large touch targets
Quick Accessibility Fixes
- 1
Always use semantic HTML: <label>, <fieldset>, <legend>, and proper heading hierarchy solve 50% of accessibility issues.
- 2
Do not rely on color alone to convey information: pair color with text, icons, or patterns.
- 3
Test with a screen reader at least once: VoiceOver (Mac) and NVDA (Windows) are both free.
- 4
Ensure error messages are announced by screen readers by connecting them with aria-describedby.
- 5
Use a focus-visible strategy: keep focus rings for keyboard users, hide them for mouse users with :focus-visible.