WebAIR

Are all labels positioned so that they are near the control that they label? (FAC04)

Why Is This Important?

The appropriate positioning of a label makes it much easier for a person to identify the purpose of a form control. It allows a person to make an association between the label and the form control. This is particularly important if the form is complex or if a person is looking for a specific form field.

How To Fix The Problem

Position the label close to the control that it labels. Try to position the label before the form control. In left-to-right languages this will be either to the left of the field or above it. In right-to-left languages, this will be either to the right of the field or above it. The exception to this is labels for radio buttons and checkboxes, which are positioned after the field.

Example

// Labels are positioned before text input fields
<form id="login_details" action="processor.php" method="post">
<label for="name">Your Name:</label><input type="text" name="name" id="name" />

 

// Labels are positioned after radio buttons and checkboxes
<input type="radio" name="sex" id="male" value="male"><label for="male">Male</label><br />
<input type="radio" name="sex" id="female" value="female"><label for="female">Female</label>
</form>

Further Information

  1. http://juicystudio.com/article/label-positioning.php
  2. http://webaim.org/techniques/forms/screen_reader#labels