Rule n° 77 - Each form label is visually associated to the field that it describes.

Goal

• Allow users to unambiguously identify the form’s fields and the type of information they are expected to input.
• Prevent input errors.
• Simplify and speed up use of the form, especially on a mobile device or for users of screen magnifiers and, more generally, for any user employing the zoom function.
• Improve the accessibility of content for people with disabilities.

Solution technique

Ensure that the visible label of each form field is displayed in the immediate vicinity of the relevant field, so that the relationship between them is unambiguous.

Avoid form layouts with a large space between a field and its label, or with an unusual position of the label - for example a label situated below the field, or a checkbox label placed above it.

Moyen de contrôle

For each form

• Make sure that each form label is displayed in the immediate vicinity of the field concerned on all screen sizes (be careful with mobile phone screens);
• Check that the label is in a predictable position: above or to the left of a field except for radio and checkbox input fields where it can be to the right or to the left of the field.

What is immediate proximity depends on the context, but it is of the order of around thirty pixels maximum for a label placed to the left of the control, one line spacing for a label placed above the control and a few pixels for the label of a radio or check box.