How to Write Accessible Forms

How to Write Accessible Forms

This tutorial can be viewed one part at a time or all in one page.

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):

  1. Use HTML the way HTML was meant to be used. (See and bookmark HTML5 Elements for details.)
  2. Make sure everything can be done using a keyboard, either intuitively or include instructions.
  3. 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 <label>s, <fieldset/legend>s, or <aria-labelledby/aria-describedby>).
  4. To be safe, put all information about the form above the form.
  5. List error messages as links to the input fields above the form, and repeat each error message within the form <label>/<legend>.
  6. Bonus points for implementing the Government of Canada's initiative, the Web Experience Toolkit.