Increasing Form Accessibility
by Rob Modica
March 5, 2007
Forms are an integral part of web development. We use them almost everyday when using the Internet, from filling in requests for newsletters to putting in our credit card details to buy a DVD. It is important then to make sure that everyone can use your forms, even if that person has a disability and could have problems using an inaccessible form.
Structuring Your Form
The beauty of web standards means we can use structured mark-up for layout and CSS to format our forms. What this ensures is that when the screen reader linearises our form, it will read everything out in the correct order. You can use tables, but depending on how they are structured will determine their level of accessibility. We are using pure CSS here as we know that it will degrade gracefully and or form will work in web browsers and assitive technology.
But how do I create a form laid out using CSS? Well hopefully the next snippet of this article will show you a basic way to create your forms using structured mark-up and CSS, making your forms better, more light weight and accessible! Below is a simple form created using web standard code, but with no CSS styling.
Our Basic Form
Our Basic Form Code
<div class="theForm"><form><div class="row"><span class="label">First Name:</span><span class="input"><input type="text" id="FirstName" name="First Name" /></span></div><div class="row"><span class="label">Last Name:</span><span class="input"><input type="text" id="LastName" name="Last Name" /></span></div><div id="row"><input type="submit" value="submit"/></div></form></div>
Our form is very boring, but we can change that by just adding simple CSS to manipulate it’s formatting. Check out our new form below where we have played around with the CSS a little and changed its appearance in a matter of seconds. Granted it is not a Picasso, but what it shows is by adding a few simple pieces of CSS we can change the formatting easily. That’s the power of standards based CSS design, and now because our form is laid out in a logical way we have implemented one of the steps to making our forms more accessible.
Our Basic Form CSS Styled
Basic Form CSS Code
.theForm{width: 270px;font-family: Arial, Helvetica, Sans-Serif;color: #CC3300;padding: 10px 0 0 5px;}.row{clear: both;margin: 0 0 10px 0;}.row span.label{float: left;width: 40%;font-weight: bold;}.row span.input{float: right;width: 60%;text-align: left;}.center{text-align: center}
The Label Element
The label element allows you to programmatically tie a text prompt to its related input control. You may not see the benefit of this straight away, because you cannot see the link in your web browser. Where the label element works is within assistive technologies such as JAWS, IBM homepage reader and Window-Eye from Microsoft. The label element is wrapped around the prompting text of the control and linked by using the "for" attribute which matches the "id" attribute of the actual control (text box, radio button etc). The code below takes our form from earlier and adds the label element to our two controls; we are not going to show the form again, as from a presentational point of view nothing changes.
Our Basic Form with Labels
<div class="theForm"><form><div class="row"><span class="label"><label for="FirstName">First Name:</label></span><span class="input"><input type="text" id="FirstName" name="First Name" /></span></div><div class="row"><span class="label"><label for="LastName">Last Name:</label></span><span class="input"><input type="text" id="LastName" name="Last Name" /></span></div><div id="row"><input type="submit" value="submit"/></div></form></div>
Assistive technology will try its best to match labels to controls, but without labels the screen readers’ best guesses can be wrong. Adding the label to your form will remove any ambiguity because the prompting text will be read out for its related form control, meaning people using assistive technology will be confident when filling out your form. An additional benefit of using the label element is it gives you the ability to click on the text contained within it to set the focus on its related form element. This may not sound that useful, but if you look at it with regards to checkboxes and radio buttons where the click-able area is small, the benefit of this nifty little feature is a bit more tangible.
Grouping Elements
Sometimes we are in a situation where our forms need to ask for alot of information. The problem with long and more complicated forms is that sometimes visitors look at them they get a bit overwhelmed and will not bother to fill them out. Forms are rarely one big list of unrelated elements, and can usually be dissected into several chunks of related controls, which can then be grouped into logical categories.
XHTML has two elements that help us achieve logical grouping of form elements and these are fieldset and legend. The fieldset element groups form controls together whilst legend adds a caption to that group. This structure is useful for splitting your form into logical chunks to be filled in, but it is also useful for grouping collections of related controls such as radio buttons and check boxes. Breaking our forms down into more manageable chunks increases the accessibility and usability level for all visitors, not just disabled ones. Lets go back to our form and see a basic example.
Our Grouped Form
Our Grouped Form Code
<div class="theForm"><form><fieldset><legend>Personal Details</legend><div class="row"><span class="label"><label for="FirstName">First Name:</label></span><span class="input"><input type="text" id="FirstName" name="First Name" /></span></div><div class="row"><span class="label"><label for="LastName">Last Name:</label></span><span class="input"><input type="text" id="LastName" name="Last Name" /></span></div><div class="row"><fieldset><legend>Gender</legend><input type="radio" id="gender1" name="gender1"/><label for="gender1">Male</label><input type="radio" id="gender2" name="gender2"/><label for="gender2">Female</label></fieldset></div><div id="row"><input type="submit" value="submit"/></div></fieldset></form></div>
Our form elements have now been grouped together into a logical collection. We have also added a sub fieldset and legend for gender. As you can see we have created a logical grouping, which is personal details (probably overkill in such a simple form) and another logical grouping within it, which are our gender radio buttons (male and female). The gender group actually serves a deeper purpose then just grouping, it again removes all ambiguity from assistive technology with regards to what the form is asking for. When a screen reader reads out our form it will read out the legend for every control in its corresponding fieldset element.
Mandatory Fields
When indicating mandatory fields you need ensure that you do not fall into the trap of many developers and convey that to your visitor using colour alone. This unfortunately is not a reliable way of indicating mandatory fields because just using colour means you could be alienating those who have colour blindness. To ensure that all visitors can identify your mandatory fields you need to use text to convey them.
As you can see from the new form, we have indicated to the user explicitly how they can identify our mandatory fields. In this example we have used the * symbol, which is perfectly valid because we explained this before our form. The fact that the symbol is red in this instance is irrelevant because we are not saying colour is an identifier, the * is.
JavaScript and Form Validation
The first thing you need to know about client side validation of forms is not to count on it being there! JavaScript may not be supported by the persons browser or may be turned off so you need ensure that if you do provide client side validation that you also provide server side validation to compliment it. You can use any server side technology such as PHP, ASP, ASP.Net or Perl to create you fallback validation. We wont mention the implementation of client side and server side validation here as it exceeds the scope of this article.
Put them all together!
Using the techniques that were outlined in this article, you should be well on your way to making your forms more accessible, and removing any possible ambiguity that could arise for people using assistive technology. The beauty of all these techniques is they could be added to your general work flow, which means you will be building accessible forms every time you build one, and not adding accessibility features after your done!
