7.4. Add help text directly to the `<label>` tags

Help text must be included in the <label> tags.

This particularly applies to:

Indications such as “Required field”.
Instructions on how to format the input such as MM/DD/YYYY.
Information about the type and maximum size of files that can be sent.
Etc.

<label for="date">
   Date of Birth
   <span>(MM/DD/YYYY)</span>
</label>
<input type="date" id="date" name="date" autocomplete="bday" />

<label for="number">
    Your client number
    <input type="text" id="number" name="number" aria-required="true" />
    <span>i.e., BT-VZ</span>
</label>

Note

In some cases, because of a specific design layout for example, the help text cannot be included in the <label>.

In these cases:

Add the id attribute to the tag containing the help text.
Populate the id with a unique value.
Add the aria-describedby attribute to the corresponding field.
Populate aria-describedby with the id value included in the help text.

<label for="document">
   Add a document to your case
</label>
<input type="file" id="document" name="document" aria-describedby="formats" />
<h2>Documents currently in your case</h2>
<ul>
   <li>CV</li>
   <li>Cover Letter</li>
</ul>
<p id="formats">Accepted formats: pdf or doc.</p>

Note that the aria-describedby attribute can reference several id values.

Warning

The placeholder attribute must not be used for entry aids that are essential for understanding the type of data to be entered.

It must be used only for secondary entry aids, that are not essential for understanding the field.

Find out more

Comments

Add a comment

Updates

10 December 2021: In the placeholder section, the code example has been removed and the text has been updated for clarity.

7.4. Add help text directly to the <label> tags