7.4. Add help text directly to the
Help text must be included in the
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.
<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>
In some cases, because of a specific design layout for example, the help text cannot be included in the
In these cases:
- Add the
idattribute to the tag containing the help text.
- Populate the
idwith a unique value.
- Add the
aria-describedbyattribute to the corresponding field.
idvalue 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
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
Add a comment
- 10 December 2021
- In the placeholder section, the code example has been removed and the text has been updated for clarity.