Accessible Form Design: Why Autofill and Labels Matter

Forms are where accessibility problems cost the most: if someone can't complete checkout or sign-up, they leave. The good news is that accessible forms are faster for everyone, and most fixes are small.

Visible labels for every field

Every input needs a real <label> linked to it. Screen readers announce it, and clicking it focuses the field. Placeholder text is not a label: it disappears as soon as you type, often has poor contrast, and leaves people guessing what a field was for.

Autofill: the autocomplete attribute

Adding the right autocomplete value, such as name, email, tel, street-address, postal-code, or cc-number, lets browsers and password managers fill fields correctly. WCAG 2.1 requires this for fields that collect the user's own information. It helps people with motor and memory disabilities, and it makes forms faster for everyone.

Clear errors

• Say what went wrong and how to fix it, next to the field: "Enter a date like 03/15/2026", not "Invalid input".
• Don't rely on red alone; add an icon and text.
• Connect the message to the field with aria-describedby so screen readers read it.
• Keep what the user typed when showing errors.

Structure and keyboard

• Group related fields, like an address, with fieldset and legend.
• Mark required fields in the label, not just with color or an asterisk alone.
• Make sure every field and button works with the keyboard, in a logical tab order, with a visible focus outline.
• Don't clear a form or change pages when someone simply moves between fields.

Test it

Fill in the form using only the keyboard, then with your browser's autofill, then with a screen reader. Also check label and error text contrast with a contrast checker.