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.

Let's Get Started

Note that everything you see in this tutorial is something I've seen "in the wild". I'm not making any of this up.

Know when to use radio buttons and when to use a drop-down

We're on our way, but the way it reads out all of those provinces is annoying. And there's only ten of them (and three territories). In the states, there are fifty of them. There has to be a better way! And there is. A select, or drop-down box. Radio buttons are okay when there are only two or three options, like with gender. The form only gives two options. Whenever one is selected, the whole list is read by the screen reader. Not a problem for two items, but a big problem for longer lists. So, for provinces (or states) we'll use a select box.

<form method="POST" action="#" name="theForm" id="theForm">
<label for="username" style="color: #FF0000; background-color: #FFFFFF;"><b>Username:</b></label>
<input type="text" name="uname" id="username">
<label for="firstname" style="color: #FF0000; background-color: #FFFFFF;"><b>Full Name:</b></label>
<input type="text" name="fname" id="firstname" placeholder="Full names must consist only of letters, a dash, and no more than 3 spaces."/>
<label for="password1" style="color: #FF0000; background-color: #FFFFFF;"><b>Password:</b></label>
<input type="password" name="password" id="password1"/>
<div>Passwords should be at least 8 characters, contain numbers, upper and lower case letters and a special character. This way it will be hard for you to remember, but easy for a computer to guess.</div>
<label for="password2" style="color: #FF0000; background-color: #FFFFFF;"><b>Re-type Password:</b></label>
<input type="password" name="repassword" id="password2"/>
<br> <span><b>What's your gender:</b></span>
<input type="radio" name="gender" value="female">
<input type="radio" name="gender" value="male">
<label for="province"><b>Where do you live?:</b></label>
<select id="province" name="prov">
<option value="ab">Alberta:</option>
<option value="bc">British Columbia</option>
<option value="mn">Manitoba</option>
<option value="nfld">Newfoundland</option>
<option value="nb">New Brunswick</option>
<option value="nwt">Northwest Territories</option>
<option value="ns">Nova Scotia</option>
<option value="nv">Nunavit</option>
<option value="on">Ontario</option>
<option value="pei">Prince Edward Island</option>
<option value="qc">Quebec</option>
<option value="sk">Saskatchewan</option>
<option value="yk">Yukon</option>
<label for="comments"><b>Comments:</b></label>
<textarea id="comments" name="comments">Enter comments here.</textarea>
<input type="submit" onclick="return validateBetterThenSubmit();" value="Submit">
<label style="color: #FF0000; background-color: #FFFFFF;">
<input type="checkbox" name="agree"> <b>I have read the <a href="accessibleForms/tandc.php">Terms and Conditions</a> and I agree to comply with them.</b></label>
<div>All required fields were in red.</div>

See this example in action.