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.

Don't Introduce Unexpected Behaviour

Okay, so there are no custom controls. Just native HTML. Even if you wanted to register, a blind user wouldn't hear very many useful instructions. They might hear something like "Username, Full Name, Editable, Editable password, password, clickable unselected clickable unselected (repeated for quite some time) Enter Comments Here.". Not very useful, is it?

While we're using native HTML elements, please get rid of that onclick event handler in the Terms and Conditions checkbox. What if a user wants to go back to make a correction? This idiotic form will submit before they can do anything! Again, using an HTML submit button is the way to go. Having an auto-submit form introduces unexpected behavior.

(Yes, you could go with a <button> with an event handler. But, again WHY? If you do this without good reason, you officially suck and should probably start looking for a new career.

<form method="POST" action="#" name="theForm" id="theForm">
<span style="color: #FF0000; background-color: #FFFFFF;"><b>Username:</b></span>
<input type="text" name="uname">
<span style="color: #FF0000; background-color: #FFFFFF;"><b>Full Name:</b></span>
<input type="text" name="fname" placeholder="Full names must consist only of letters, a dash, and no more than 3 spaces."/>
<span style="color: #FF0000; background-color: #FFFFFF;"><b>Password:</b></span>
<input type="password" name="password"/>
<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>
<span style="color: #FF0000; background-color: #FFFFFF;"><b>Re-type Password:</b></span>
<input type="password" name="repassword"/>
<br> <span><b>What's your gender:</b></span>
<input type="radio" name="gender" value="female">
<input type="radio" name="gender" value="male">
<span><b>Where do you live?:</b></span>
<input type="radio" name="province" value="ab">
<input type="radio" name="province" value="bc">
<span><b>British Columbia</b></span>
<input type="radio" name="province" value="mn">
<input type="radio" name="province" value="nfld">
<input type="radio" name="province" value="nb">
<span><b>New Brunswick</b></span>
<input type="radio" name="province" value="nwt">
<span><b>Northwest Territories</b></span>
<input type="radio" name="province" value="ns">
<span><b>Nova Scotia</b></span>
<input type="radio" name="province" value="nv">
<input type="radio" name="province" value="on">
<input type="radio" name="province" value="pei">
<span><b>Prince Edward Island</b></span>
<input type="radio" name="province" value="qc">
<input type="radio" name="province" value="sk">
<input type="radio" name="province" value="yk">
<textarea name="commentS">Enter comments here.</textarea>
<input type="submit" onclick="return validateGoodThenSubmit();" value="Submit">
<input type="checkbox" name="agree"> <span style="color: #FF0000; background-color: #FFFFFF;"><b>I have read the <a href="accessibleForms/tandc.php">Terms and Conditions</a> and I agree to comply with them.</b></span>
<div>All required fields were in red.</div>

See this example in action.