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.


Use Correct HTML Elements

Okay, so the form we have now is using correct input types and a submit button. A keyboard-only visual user will be able to use this form. But a blind user will still be lost.

Thankfully HTML provides labels. When a screen reader gets to a form control while in forms mode, it reads the label aloud to tell the user what the form control is.

A label is associate with one and only one form control. Some form controls (buttons, for example) have implicit labels. The hidden form control does not need a label. But checkboxes, radio buttons, textareas, textboxes, drop-down boxes, etc. all require lables.

Labels can be associated with form controls explicitly or implicitly. Implicit associations are usually used for radio buttons and checkboxes. Having the form control as a child element of the label makes an implicit association. Using the for attribute in the label element explicitly associates the label with a form control. The form control's id value is the calue for the for attribute in the label.

So, let's re-do the above form using labels instead of spans. The submit button will use the value attribute for the label. The other two will be explicitly associated.

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

See this example in action.

Now a screen reader will read out something like: "Username editable, Full Name editable, Password Editable password, Re-type Password editable password, Female clickable unselected Male clickable unselected Female clickable unselected Male clickable unselected " followed by all the provinces and territories at least once with "unselected" followed by "Comments, Enter comments here, clickable unchecked I have read the Link Terms and Conditions and I agree to comply with them, Submit clickable."