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.


Building A Form For Input

We will build a registration form and make it accessible. A login form would consist of fields for a username, a full name, a password, retype your password, a Terms and Conditions checkbox, and a submit button. And just for fun we'll add gender and province select controls. We'll start with the worst form ever and slowly, step by step fix it so that it's accessible and WCAG 2.0 compliant.

Note that everything done here is something I've seen in the wild. I'm not making any of this up. Sadly, I won't be able to put all bone-headed examples in. It seems as though developers will seek out the worst, most inaccessible way to do things, and pat themselves on the back for having found a neat new way of doing things.

With all that having been said, let's start with our base form:

<form method="POST" action="#" name="theForm" id="theForm">
<span style="color: #FF0000; background-color: #FFFFFF;"><b>Username:</b></span>
<span class="input" onclick="focus();" onkeypress="addText(event, this);"></span>
<br>
<span style="color: #FF0000; background-color: #FFFFFF;"><b>Full Name:</b></span>
<span class="input" onkeypress="addText(event, this);">Full names must consist only of letters, a dash, and no more than 3 spaces.</span>
<br>
<span style="color: #FF0000; background-color: #FFFFFF;"><b>Password:</b></span>
<span class="input" onkeypress="addPasswordText(event, this);"></span>
<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>
<span class="input" onkeypress="addPasswordText(event, this);"></span>
<br> <span><b>What's your gender:</b></span>
<br>
<img src="accessibleForms/circle-unfilled.png" onclick="toggleCircle(this);" id="female" class="gender">
<span><b>Female</b></span>
<br>
<img src="accessibleForms/circle-unfilled.png" onclick="toggleCircle(this);" id="male" class="gender">
<span><b>Male</b></span>
<br>
<span><b>Where do you live?:</b></span>
<br>
<img src="accessibleForms/circle-unfilled.png" onclick="toggleCircle(this);" class="province" id="ab">
<span><b>Alberta:</b></span>
<br>
<img src="accessibleForms/circle-unfilled.png" onclick="toggleCircle(this);" class="province" id="bc">
<span><b>British Columbia</b></span>
<br>
<img src="accessibleForms/circle-unfilled.png" onclick="toggleCircle(this);" class="province" id="mn">
<span><b>Manitoba</b></span>
<br>
<img src="accessibleForms/circle-unfilled.png" onclick="toggleCircle(this);" class="province" id="nfld">
<span><b>Newfoundland</b></span>
<br>
<img src="accessibleForms/circle-unfilled.png" onclick="toggleCircle(this);" class="province" id="nb">
<span><b>New Brunswick</b></span>
<br>
<img src="accessibleForms/circle-unfilled.png" onclick="toggleCircle(this);" class="province" id="nwt">
<span><b>Northwest Territories</b></span>
<br>
<img src="accessibleForms/circle-unfilled.png" onclick="toggleCircle(this);" class="province" id="ns">
<span><b>Nova Scotia</b></span>
<br>
<img src="accessibleForms/circle-unfilled.png" onclick="toggleCircle(this);" class="province" id="nv">
<span><b>Nunavit</b></span>
<br>
<img src="accessibleForms/circle-unfilled.png" onclick="toggleCircle(this);" class="province" id="on">
<span><b>Ontario</b></span>
<br>
<img src="accessibleForms/circle-unfilled.png" onclick="toggleCircle(this);" class="province" id="pei">
<span><b>Prince Edward Island</b></span>
<br>
<img src="accessibleForms/circle-unfilled.png" onclick="toggleCircle(this);" class="province" id="qc">
<span><b>Quebec</b></span>
<br>
<img src="accessibleForms/circle-unfilled.png" onclick="toggleCircle(this);" class="province" id="sk">
<span><b>Saskatchewan</b></span>
<br>
<img src="accessibleForms/circle-unfilled.png" onclick="toggleCircle(this);" class="province" id="yk">
<span><b>Yukon</b></span>
<br> <span>Comments:</span>
<div class="input" onkeypress="addText(event, this);">Enter comments here.</div>
<div class="button" onclick="validateThenSubmit();">Submit</div>
<br>
<img src="accessibleForms/square-unchecked.png" onclick="toggleSquare(this); validateThenSubmit();"> <span style="color: #FF0000; background-color: #FFFFFF;"><b>I have read the <span class="likeLink" onclick="javascript:forwardURL('accessibleForms/tandc.php');">Terms and Conditions</span> and I agree to comply with them.</b></span>
</form>
<div>All required fields were in red.</div>

See this example in action.