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.

The title Attribute

You'll see in the previous example I replaced the placeholder attribute in the Full Name field with a title attribute. Now that bit of text will only be seen when a user hovers over that textbox. Keyboard-only visual users, and mobile will never see it. Screen reader users may or may not hear it, depending on the screen reader, and settings. The title attribute is best left to webcomics like XKCD and Amazing Super Powers to make humourous mouse-overs.

So, to fix the Full Name field, we'll just take that text right out and leave it as part of an error message later on. Most people won't have to be told that a name consists of letters, and dahses. And very few people will have more than 4 names to enter.

<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" 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"></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.