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.
Important

Input error messages relating to the use of the wrong data format must include an example of actual input.

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>
<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>