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#
<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
Related#
accessibility/index|Accessibility hub · sr-only