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.

First things First

The first thing to understand about HTML is that it is a semantic-based language. Each tag means something. A tag may have a default look to it, but that look has nothing to do with the meaning of the tag. The look can be changed with CSS. But the meaning is what's used by assistive technologies like screen readers. It is a mistake to think that if you want large, bold text, you should use an <h1> tag. You should use use an <h1> tag when you want a header for the whole page - regardless of what you want it to look like. You should use CSS to define what something should look like. So, it is important to understand what the meaning of each HTML tag is supposed to be used for.

The second thing to understand is that you can't determine how someone will view your site. Once upon a time it was common to see on a webpage something like "This page is best viewed using Netscape 3 with 640x480 resolution." Somehow we just accepted that. Then came the day when people only developed for Internet Explorer 6 because it had almost 100% market share. Both of those days are long gone. Now people can view your page on a smart phone programmed by Apple, Google, Microsfot, Blackberry, etc. Or they can view it on a desktop computer with a 24" monitor. Keeping this in mind, it shouldn't be too much of a leap to understand that some will have to have a screen reader read a page aloud to them.

Thirdly, while we're talking about screen readers, it's important to know that different people use different screen readers, and different screen readers interact differently with HTML. Furthermore, different users have different settings on their screen readers. Some people will hear title attributes. Some won't. For the purposes of this page, I'll mostly be referring to NVDA because it's the screen reader I'm most familiar with.

Lastly, most desktop screen readers use keyboard shortcuts to navigate around the page. Typically, you flow from top to bottom with the arrow keys. But once a form is encountered, and the user interacts with a form control the screen reader enters into forms mode. In forms mode, keystrokes interact with the form control itself. The only two ways to navigate through a form are: 1) After every form control, press Escape to get out of forms mode, navigate to the next form control with the arrow key, then enter forms mode again; or 2) press Tab to send focus from form control to form control until you get to the end of a form. For the purposes of this page, we'll assume that most users would use the second method because the first one would be a pain in the arse.

So, with these things in mind....