G162
Technique Link: http://www.w3.org/TR/WCAG20-TECHS/G162.html
Status
- In Progress
Notes on WCAG techniques sections
- Applicability: no change needed
- Description: Add note that on smaller screen sizes, better to position labels above form fields to avoid horizontal scrolling
- Examples: no change needed
- Related Techniques: no change needed
- Tests: no change needed
Original
When labels for form fields are positioned where the user expects them visually, it is easier to understand complex forms and to locate specific fields. Labels for most fields are positioned immediately before the field, that is, for left-to-right languages, either to the left of the field or above it, and for right-to-left languages, to the right of the field or above it. Labels for radio buttons and checkboxes are positioned after the field.
These positions are defined because that is the usual (and therefore most predictable) position for the label for fields, radiobuttons and checkboxes.
Labels are positioned before input fields since the fields sometimes vary in length. Positioning them before allows the labels to line up. It also makes labels easier to locate with a screen magnifier since they are immediately before the field and also can be found in a vertical column (when the start of the fields line up vertically). Finally, if the field has data in it, it is easier to understand or check the data if one reads the label first and then the content rather than the other way around.
Checkboxes and radio buttons have a uniform width while their labels often do not. Having the radio button or checkbox first therefore allows both the buttons and the labels to line up vertically.
Proposed Changes
When labels for form fields are positioned where the user expects them visually, it is easier to understand complex forms and to locate specific fields. Labels for most fields are positioned immediately before the field, that is, for left-to-right languages, either to the left of the field or above it, and for right-to-left languages, to the right of the field or above it. Labels for radio buttons and checkboxes are positioned after the field.
These positions are defined because that is the usual (and therefore most predictable) position for the label for fields, radiobuttons and checkboxes.
Labels are positioned before input fields since the fields sometimes vary in length. Positioning them before allows the labels to line up. It also makes labels easier to locate @@when using zoom features@@ since they are immediately before the field and also can be found in a vertical column (when the start of the fields line up vertically). @@The horizontal distance between labels and fields is best minimized to assist users with low vision and cognitive disabilities to make the association between the label and the field and to promote the label and field appearing in the view when content is zoomed. On smaller widths screens, positioning the labels above the field avoids horizontal scrolling.@@ Finally, if the field has data in it, it is easier to understand or check the data if one reads the label first and then the content rather than the other way around.
Checkboxes and radio buttons have a uniform width while their labels often do not. Having the radio button or checkbox first therefore allows both the buttons and the labels to line up vertically.