Give Every Form Element an Associated
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
<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> <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.
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.