Accessible Web Forms: A Practical Checklist
A hands-on guide to building forms that work for everyone — covering ARIA patterns, keyboard navigation, error handling, and screen reader testing.
Why Form Accessibility Matters
Forms are the primary way users interact with web applications. An inaccessible form doesn't just fail WCAG compliance — it actively prevents people from using your product.
The Essential Checklist
Labels and Instructions
Every input needs an associated label. Not a placeholder — a real <label>.
Warning
Never use placeholder text as the only label. Placeholders disappear when users type, leaving them without context.
Error Handling
Errors must be programmatically associated with their fields.
Keyboard Navigation
Every form element must be reachable via Tab key. Custom components need explicit tabindex and keyboard event handlers.
Focus Management
After form submission, on success move focus to the success message, on error move focus to the first invalid field.
Testing with Screen Readers
Use VoiceOver (Mac) or NVDA (Windows) to test your forms.
Written by
Aisha Pateleditor
UX engineer and accessibility advocate. Specializes in design systems, inclusive design, and CSS architecture. Speaker at multiple web conferences.
Comments (2)
This should be required reading for every frontend developer. The focus management section alone saved me hours of debugging.
I'm a QA engineer and this checklist is now part of our testing protocol. Thank you for making this so actionable!
Keep reading
design
Building a Design System with Tailwind CSS v4 and React
Learn how to create a scalable, token-based design system using Tailwind CSS v4's new CSS-first configuration and React component patterns.
design
CSS Container Queries: The Layout Revolution
Container queries let components adapt to their container's size instead of the viewport. Here's how to use them in production today.