Form help text: make constraints + examples obvious

A short, practical UI accessibility note for games and web UIs. No tracking.

Try the micro-demo: helptext-demo.html

It compares a placeholder-only “label” (BEFORE) vs a persistent <label> (AFTER).

What goes wrong

Placeholders can be useful as examples, but they’re a poor substitute for a real label. If the placeholder is the only label:

It disappears when you type, so the field becomes ambiguous.
It’s easy to lose context when switching between fields or correcting errors.
Many people with cognitive/attention differences benefit from persistent cues.

What to do instead

Use a real <label for="…"> that stays visible.
Keep the placeholder for an example (e.g., name@example.com), not the label itself.
Ensure the label text is specific (e.g., “Email address” not just “Email”).

Minimal sketch:

<label for="email">Email address</label>
<input id="email" type="email" autocomplete="email" placeholder="name@example.com" />

That’s it. The important part is: the label doesn’t vanish once the user starts typing.

Minimal pattern (HTML)

<label for="username">Username</label>
<div id="username-help">3–16 characters. Letters, numbers, and _. Example: sky_pilot7.</div>
<input id="username" name="username" aria-describedby="username-help" autocomplete="username" />

Note: keep help text in the DOM (not only in a hover tooltip), and keep it near the field visually.