Correctly labelled form controls ensure that your forms are usable to the widest possible audience. Explicitly labelling form controls is beneficial for people using assistive technology, and correctly positioning form prompts can benefit visitors with mobility and cognitive difficulties.
The HTML Techniques for WCAG 2.0 currently proposes a technique to ensure that the prompt for form controls is positioned appropriately, but there is a proposal to deprecate the technique. I think it would be a mistake to deprecate this technique, as correctly positioned form prompts help people who are not fortunate enough, or don't require assistive technology.
Author: Gez Lemon
Accessibility and Usability
The differences between accessibility and usability are often blurred. Usability is concerned with ensuring that documents are perceivable and understandable. Visitors can easily comprehend websites that follow usability principles, because the pages will look and feel how they expect, particularly with user interface components in forms. Accessibility is purely concerned with ensuring that documents are usable by people with disabilities. As cognitive disabilities are included in accessibility, it follows that usability and accessibility are intertwined, as usability guidelines help people with cognitive problems.
Positioning Prompts for Form Controls
Generally, prompts for form controls should be placed immediately to the left of the associated control, or immediately above the associated control. The positioning of prompts for form controls has its roots in Human-Computer Interaction (HCI), an area of computer science that studies the relationship between user interfaces, and their usability. HCI is based on results from cognitive psychologists' findings into perception, memory, and learning, and applying it to interfaces used in computer applications. A major part of HCI is choosing the appropriate control for the task, but the layout of forms is also an important part of the cognition process.
Forms that are laid out vertically with the prompts to the left of the form control have the advantage that the user can quickly scan down the left-hand side to determine what type of information they are required to provide. This is generally the best approach, although not always practical. For example, in languages such as German where some words are a lot longer than others, it can create a situation where some prompts may be a long way from their associated form control, which obviously has an impact on usability. In these circumstances, positioning the prompt above the form control may be more appropriate.
In HTML, prompts are usually marked up with the
label element. The reason for this is that it provides an explicit association to the form control for assistive technologies. For example, a screen reader will read the associated label for a particular form element if it has been marked up with a label.
<label for="surname">Surname</label> <input type="text" size="20" name="surname" id="surname"/>
Strictly speaking, the associated text for a radio button or a checkbox isn't the prompt, but part of the control itself. Radio buttons and checkboxes are used to toggle between states, and in the case of radio buttons, may be grouped by giving each radio button the same name, so that the choice is mutually exclusive from a set of options. For this reason, the associated text should be marked up with a
label, and positioned to the right of the control, to create a button-like control with a larger target area. If a prompt is required for checkboxes or radio buttons, the prompt should be positioned to the left or above the group, as they are with other controls, except the prompt wouldn't be marked up as a label. Marking up the associated text for radio buttons and checkboxes in a label increases the target area for people with mobility problems, and obviously helps people with cognitive problems through consistency.
<input type="checkbox" id="updates" name="updates" value="Receive Updates"/> <label for="updates">Receive regular updates?</label>
Deprecating Label Positioning
The HTML Techniques for WCAG 2.0 currently has a technique for label positioning. There is a proposal to deprecate this technique, with the rationale that positioning shouldn't matter if the labels are explicitly associated with the appropriate control. I think the positioning of prompts is important for accessibility, as in the case of radio buttons and checkboxes, it increases the target area for people with mobility difficulties, and clearly laid out forms helps people with cognitive problems. Explicitly labelled prompts are useful to people using assistive technology, but only a small percentage of people with accessibility requirements use assistive technology, mainly due to the cost. It also adds weight to those who feel that accessibility guidelines are geared to people with visual impairments, as two major groups could be left out if the proposal to deprecate the technique is upheld.
I also think that the wording for the technique as it stands is misleading:
The label must immediately precede its control on the same line (allowing more than one control/label per line) or be in the line preceding the control (with only one label and one control per line).
As I mentioned earlier, prompts should be placed either immediately before, or immediately above the control. The language in the technique uses the word "label", which is an element in HTML. With checkboxes and radio buttons, the label is part of the control, and should be positioned to the right of the control, and if a prompt is necessary, the prompt should be positioned immediately to the left or above the group; not the label.