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.

Proper Coding

Our page is getting pretty messy to look at with all that inline styling. Instead we'll use a .css style sheet to define our styles. 'style="color: #CC0000; background-color: #FFFFFF;"' will be replaced by:

.red { color: #CC0000; background-color: #FFFFFF; }

And 'style="position: absolute; height: 1px; width: 1px; clip: rect(1px, 1px, 1px, 1px); overflow: hidden; margin: 0;"' will be replaced by:

.invisibleStuff { position: absolute; height: 1px; width: 1px; clip: rect(1px, 1px, 1px, 1px); overflow: hidden; margin: 0; }

While we're at it, we'll remove other styling elements like the <b> tags. And since we're cleaning up the code, we'll add the new HTML5 attribute required to the elements which are required. Use native HTML whenever possible. Right now, our own Javascrip form validation function will prevent unfilled required fields from being submitted, but if Javascript is turned off, then this will prevent the form from being submitted...for the browsers that support the required attribute.

<form method="POST" action="#" name="theForm" id="theForm">
<div>Fields marked with <span class="red">*</span> are required.</div>
<label for="username">Username: <span class="red">*</span> <span class="invisibleStuff">(Required)</span></label>
<input type="text" name="uname" id="username" required>
<label for="firstname">Full Name: <span class="red">*</span> <span class="invisibleStuff">(Required)</span></label>
<input type="text" name="fname" id="firstname" placeholder="Full names must consist only of letters, a dash, and no more than 3 spaces." required>
<label for="password1">Password: <span class="red">*</span> <span class="invisibleStuff">(Required)</span></label>
<input type="password" name="password" id="password1" required>
<div tabindex="0">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">Re-type Password: <span class="red">*</span> <span class="invisibleStuff">(Required)</span></label>
<input type="password" name="repassword" id="password2" required>
<legend>What's your gender:</legend>
<input type="radio" name="gender" value="female">
<input type="radio" name="gender" value="male">
<label for="province">Where do you live?:</label>
<select id="province" name="prov">
<option value="false">Select Province</option>
<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">Comments:</label>
<textarea id="comments" name="comments">Enter comments here.</textarea>
<input type="checkbox" name="agree" required> I have read the <a href="accessibleForms/tandc.php">Terms and Conditions</a> and I agree to comply with them. <span class="red">*</span> <span class="invisibleStuff">(Required)</span></label>
<input type="submit" onclick="return validateBetterThenSubmit();" value="Submit">

See this example in action.