Labels, errors and autocomplete make forms usable for everyone.

The guidance#

Every input gets a visible label (label element, not placeholder). Errors: text + color + icon (never color alone), announced with aria-live. Add autocomplete attributes for real-world data.

In markup#

html
<label class="block text-sm font-medium">Email
  <input type="email" autocomplete="email" class="mt-1 w-full rounded-lg border px-3 py-2 focus:ring-2 focus:ring-blue-500" />
</label>
<p class="mt-1 text-xs text-red-600" role="alert">Enter a valid email.</p>

Checklist#

  • Tested with keyboard only
  • Screen-reader spot check
  • Contrast verified for new pairs
  • Reduced-motion behavior confirmed
  • Zoomed to 200% without loss

accessibility/index|Accessibility hub · utilities/interactivity/sr-only|sr-only