How to make an accessible form

Along with tables, web forms are probably the most abused when it comes to accessibility. There are several checkpoints that relate to forms that you should be aware of and try to mitigate. The easiest one to implement, and most often ignored is associating the instructions or label of a form element with the element itself.

Because not all technologies properly associate labels with elements, it's ideal to create a form that places the label or instruction directly next to the element itself. Consider the following...

Username: <input type='text' name='username' />

The example above has the "Username" text or label immediately preceeding the associated input field. It is reasonable to assume that these two are associated. However, to re-enforce this assumption, you may also use the <label> tag like this...

<label for="username">Username</label>: <input type="text" name="username" id="username" />

The above example does a couple of things. First, I'm using the "for" attribute in the label tag. In most browsers, this will create an association with any form element on the page with the same id. You should also see that I'm using the id="username" to make that association. While this, in itself, does not make this element accessible, it does help. The additional benefit is a User Interface improvement. Most major browsers will "automagically" associate the label tag with the appropriate form element similar to an onfocus event. i.e. clicking on the label tag, will focus the cursor on the associated form element.

By keeping your labels next to your form elements, you will go a long way towards providing an accessible form. If you're using tables for your layout, make sure to use the label tag, to at least create some association between elements and lables. After all, if I had the following code, would you know what is what by the code only?

<table>
    <tr>
        <td><input type="text" name="input1" /></td>
    </tr>
    <tr>
        <td><input type="text" name="input2" /></td>
    </tr>
    <tr>
        <td><input type="text" name="input3" /></td>
    </tr>
</table>

Until next time.

Admin

[tbabinszki]

Very good description. The only thing I would add regarding the sample code you supplied is that it is a good idea not to structure the form in a table, unless the table itself would be considered a data table. These days the trend is using CSS.


Tom