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 Re-invent The Wheel

Okay, taking a look at our base form, if you do this, you deserve to have every disability in the book thrust on you. It is a giant middle-finger to everyone with a disability, to anyone with a browser that sucks at interpreting Javascript, and to all competent web developers everywhere. And I hate you.

In this example I used spans with event handlers to modify their own content when a key is pressed. The problem is that you can't focus these items. They require Javascript to be turned on. While WCAG 2.0 does not require a Javascript-less interface, it's generally good practice to not require it more than necessary. Progressive enhancement and all that.

So, let's try not to re-invent the wheel. HTML since time immemorial has provided a text input, a password input, checkboxes, radio buttons, etc.. So, it should look like:

<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" onclick="validateGoodThenSubmit();" onblur="validateGoodThenSubmit();"> <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.