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

When error messages and suggestions are placed next to the corresponding form fields, they need to be added directly into the <label> tag.

Tip

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>
</label>
<input type="text" id="name" name="name" required aria-invalid="true" />
<label for="email">
   Your email *
   <input type="text" id="email" name="email" required aria-invalid="true" />
   <span>Please provide a valid email format (example@domain.com)</span>
</label>

Note

In some cases, because of a specific design layout for example, it is not possible to place the error message directly into the <label>.

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 
</label>
<input type="file" id="document" name="document" aria-invalid="true" aria-describedby="formats error" />
<h2>Documents currently in your file</h2>
<ul>
   <li>CV</li>
   <li>Cover letter</li>
</ul>
<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.

Comments

Add a comment

Required fields are marked *.

Back to top