How to Make Accessible Forms
Forms are often some of the most important elements of a website, so it's critical that they be made accessible. Luckily, all it takes to make accessible forms is semantic HTML and a small amount of CSS.
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
<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 Indicators
Focus indicators 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. You'll also need to ensure that there's adequate contrast between the focus indicator and the background.
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
When using focus indicators, it's much easier to determine which form element is currently focused.