Forms are a great way of collecting data from the web, whether this be a neat interface for contacting you with a message, or signing up for a service or providing checkout details. However, a form can be rendered useless without making use of the many accessibility features that are available in html markup to help users with disabilities or users of a different type of internet interface such as a pda or web tv.
An accesskey is an attribute used on form inputs which defines a keyboard charated that can be pressed, usually in conjuction with the Alt or command key, to switch the focus directly to the input control. It acts as a hot-key or short-cut key, similar to those you may use on your computer applications.
<em>I</em>nput Title:<input type="text" name="txtInput" id="txtInput" accesskey="i"/>
Accesskeys provide easier navigation through the form. Accesskeys probably do not provide extra help to blind people using screenreaders, more likely users are people that are unable to navigate using a mouse. People that have difficulty getting the mouse to hover over a link or a form input are more likely to use accesskeys. Example people may be those that have cerebral palsy, which makes some things hard although they are fortunate enough to be able to see the whole page at once, or people who have suffered alot from typing or been involved in an accident.
Although accesskeys are a good thing to use, they aren't very useful if you don't tell the user what letters to use for each field. We need to emphasise the letter in the field title that provides the accesskey letter (It makes sense to use a letter in the title for the access key rather than a random letter). If we use the <em> element we can use stylesheets to change the appearance to whatever we need. For this article, underlines have been used. Underline styles are good here because they do not interfere with the site design but are still quite recognisable; especially since applications use the same format to indicate their own hotkeys.
For those people that can make use of the mouse, its always better to increase the clickable area for getting focus on the control. Lets move onto labels...
Wouldn't it be nice to be able to click on the text next to a field input and immediately have the cursor position itself inside that input box or tick a check box or radio button? It can be done and without any scripting either. The label element is the tag that does this job for you and has been available since HTML 4.0. The possible reason that labels never caught on originally was because they had limited support in IE4 and were not supported in netscape navigator. Perhaps they just got forgotten about by many developers until the need for accessiblity for all became more important.
To explicitly link a label to a control, the "for" attribute is used, where the value of "for" is the id of the control. It is also possible to implicitly link the label element to another control by putting the chosen control between the opening and closing label tags, however this does not seem to work in Internet Explorer.
Like form controls you can add accesskey attributes to the label element to provide focus to the label using the keyboard. In turn will direct focus straight onto the form control automatically.
The tab button is the button above "caps lock" which would normally indent paragraphs in applications like Microsoft Word. By using the tabindex attribute on the label and/or a form control you can specify a logical order that the focus moves between controls when the tab key is pressed.
<label for="txtInput" accesskey="t" />Input <em>T</em>itle</label> <input type="text" id="txtInput" name="txtInput" tabindex="1" />
So we have gone through three extra ways to add navigation to your forms, but what about helping your users with visual layout? Radio buttons and Check boxes are frequently used for multiple choice type questions, yet it is sometimes difficult to see where the answers and controls group with the original question. The use of stylesheets can dramatically help here, although this would not help much when stylesheets are turned off or if the browser does not support stylesheets. So what is the answer for grouping controls?
The field set element is a very useful grouping element for grouping your multiple choice questions. By default this element will render your question with a border around your multiple choice answer controls, very neat!
The lengend element is used in conjunction with the fieldset element to provide a caption for the fieldset. In the case of a multiple choice group, the legend is best used as the main question for the group.
<fieldset> <legend>What is you favourite colour?</legend> <label> <input type="radio" accesskey="r" tabindex="1" value="red" name="colour" id="colourred"/> <em>R</em>ed </label> <br/> <label> <input type="radio" accesskey="y" tabindex="1" value="yellow" name="colour" id="colouryellow"/> <em>Y</em>ellow </label><br/> <label> <input type="radio" accesskey="b" tabindex="1" value="blue" name="colour" id="colourblue"/> <em>B</em>lue </label> <br/> </fieldset>
The fieldset element doesn't mean you should limit its use to radio buttons and check boxes, you can group whole sections of controls to provide better structure to your form. ie for grouping contact details and grouping enquiry details separately
By grouping controls, you are making it easier for users to understand their purpose while simultaneously facilitating tabbing navigation for visual user agents and speech navigation for speech-oriented user agents. You will also make your form more accessible if you make proper use of this element.