Building Accessible Forms That Actually Work

Forms are how users give you information, but most forms on the web are broken for people with disabilities. Missing labels, unclear error messages, and keyboard traps make forms unusable for millions of people. Fixing these issues is not hard, it just requires attention to detail.

Every input needs a label. Not a placeholder, an actual label element. Placeholders disappear when you start typing, which makes it hard to remember what the field was for. Labels stay visible. Use the 'for' attribute on the label and match it to the input's 'id' attribute. Screen readers use this connection to announce what each field is for.

Use the right input types. Email fields should be type='email', phone numbers should be type='tel', and dates should be type='date'. This gives users the right keyboard on mobile devices and enables browser validation. It also helps screen readers understand what kind of data you are asking for.

Error messages need to be clear and connected to the field. When someone makes a mistake, do not just turn the border red. Add text that explains what is wrong and how to fix it. Use aria-describedby to connect the error message to the input so screen readers announce the error when the field gets focus.

Make sure your form works with just a keyboard. Some people cannot use a mouse. Tab through your form and make sure you can reach every field, see which field is focused, and submit the form without touching the mouse. If custom dropdowns or date pickers do not work with the keyboard, replace them with native HTML elements or fix the keyboard support.

Group related fields with fieldset and legend elements. If you have a billing address and a shipping address, wrap each group in a fieldset with a legend that says 'Billing Address' or 'Shipping Address'. This gives screen reader users context about which section they are in.

Required fields should be marked clearly, both visually and in code. Use the 'required' attribute on the input and add text or an icon that sighted users can see. Do not rely on color alone because some users are colorblind. A red asterisk is not enough if there is no text saying 'required'.

Test your forms with a screen reader. NVDA is free on Windows, VoiceOver is built into macOS. Turn it on and try to fill out your form without looking at the screen. If you get confused or stuck, your users will too. This is the fastest way to find accessibility problems you did not know existed.

Accessible forms are better for everyone. Clear labels help all users. Good error messages reduce support requests. Keyboard navigation makes forms faster to fill out. You are not just checking a compliance box, you are building a better product.