How to Write Accessible Forms - The TL;DR Conclusion
The TL;DR Conclusion
That was a long tutorial, eh? It's only long because I've seen so many forms built by developers that, I swear have gone out of their way to discover new ways to make forms inaccessible.
Don't be one of those developers. Be a good one. Please. You'll thank yourself when your eyes start going when you get older, or when you sustain an injury (however temporary) or lose your mobility.
In short: keep to the following rules when developing web forms (or any web page components):
- Use HTML the way HTML was meant to be used. (See and bookmark HTML5 Elements for details.)
- Make sure everything can be done using a keyboard, either intuitively or include instructions.
- Once a form begins, make sure all elements will either be focusable (by either using a form element, a hyperlink, or using
tabindex="0"on non-form elements), or using elements that will be read by screen readers (like
- To be safe, put all information about the form above the form.
- List error messages as links to the input fields above the form, and repeat each error message within the form
- Bonus points for implementing the Government of Canada's initiative, the Web Experience Toolkit.