Accessibility

Form labels

Every input needs a label. Sighted users can see them, visually-impaired users can hear them and motor-impaired users can more easily set focus to the related input.

Put labels above the input. This works well with varying content, states, screen sizes and needs fewer eye fixations.

​Placeholders are problematic — both as makeshift labels and as a means of storing additional hint text. Instead, put hint text below the label and above the input.

Avoid Messages Under Fields — Adrian Roselli

​Float labels are also problematic. They have many of the same problems that placeholders have — and some of their own.

Seriously, don’t mess with labels.

Form validation

Avoid Default Field Validation — Adrian Roselli

Don't disable buttons. Instead, allow users to submit invalid forms, then show them descriptive, actionable error messages. Use help text to give users the best chance of getting it right on the first try.

Don't validate while the user types. Validate when the form is submitted. Use JavaScript to avoid the server round-trip if there are client-side validations you can do.

Be tolerant of mistakes like extra spaces, dashes and slashes. Do the hard work so users don’t have to. For example, if you need a phone number, make sure you can correctly parse the different ways a user might type it in. Use help text to guide users on writing a standard format.

Error handling

Put errors in a list at the top of the page. Clicking on an error focuses the relevant input. For a group of inputs (like radio buttons), set focus to the first input.

Put error messages just above the field, too. Avoid Messages Under Fields — Adrian Roselli

Prefix the word "Error" to the document's <title>. It’s the first thing announced by screen readers when the page loads.

Error messages should be concise, specific, use plain language and avoid pleasantries like ‘please’.