AlfieWebDevTips Homefor new and experienced developers
[Home Home] [Web Development Web Development ] [Code Generators Code Generators ] [Resources Resources ] [Contact Us Contact ] |WebDevTips Privacy Privacy |
WebDevTips Pick Of The Day : Beat The Spam Bots |

Print This Page

You are here : Home - Web Development - HTML - Accessibility - Web Forms

Accessible web forms

This section only deals with accessibility and usability issues using forms. For more information on forms in general, you might want to take a look at the forms guide elsewhere on this site.

Interacting with form type elements is something any windows or gui based computer user should be familiar with, even though you may not think you are. If you are using windows take a look at some of your control panel items. Most of them use form elements. Here is an example (from the folder options).

a section of the folder options control panel wizard

The image is basically form radio buttons where you can choose 1 item out os a possible 2. The point I am trying to make is this. These wizards are all accessibility friendly, notice the dotted box around the text beside bottom radio button. Clicking on the text to the right of the radio button highlights the option.

Below is a typical web based form showing the same information.
Show common tasks in folders
Use Windows classic folders

Let's look closer at the above example. To activate the radio button you have to click on a circle with a diameter of around 13 pixels (will vary according to operating system). The f in the word folders on line 1 and i in classic on line 2 are indicators of keyboard shortcuts.

Now look at the same web form but with accessibility features added


Now our web form has the same features as the control panel example. Apart from the slightly different font it has the same look as well. To the casual observer it would be hard to tell which is the image and which is a real form.

Now let's see if it works :) Try clicking on the text next to each of the radio buttons. If you are using windows, try using the keyboard shortcuts by holding down alt then press i or f (other operating systems might use a different key to alt)

Notice also that the buttons and text are contained within a box. This is called grouping, in this example the group is the tasks group. So, any elements that are related to the tasks groups would be contained within that boundary.

What we have done. is not just made this form useful for visitors with disabilities, we have improved the usability of the form for everyone. We can see a logical radio group. We have increased the target area from a 13 pixel diameter to target area of approximately 13 pixels x 200 pixels. We have also included keyboard shortcuts so visitors who can't or don't like using a mouse have a quick and convenient way of accessing the form.

It's not only good for visitors with disabilities, it is good for everyone. Life would be so much easier if everyone used the same technique for forms, then we wouldn't have to think as hard every time we are faced with an un-friendly form.

One of the reasons I chose the above example is, it gives me an opportunity to introduce you to Fitt's law. Usability First describe Fitt's Law as

Fitts' Law is a model to account for the time it takes to point at something, based on the size and distance of the target object. Fitts' Law and variations of it are used to model the time it takes to use a mouse and other input devices to click on objects on a screen.

Fitt's law is applied to most of the software you use today and is now applied to webpages as well.

Find out more about Fitt's Law

Now that you know what you're aiming for, we will look at how its done over the next couple of pages. Don't be put off it really isn't that difficult.

[Back to Images] [Accessibility Home] [Next - Form Rules]

Why not discuss this article in our forum?
Get your questions answered quickly.



[back to top of page]   

[labelled with icra -  - this link will open in a new window] [RSS Content]

[Copyright © WebDevTips]