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.

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" 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>
</label>

Note

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:

Add an id attribute to the element that contains the error message.
Give this id a unique value.
Add aria-describedby to the corresponding input field.
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