Forms Accessibility
Many readers find HTML forms quite difficult to deal with, what with all the different elements to fill in. There are a variety of methods you can use to guide your readers through a complicated form. Make sure you’ve read through the basic forms tutorial before tackling this.
This page was last updated on 2012-08-21
Browser Compatibility Note:
Most of these new accessibility aids were brought in in HTML 4.0, and so you’ll need a modern browser like » Firefox for them to work, although they won’t mess up older browsers, so they’re completely safe to use.
tabindex
You should know by now that you can navigate forms using your Tab key (above caps-lock), pressing it to move between parts. This allows you to fill in forms without having to use your mouse. Usually the focus will move sequentially between elements as they appear in the source code, but this may not always be the ideal sequence. For instance, you might want to skip over optional items and focus the user on the next required item. With the tabindex attribute you can set an order of your choosing. It’s easy to implement, and the effects can be very helpful.
Click into the top box here and then move between them with Tab. You can use Shift + Tab to move backwards.
Box 1
Box 3
Box 4
Box 2
Keep hitting Tab and you’ll see that the browser’s focus will leave the form entirely and start moving up through the links on the page. You can use tabindex as a link attribute too, though it’s more useful in forms. The code to create the above array is:
Box 1 <input type="text" name="tab1" tabindex="1">
Box 3 <input type="text" name="tab2" tabindex="3">
Box 4 <input type="text" name="tab3" tabindex="4">
Box 2 <input type="text" name="tab4" tabindex="2">
Once you’ve started in a box, the focus will keep jumping to the box with the next highest value. It just follows whatever numeric order you put in, and is not just confined to text boxes — you can have it affecting any form element.
<fieldset> and <legend>
These two new organisational elements help you lay out your forms better without having to use tables (which may give Netscape 4 problems). They can split a large form into many named areas, like so:
This is a very presentable way of grouping your form elements together into logical categories. Users will appreciate forms that are distilled this way as their progress is more visible because they can see sections being completed.
The fieldset element creates the boxes, and the legend element creates the caption. Here’s the code for the first box:
<fieldset>
<legend><b>1: Personal Information</b></legend>
Name <input type="text" name="name">
Email <input type="text" name="email">
</fieldset>
You just wrap the fieldset element around all the elements that you want grouped together, and add in a legend tag at the start, with whatever text (and formatting) you want inside it. Of course, the borders can be coloured and styled using CSS. You might also like to add some padding to the boxes. The legend text can be placed in another part of the border by using the align attribute and one of the following values: left, right, bottom or top.
The fieldset box will expand to fit in the whole width of the screen, and it doesn’t have a width attribute, so you may have to put the whole thing into a simple table to control its size, or define that in a stylesheet.
<label>
Again an allusion to a operating system function, this makes it easier to click on a form element. Before we had this element, you would have to click on the form input itself to select it, while in most GUIs, you could click the text beside the element. This new element allows you to click the text, which makes getting control of an element much easier. Try it out on this button:
Easier, eh? The code to create this couple is:
<label for="labelexample">Click here</label>
<input type="checkbox" name="check1" id="labelexample">
You precede the checkbox code with the label code, and use the for="..." attribute to show which element this label corresponds to. The value of this should be the same as the value for the id="..." attribute that you’ll put into the form element you want to affect.
accesskey
You can make certain page elements easily accessible by adding an accesskey. If you look up at the toolbar in most any program you will likely see a row of options like File Edit etc. The underlines on the letters indicates that there is a keyboard shortcut to get to these options. To get to File, for instance, you press Alt + F, and the various functions underneath will pop down.
You can add this same functionality to important form elements (or links) to allow quick access. All you do is add in the attribute accesskey="X" where X is whatever key you want the combination to use. Then, to get to this element, you just press Alt + X and the browser’s focus will instantly be placed into this box. For instance:
<input name="address" id="address" accesskey="A">
I have this set up in HTML Source for our search box at the top of the page. Press Alt + S now and you’ll be put in charge of the search box. Notice that the heading for it is “Search the Source”. The underlined letter is enough for advanced readers to know what to do to take advantage of this shortcut.
Before you go reassigning every key to something on your website, make sure you don’t use any of the common web browser key combinations, such as F, E, V, G etc. Don’t destroy the accessibility of the browser just to increase the accessibility of your site.
Maximum Lengths
Sometimes you want to limit the amount of text a user can enter into a form input. For this we have the maxlength attribute, which you can add to text inputs, password inputs, or textareas. Do it like so:
Enter your new password: <input type="password" maxlength="10">
Which will create a field like this. Try to enter more than 10 characters, if you dare.
Enter your new password:
Set Focus
If a reader comes onto a page with a form, even if it is the only thing on the page, they have to click on it before they can start using it. This is where this small JavaScript command comes in — it will set the browser’s focus on whatever form element you want as soon as the page is loaded, saving lots of time. They use this on the » Google homepage, with ace results. First, add this JavaScript method to your document’s head:
<script type="text/javascript">
function setfocus() {
document.formname.elementname.focus();
}
</script>
Then add an attribute to your body tag like so:
<body onLoad="setfocus()">
That’s fairly self-explanatory there. It basically says that this script will start when the page loads, and will set the focus on this page to the specified form and a specified element in that form, both referenced by their name attribute. You just modify the script in the head with the names of the form and the element on your page that you want this to catch.
It’s important that you only use this trick on pages that are very quick to load, as otherwise a user may already be busy filling in a form on the page. In that case, you don’t want to snatch away the focus onto another element.
