7.6. Add error messages and correction suggestions directly into the <label> tag

When error messages and suggested corrections are placed next to the relevant form fields, they need to be added directly into the <label> tags.


In addition to the error message, good practice is to add aria-invalid="true" to the field.

<label for="name">
   Your name *
   <span>Please fill in your name</span>
<input type="text" id="name" name="name" autocomplete="family-name" aria-required="true" aria-invalid="true" />
<label for="email">
   Your email *
   <input type="email" id="email" name="email" autocomplete="email" aria-required="true" aria-invalid="true" />
   <span>Please provide a valid email format (example@domain.com)</span>


In some cases, because of a specific design layout for example, the error message cannot be directly included in the <label> tag.

In that case:

  1. Add an id attribute to the element that contains the error message.
  2. Give this id a unique value.
  3. Add aria-describedby to the corresponding input field.
  4. Add the id value of the error message to this aria-describedby attribute.
<label for="document">
   Add a document to your file 
<input type="file" id="document" name="document" aria-invalid="true" aria-describedby="formats error" />
<h2>Documents currently in your file</h2>
   <li>Cover letter</li>
<p id="error">File format incorrect.</p>
<p id="formats">Valid formats: pdf or doc.</p>

Note that aria-describedby can reference several id values.


Add a comment

All fields are mandatory.

Back to top