Accessible Forms

Definition

Forms designed so that users with screen readers or cognitive disabilities can clearly understand what data is required, how to fix errors, and what each input does.

Explain Like I'm New

If you just put `<input placeholder="Email">`, a sighted user knows what to do. But a screen reader might skip placeholders, and when the user types, the placeholder disappears, leaving users with memory issues confused about what they are typing. Accessible forms use explicit labels, error messages connected via ARIA, and clear visual cues.

Real World Example

When a form submission fails because the password is too short, an accessible form uses `aria-describedby` to link the specific input field to the red error message text below it.

Common Use Cases

•Checkout flows
•Sign up pages
•Government websites

Interactive Example

Interview Questions

basic

Why shouldn't you rely solely on color (like turning a border red) to indicate a form error?

intermediate

What does the `aria-describedby` attribute do?

Flash Cards

Question

Why not just color?

Click to reveal answer

Answer

Colorblind users cannot see the red border, and blind users using screen readers don't know the border changed color. You must always provide text-based errors and an ARIA state (like `aria-invalid="true"`).

Question

What does aria-describedby do?

Click to reveal answer

Answer

It links an input to a separate block of text. When the user focuses the input, the screen reader reads the label, and THEN reads the text from the `aria-describedby` element (perfect for 'Password must be 8 chars' hints).