Accessible form structure
Write useful instructions
Place concise help where people encounter it and connect control-specific instructions with aria-describedby when needed.
8 minute lesson
Tell people about a requirement before they submit. An error should not be the first place they learn the password length or accepted file type.
Put general instructions near the form heading. Put field-specific help beside the field:
<label for="username">Username</label>
<p id="username-help">Use 3–20 letters, numbers, or hyphens.</p>
<input
id="username"
name="username"
aria-describedby="username-help"
minlength="3"
maxlength="20"
pattern="[A-Za-z0-9-]+"
>
aria-describedby lets assistive technology associate the extra instruction with the input. The visible paragraph still helps everyone else.
Keep help concise and concrete. “Enter a valid value” explains nothing. “Use 3–20 letters, numbers, or hyphens” tells the person what will pass.
Do not put essential instructions only in a tooltip or placeholder. They can disappear, be difficult to reach with a keyboard, or never be discovered.
The server must enforce the same contract. If the page says 20 characters but the endpoint allows only 16, the interface creates avoidable failures.
Read the form without touching it. Can you predict every required format and limit before submitting? If not, move the missing instruction next to the relevant field.
Lesson completed