Guidelines for accessible forms

In an age where user feedback and interaction has become so popular, accessible forms have become that much more important. Many sites have already embraced making their forms accessible, and done a pretty good job of it, but inevitably some will still lack that little extra something - as small as an inappropriately named label through to no accessible features at all.

1. Using label tags

Labels should always be used and include the for attribute (e.g. <label for="name">). The value used should match the id of the input field that the label is being used for:

<label for="name">Name</label> <input type="text" id="name">

Labels for inputs, select dropdowns and textareas should precede the input, though labels for radio buttons and checkboxes should follow the input, as follows:

<input type="checkbox" id="terms"> <label for="terms">Accept our terms & conditions</label>

2. Grouping similar items

Related form elements should be grouped together inside <fieldset></fieldset> tags and have a <legend> just inside them to describe what the fieldset contains. Forms can be grouped into manageable chunks this way:

<fieldset>
<legend>Personal details</legend> <ul> <li><label for="firstname">First name</label><input type="text" id="firstname" /></li> <li><label for="surname">Surname</label><input type="text" id="surname" /></li> </ul> </fieldset>


3. Highlighting the current field

It's useful to use colour to highlight the current field so users can easily see their current location within the form (click into the below field to see this in action):

We can assign the input:focus pseudo class as most browsers now understand this (Firefox, Chrome, Safari and IE8):

input:focus {
background: #edf8fa; border: 2px solid #666; }

Additionally, using jQuery's focus() event function and jQuery's blur() event function we can ensure better cross-browser compatibility and include IE6 and 7:

// Wait until the page has loaded
$(document).ready(function(){
// When focusing on any input add a class of over $('input').bind("focus",function(){ $(this).addClass('over'); // When blurring or leaving any input remove the class of over }).bind("blur",function(){ $(this).removeClass('over'); }); });

The following CSS code then needs to be included:

input.over {
background: #edf8fa; border:2px solid #666; }

4. Highlighting required fields

If a field is required, it's good practice to highlight that field with an icon. The most recognisable symbol, the asterisk (*), should be clearly placed before the required field. Colouring a required field indicator in red, or another colour that stands out will make it more visible to visually impaired users:

5. Utilising sticky form fields

Sticky forms refers to the practice of re-posting form data back into the fields if the form has failed to submit. This is especially important for large forms (e.g. job and finance applications) because there are likely to be some errors due to the sheer length and complexity of it.

6. Disabling the submit button

Disabling the submit button until all validation criteria have passed is also a good idea - though shouldn't be used as a stand-alone alternative to sticky forms. Sticky forms make more sense to use, but in some cases, you may find a compelling reason to just disable the submit button.

One minor disadvantage of just disabling the submit button is it won't work if users have JavaScript disabled for whatever reason. One of the golden rules in web development is to assume that users don't have JavaScript enabled but include enhanced functionality for when they do.

7. Avoiding reset buttons

Reset buttons shouldn't be used (unless absolutely necessary - there's usually a better way) because of users inadvertently clicking on them, and losing all the data they just input - usually frustrating them enough that they'll simply leave your site or not complete your form. This is especially important in the case of bigger forms, though can be equally frustrating if users are in a rush to fill out the form.