Labels and Instructions Matter

Every form field or control needs a clear, programmatic label — not just for sighted users, but for anyone using assistive tech like a screen reader or speech recognition.

Labels tell users what kind of input is expected. Without them, people using a screen reader might hear only “edit text” or “blank” with no clue what to do.

Good Practice

• Always associate <label> elements with their corresponding inputs using the for and id attributes.
• Include any formatting hints or requirements in the label or near the field — not just in placeholders.
• Use aria-labelledby or aria-label when native labels aren’t possible (e.g., icon-only buttons or search bars inside custom widgets).

Examples:

Good:

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

In this case, the label clearly indicates what the input is for, and the placeholder provides an example format. Try to avoid writing important instructions only in the placeholder, as it disappears when the user starts typing.

<section aria-labelledby="playable-characters-label">
  <h2 id="playable-characters-label">Playable characters</h2>
  <button aria-label="Select Mario as your character">Mario</button>
  <button aria-label="Select Luigi as your character">Luigi</button>
</section>

Here we use aria-labelledby to provide a label for the section, and aria-label to give each button a clear purpose that might be visibly clear but needs to be explicit for screen reader users.

Watch Out For

• Relying solely on placeholders for instructions.
• Missing labels on form fields or controls.
• Using vague labels like “Click here” or “Enter text” without context.
• Labels that don’t match the expected input (e.g., label says “Phone number” but input expects an email).
• Icon-only buttons with no accessible label.

Do this today: Inspect your forms. Hovering or placeholder text isn’t enough—make sure each input has a <label> or aria-labelledby.