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.

Implementation

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.

Control

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.

By Opquast - Read the license

Discover Opquast training and certification

The objective of these rules and the Opquast community mission is ‘making the web better’ for your customers and for everyone! Opquast rules cover the key major areas of risk that can negatively affect website users such as privacy, ecodesign, accessibility and security.

Opquast training has already allowed over 19,000 web professionals to have their skills certified. Train your teams, contact us

We offer a 1 hour free discovery module.