Unread 01-04-2008, 01:52 PM
Admin
Posts: n/a
  #1  
Default 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...

Code:
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...

Code:
<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?

Code:
<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
Reply With Quote
Unread 05-01-2008, 03:00 PM
tbabinszki tbabinszki is offline
Junior Member
Join Date: May 2008
Location: Alexandria, VA USA
Posts: 3
  #2  
Default

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
__________________
Tom Babinszki
Even Grounds
Accessibility Consulting
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT. The time now is 09:24 PM.


Powered by vBulletin® Version 3.0.1
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.