Accessible forms: labels, instructions, and error handling

Every field needs a programmatic label

Visible labels should be connected to inputs using for/id or aria-labelledby. Placeholder text is not a label.

If you hide the visual label, keep it available to assistive technologies.

Instructions and required fields

Tell users what is required before they submit. If a field has formatting rules, show them inline.

• Mark required fields consistently
• Use helper text for formatting (e.g., phone, password)
• Avoid relying on color alone for meaning

Errors should be clear and announced

Error summaries help users fix multiple issues quickly. Put focus on the summary and link to each field.

Use aria-live regions for inline errors when fields validate on blur.