Form Tips

Give Every Form Element an Associated <label>

Form labels are often left out of designs for stylistic reasons, but they're essential for form accessibility. A label serves as both a click target and a form element's accessible name.

Inaccessible: Form Element Without a <label>

Receive promotional offers?
<input type="checkbox">Receive promotional offers?</input>

Try clicking on the "Receive promotional offers?" text. You'll notice that doing so has no effect whatsoever.

<input type="checkbox">
<label>Receive promotional offers?</label>

Again, clicking on the "Receive promotional offers?" text will have no effect. Additionally, a screen reader will not be able to provide any information about the checkbox other than that it's a checkbox and that it's checked or unchecked.

Accessible: Form Element with a <label>

<label>
	<input type="checkbox">
	Receive promotional offers?</label>

Now try clicking on the "Receive promotional offers?" text. Doing so will now properly toggle the checkbox because the text is a click target for the checkbox. A screen reader will also be able to provide information about the checkbox because the label text is associated with the checkbox.

Don't Remove Focus Rings

Focus rings act as the stand-in for a mouse pointer for keyboard-only users, so they should never be removed with CSS. Instead, they should be styled so that they match the site design.

It's also possible to use JavaScript to hide focus rings when the user is using a mouse or trackpad, but display them when the user is using the keyboard.

Inaccessible: Form Elements Without Focus Rings

Without focus rings, the only way to tell which of these form elements is currently focused is to look for the cursor.

Accessible: Form Elements with Focus Rings

With focus rings, the currently focused form element is much easier to distinguish.