- 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.
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.
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
checkbox input fieldswhere 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.
Business application and benefits
The rules should be applied to your projects from the design phase through to post-implementation , and they should be understood by all professionals with web and customer experience (CX) responsibilities: from strategy to operations, marketers to project managers, and editorial to technical staff. The benefits of using this ruleset are numerous, including improving customer satisfaction, web performance, and e-commerce, and expanding your client base, while also decreasing your errors and costs.
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.