Input errors

Impact: Strong to major

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

RGAA criteria: Criterion 11.10 - Criterion 11.11

Explanation

When the form returns errors, the error must be mentioned either:

• in the field label (<label>, title, aria-label, aria-labelledby) ;
• in a text passage before the form, which contains a list of all the incorrect fields;
• in a text passage linked to the input field with the attribute aria-describedby.

You can also indicate these errors with the aria-label property and the aria-invalid property. In these cases, you must always provide a visible alternative for all other users.

Input error in the label and input help after the field

<label for="birthday">Birthday <em aria-hidden="true">(required)</em> Error, Please fill in this required field, example 1996/02/16</label>
<input type="text" name="birthday" id="birthday" required aria-invalid="true" aria-describedby="format-date">
<p id="format-date">yyyy/mm/dd</p>

• Required information in the <label> is not rendered in the technical assistance (aria-hidden) in order to avoid duplication of information because the required attribute already exists on the <input>. This information is therefore purely visual.
• The user is informed of the error on the field thanks to aria-invalid.
• An input help is indicated below the field and related by the aria-describedby attribute and the associated id.

Input error located at the top of the form

<form action="#">
    <div class="alert" role="alert">
        <ul>
            <li id="name-required">This field is required</li>
        </ul>
    </div>
    <label for="name">Name <em aria-hidden="true">(required)</em></label>
    <input type="text" name="name" id="name" required aria-invalid="true" aria-describedby="name-required">
    <button type="submit">Contact us</button>
</form>

• The content added in javascript in the alert element is rendered (See Status messages).
• Required information in the <label> is not rendered in the technical assistance (aria-hidden) in order to avoid duplication of information because the required attribute already exists on the <input>. This information is therefore purely visual.
• The user is informed of the error on the field thanks to aria-invalid.
• Error information is rendered using the aria-describedby attribute and the associated id.

Input error after the field

<label for="birthday">Birthday dd/mm/yyyy <em aria-hidden="true">(required)</em></label>
<input type="text" name="birthday" id="birthday" required aria-invalid="true" aria-describedby="date-error">
<p id="date-error">Incorrect value, example 02/06/1996</p>

Error message related to several fields

<div>
    <label for="email">Email name@domain.com <em aria-hidden="true">(required)</em></label>
    <input type="text" name="email" id="email" required aria-describedby="email-error" value="jo@mail.net">
</div>
<div>
    <label for="email-conformation">Email name@domain.com <em aria-hidden="true">(required)</em></label>
    <input type="text" name="email-conformation" id="email-conformation" required aria-describedby="email-error" value="jo@mail.not">
</div>
<p id="email-error">The fields are not identical, example john.doe@net.com</p>