Skip to content
GreenSnippets

Accessible form field with label, hint and error

Associate labels, help text and validation errors with an input so screen readers announce them.

HTML
<div class="field">
  <label for="email">Email address</label>
  <input
    id="email"
    name="email"
    type="email"
    autocomplete="email"
    required
    aria-describedby="email-hint email-error"
    aria-invalid="true"
  />
  <p id="email-hint">We only use this to send your receipt.</p>
  <p id="email-error" role="alert">Enter an email address like name@example.com.</p>
</div>

How it works

Every input needs a real <label for>; a placeholder is not a label. Link help text and error messages with aria-describedby so they are read with the field. Mark invalid fields with aria-invalid="true" and expose errors with role="alert" so they are announced when they appear. Use the right type and autocomplete values to get the correct mobile keyboard and browser autofill.

This snippet has been reviewed but was not executed by an automated test. Test it in your own environment before relying on it.

Related snippets