Build Accessible Online Forms

Logical Grouping of Items

We now step slightly out of the realm of accessibility and into the realms of general usability. Or, some might argue, into the world of common sense.

People hate filling in long forms. People hate reading long blocks of text (particularly on screen). But just as you can insert paragraph breaks at appropriate points in a block of text, so you should with forms.

• Think about all the data you're collecting then try to group them into smaller chunks
• Break these chunks of data up into clearly defined areas on the form or
• Break these up into separate forms (remembering to clearly inform users where they are in the process - "Step 1 of three: your personal details")

This alone will make a big difference. But there's another neat trick you can use -- the little known (or at least little used) <fieldset> and <legend> tags.

<fieldset> lets you bind a group of form controls together visually. In theory, screen readers should also be able to identify this fact, but for the moment, support for fieldset is very limited.

<legend> is simply a tag that you use alongside (or rather inside) the <fieldset> tag -- to give the group of form controls a heading.

You are most likely to use the <fieldset> tag with radio buttons or checkboxes, as shown below, but equally, you could use the <fieldset> to group whole chunks of data collection.

Summary

A form can be presented in countless different ways, but there are some basic things you need to do to make it accessible. But like anything, there are some special touches that you can apply to make your forms that extra bit clearer, usable and accessible. You probably have your own ideas, some additional tricks that you have up your sleeve. If so, why not share them!

Further reading:

1. HTML Help - The Label Tag

2. Fitts' Law At a Glance

3. W3C Tablin - Table Linearizer

4. How to create accessible forms