Solutions: Checkpoint N, forms

Without doubt, one of the most useful tags you can use to make a form more accessible is the <label> tag. Some screen readers can get extremely confused when you start moving the text that relates to a given form input too far away from it. With the <label> tag, you can start to be a little more adventurous and still feel reasonably happy that your form will be accessible.
What does the label do?

The label is a signpost. It tells the browser/user agent/screen reader: "Hey, you see that form input over there? The one called ‘firstname’? Well, that belongs to me and make no mistake about it". Or, as you would have it in the more sober world of HTML:

<label for="firstname">First Name</label> <input type="text" name="firstname" id="firstname">

It creates an unambiguous link between the text and the input which is only broken if you introduce some sloppy markup (notably, by copy-pasting and forgetting to change some ids - remember, ids must be unique, you cannot have two elements on any page sharing the same id).

If you so desired, you could now move the text around and many (but not all) assistive devices would still understand what text relates to the form input:

<input type="text" name="firstname" id="firstname"> <label for="firstname">First Name</label>

There is another fringe benefit of using the <label> tag that might not be immediately obvious - by adding this tag, many browsers will allow you to click on the text contained in the <label> tag to focus on the input. This is particularly useful for the likes of checkboxes and radio buttons which have a very small hit area ordinarily:

Where Can I use a Label?
The <label> tag can be used on almost every form element, with the exception of buttons (the control comprises the associated text - no link to anything external is required). Below is a chart of form elements with examples of this handy little tag being put to use.

Using Labels in Forms

Sample	Code
First Name:	<label for="firstname">Name:</label> <input name="firstname" id="firstname" type="text">
Fall 07: Winter 07: Spring 07: Summer 07:	<label for="fall07">Fall 07: </label> <input name="quarter" id="fall07" type="checkbox" value="fall07"> <br> <label for="winter07">Winter 07: </label> <input name="quarter" id="winter07" type="checkbox" value="winter07"> <br> <label for="spring07">Spring 07: </label> <input name="quarter" id="spring07" type="checkbox" value="spring07"> <br> <label for="summer07">Summer 07: </label> <input name="quarter" id="summer07" type="checkbox" value="summer07">
Group: none Selection group 1a Selection group 1b Selection group 1c Selection group 2a Selection group 2b	<label for="group">Group:</label> <select name="group" id="group> <option selected="selected" label="none" value="none">none</option> <option label="cg1a" value="val_1a">Selection group 1a</option> <option label="cg1b" value="val_1b">Selection group 1b</option> <option label="cg1c" value="val_1c">Selection group 1c</option> <option label="cg2a" value="val_2a">Selection group 2a</option> <option label="cg2b" value="val_2a">Selection group 2b</option> </select>
Female: Male:	<label for="female">Female: </label> <input name="gender" id="female" type="radio" value="female"> <label for="male">Male: </label> <input name="gender" id="male" type="radio" value="male">
Feedback:	<label for="feedback">Feedback:</label> <textarea name="feedback" id="feedback" cols="20" rows="5"></textarea>
Fields marked are required. Name : or Name (required):	Required Fields <form> <p>Fields marked <img src="asterisk.gif" width="13" height="12" alt="Required!" /> are required.</p> <label for="namereq">Name <img src="asterisk.gif" width="13" height="12" alt="Required!" /> </label>: <input id="namereq" name="namereq" value="" type="text" /> ... <label for="label">Name (required):</label> <input id="label" name="namereq2" value="" type="text" /> </form>

When and How to Use the "title" Attribute

The examples above all have one thing in common. They all have a title next to the form element. Each textbox, checkbox and radio button has text next to it. What do you do if there is no text, or no title next to a form element? What if you have a questionnaire that repeats Disagree and Agree all down the right hand side of the page? Each radio button would not have the words "disagree" or "agree" next it. In this case, you should use the title attribute. Notice there is no <label> in each of the following examples.

Any form element that finds itself alone, without a description next to it, should use the title attribute. Otherwise, use <label>.

tabindex Attribute
The tabindex attribute was created to allow web developers to customize the tab order of web content. It should only be used in cases where the default tab order is not ideal, and when the tab order cannot be changed by rearranging items in the content and/or by altering the sytle sheet to reflect the best visual arrangement. These cases are rare. Under most circumstances, it is recommended that you avoid tabindex.

Grouping Elements Naturally
Heard of <fieldset> and <optgroup> before? No? Well let us introduce you to...

The Fieldset Entity
If you are presented with a list of 50 seemingly unrelated checkboxes to tick in a survey it’s very daunting. I wouldn’t bother - would you? But there is a saying ‘Divide and Conquer’, and it has a friend in the HTML entity <fieldset>.

Using fieldset you chunk up your 50 questions into, say, 5 clearly identifiable groups of topics, each with 10 properties/attributes. You increase the usability/accessibility by making the page clearer to the sighted user, or the user who may have cognitive difficulties.

How much it helps blind users is questionable as screen reader support for these elements is patchy (where present at all) and even if they were supported, it’s even more doubtful how easy it would be for the user to access the semantic meaning of these items. But … just because these elements are not fully supported by assistive devices now is no excuse not to use them. Get into good practices now and when the assistive technology can do something useful with it you can pat yourself on the back for being so forward-thinking.
An example of the fieldset in use (and its related entity legend):

The Optgroup Element
In the same way that you can logically group related form controls, you can use the <optgroup> tag to group options (predictably) used in a <select> tag. Let’s take a look at the markup:

You see what’s happening? The drop-down list has been grouped by group numbers, in the example above. Some browsers are able to render this information on screen, others ignore it. But like the fieldset example above, just because not all browsers or assistive devices can currently pick up this extra information is no reason not to use it.

Note: Don’t get confused between the <label> tag and the label attribute (which is only used on the <optgroup> tag)!