Stick a Label On It that says ‘I Am Accessible!’

Stick a Label On It that says ‘I Am Accessible!’

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:
click-me-anywhere

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

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








<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">

<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>



<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">


<label for="feedback">Feedback:</label>

<textarea name="feedback" id="feedback" cols="20" rows="5"></textarea>


TOP

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):

Sample Code
Choose Quarters








<fieldset>

<legend>Choose Quarters</legend>

<label for="fall08">Fall 08: </label>

<input name="quarter" id="fall08" type="checkbox" value="fall08"> <br>

<label for="winter08">Winter 08: </label>

<input name="quarter" id="winter08" type="checkbox" value="winter08"> <br>

<label for="spring08">Spring 08: </label>

<input name="quarter" id="spring08" type="checkbox" value="spring08"> <br>

<label for="summer08">Summer 08: </label>

<input name="quarter" id="summer08" type="checkbox" value="summer08"> <br>

</fieldset>


Note: The fieldset can be used to group together any variety of
form input elements - not just groups of the same type as detailed
above. It’s also perfectly legal to use nested fieldsets, if you so
desire, as shown below:

Personal Details
Address Details

Telephone Details


TOP

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:

<select name="choice">

<option selected="selected" label="none" value="none">none</option>

<optgroup label="Group 1">

   <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>

</optgroup>

<optgroup label="Group 2">

   <option label="cg2a" value="val_2a">Selection group
2a</option>

   <option label="cg2b" value="val_2a">Selection group
2b</option>

</optgroup>

</optgroup>

</select>

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.

browser samples of optgroup

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

TOP

How do I change the Style?

You can easily change your form's look by using an external css. Insert the following code at the
top of the page before </head>.

<link href="/sites/default/files/accessibility/form.css" type="text/css" rel="stylesheet">

The form source is calling for "whiteform" as shown below. This is all that is needed to change the style.

<form id="whiteform" action="/..." method="post">

<fieldset>

<legend>Personal Information</legend>

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

<br>
...

TOP