Picto thématique

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

In order for users to be able to immediately locate the explanatory label for each field, its location must not be confusing.

#Forms #Design #Accessibility

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

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.

Multidisciplinary verticles - accessiiblity, SEO, e-commerce, ecodesign etc..- starting from the foundational Opquast base.

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 11,000 web professionals to have their skills certified. Train your teams or your students, contact us