How to create accessible forms

22 Jan 2014

5 little ways to make forms better.

1. Give each input a label

Labels provide information about each input. Sighted users will see the label. Screen reader users will hear it.

Users can click the label too which will either set focus to the input or mark radio buttons/checkboxes as checked.

To associate the label to the input, make sure the label's for attribute matches the input's id.

<label for="username">Username</label>
<input id="username">

Use a fieldset and legend to group related inputs together.

Take a question that asks the user if they are over 18 years old with two radio buttons: yes and no.

Without a fieldset/legend, when the radio button is focused, screen readers will announce ‘Yes’.

But what is the user to do given the question itself has not been announced?

With a fieldset/legend, screen readers will announce ‘Are you over 18 years old? Yes’ which lets users know how to answer the question properly.

<fieldset>
  <legend>Are you over 18 years old?</legend>
  <input type="radio" name="over18" id="over18yes" value="yes"><label for="over18yes">Yes</label>
  <input type="radio" name="over18" id="over18no" value="no"><label for="over18no">No</label>
</fieldset>

Optional radio buttons need a ‘none’ option

Radio buttons cannot be unchecked once they are selected. So if the question is optional, you'll need a ‘None’ option.

<fieldset>
  <legend>Do you like cheese?</legend>
  <input type="radio" name="cheese" id="cheeseYes" value="yes"><label for="cheeseYes">Yes</label>
  <input type="radio" name="cheese" id="cheeseNo" value="no"><label for="cheeseNo">No</label>
  <input type="radio" name="cheese" id="cheeseNone" value="none"><label for="cheeseNone">Prefer not to say</label>
</fieldset>

Don't submit a form when a select box value changes

Select boxes that submit the form automatically when the user selects an option causes problems for keyboard and screen reader users.

Don't use multi-select select boxes

Multi-select select boxes let users select multiple options from a list.

But users find them difficult to use because they require a particular the user to use a particular set of keys at the same time. Use checkboxes instead.

Summary

That's all. 5 little tips to make forms better.

Checklist

  • Give each input a label
  • Group related inputs together
  • Optional radio buttons need a ‘none’ option
  • Don't submit a form when a select box value changes
  • Don't use multi-select select boxes