Accessible forms: labels, error text, and focus order

Key takeaway

Accessible forms come down to three fixes: give every input a real, associated label (placeholder text isn't a label), write error messages that name the field and the fix instead of "invalid input," and keep tab order matching the visual order. These are also exactly where conversions quietly leak — so getting them right pays twice.

Forms are where a lot of sites lose both accessibility and conversions at the same time — a screen-reader user can't tell what a field wants, and a sighted user abandons after a vague error. Three fixes handle most of it.

1. Every input needs a real, associated label

Placeholder text is not a label — it disappears the moment someone types, leaving a screen-reader user with a field that has no name. Give each field a visible label that's programmatically tied to the input, so its accessible name is always there.

What a properly labeled field has

Visible label: Its own words on screen — never placeholder text that vanishes the moment someone types
Programmatic link: The label is associated with the field, so assistive tech announces the right name
Autocomplete hint: Standard hints (name, email) so browsers and password managers can fill it reliably

2. Error text that says what to do

"Invalid input" helps no one. Tie the message to the field, describe the fix, and make sure assistive tech announces it.

Tip

Associate errors with their field via aria-describedby, and don't rely on color alone — a red border is invisible to a colorblind user and to a screen reader.

3. Logical focus order

Tab order should follow the visual order. When it jumps around — often because of CSS reordering — keyboard users get lost.

Watch out

Never remove focus outlines to make a design look cleaner. For keyboard users, the focus ring is the only way to know where they are.

We remediate exactly these issues across components and templates — aligned to WCAG and built into your design system so accessibility ships by default, not as a scramble before an audit.

More Bytes