Required fields

Impact: Strong to major

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

Explanation

When a field is required, it is necessary to make a good restitution to all users. This restitution must be visual and indicated in the code.

There is no requirement that a required field be systematically indicated to the user, it is useless to do on a single field of a search engine. However, if you indicate the required fields, this must be done in an accessible way.

Required fields must be positioned in the code before the submit button.

It is not always necessary to make fields required. When a form has only one field (search form, newsletter subscription), there is no need to make it required.

Text indication in the label

The most robust solution: indicate by an explicit term the required nature of the field directly in the label (label, title, aria-label…).

<label for="name">Name<em aria-hidden="true"> (required)</em></name>
<input type="text" name="name" id="name" required>

You will notice the addition of the attribute aria-hidden="true" which allows you not to vocalize the information. This will avoid redundancy of information in case the field has an attribute required or aria-required.

Indication by a symbol

It is very common to find the required field indication by means of an asterisk. This practice is completely consistent if you give a caption to this symbol before the form concerned.

<p aria-hidden="true">Fields marked with an asterisk (*) are required</p>
<form>
    <label for="name">Name<em aria-hidden="true"> *</em></label>
    <input type="text" name="name" id="name" required>
</form>

Indication by colour

In case the color is used to indicate the required character of the field, it is necessary to add a symbol or an explicit text.