Relevance of field labels

Impact: Strong to major

Users mainly impacted: Blind, visually impaired, physically impaired, mentally impaired.

RGAA criteria: Criterion 11.1 - Criterion 11.2

Explanation

A field label is a required text that explains what data is expected by the field (surname, first name, date of birth, etc.).

To be compliant, a label must:

• be relevant;
• be correctly connected to the corresponding field;

Relevance of field labels

A label is relevant if it helps to understand the function of the field to which it is linked. It is not necessarily necessary to write large sentences, but to remain concise. The user must understand what is expected from his entry. For example, for identity data, a “Last name” label, a “First name” label and a “Telephone” label are relevant labels that help to understand what to write on them.

Properly bound labels

Several HTML methods are at your disposal to label a form field.

For / id

The most common and also the best method is the HTML relationship between the field and its label:

<label for="name">Name</label>
<input type="text" id="name">

The advantage of this implementation over all the others is that it extends the click area. Indeed, when the user clicks on the label, the focus is given directly to the corresponding field. In the case of a checkbox, clicking on the label allows you to check the checkbox.

Title attribute

A field can also be labeled via the title attribute.

<input type="text" id="recherche" title="Keyword to search for">

This implementation is compliant, but we invite you to use this implementation only in limited cases. Indeed, the title attribute is only visible when the mouse hovers over it. A user who sees and navigates exclusively on the keyboard will not access this information. In the case of a complex form, this type of labelling can be a barrier to understanding for some users. In addition, for some motor disabilities, the click area is smaller when the label is not visible.

The title attribute should preferably be used in cases where the context of the form field allows to understand its function, for example, the search field of the site. It is then accompanied by a “Search” validation button or an image button in the shape of a magnifying glass, which allows the function of the field to be deduced.

With aria-label attribute

<span class="fas fa-mobile" aria-hidden="true" title="Phone"></span>
<input type="text" id="phone" aria-label="Phone" aria-describedby="help-phone">
<span id="help-phone">0768990886</span>

In technical assistance it is the aria-label attribute that identify the field. In a visual way, the information is transmitted through the icon and the title attribute on the icon. The use of the aria-described attribute allows here to make the relation with the input help.

Placeholder, be careful

placeholder is not considered as a valid labelling method, if it is implemented alone. The first reason is its insufficient contrast.

Then, if we take into account the order of restitution of the elements defined by the HTML5 specification, the placeholder attribute is restored before the title attribute. In fact, if important information is placed in the title attribute that is not found in the placeholder attribute, then the field is mislabelled because the user is losing information.

If you still want to use placeholder, make sure either that there is no title attribute on the corresponding field, or that the content of the title attribute is the same as that of the placeholder.