Why We Label Forms

Writing forms in HTML requires the use of quite a few attributes, which can sometimes feel redundant. Below is an example of a form that uses radio buttons:

<h1>Which is better: coffee or tea?</h1>
  <label>
    <input type="radio" name="drink" value="coffee">
    Coffee
  </label>
  <label>
    <input type="radio" name="drink" value="tea">
    Tea
  </label>

Sometimes, I noticed, the 'label' tags were located elsewhere, in which case there would be more attributes:

Cats or Dogs?
  <input id="cat" type="radio" name="catdog" value="cat">
  <label for="cat"> Cat </label>

  <input id="dog" type="radio" name="catdog" value="dog">
  <label for="dog"> Dog </label>

After writing out forms like these quite a few times, I got to wondering: why are there so many attributes in forms? Are all of these attributes necessary to include? And why does the location of the 'label' tag often seem to shift?

Labeled versus Unlabeled Forms

I first became interested in this question of why we label forms after realizing that unlabeled forms look nearly identical, at first glance, to labeled ones. If you were to remove the label tags from the above form about coffee and tea, you'd get the following form:

<h1>Which is better: coffee or tea?</h1>
    <input type="radio" name="drink" value="coffee">
    Coffee
    <input type="radio" name="drink" value="tea">
    Tea

On a web page, whether or not you included the label tags, forms would look like the following:

After reading a few articles, I came to learn that, while forms may look similar when we don't use labels, form labels are necessary for people who use screen readers, and therefore they make forms accessible and usable.

In the example above, while the forms may seem identical to someone who does not use a screen reader, at closer inspection, it becomes evident that there are very real differences between the labeled and unlabelled forms. When you don't include labels in your forms, screen readers--which are often used by people who are visually impaired--cannot read the forms.

This video shows how someone using a screen reader would interact with a form that includes labels:

This second video shows how someone using a screen reader would interact with a form that does not include labels:

When the form did not include labels, the screen reader did not say which button was being selected--instead of selected, Coffee, radio button, 1 of 2 it said selected, radio button, 1 of 2. The screen reader could not tell that it said 'Coffee', and could only note that there were two radio buttons. Also, when labels were used in the form, the user was able to click on the text to select the button, rather than just the button itself. This is particularly important when thinking about selecting buttons on mobile apps. Form labels, therefore, are valuable in the case of both screen readers and mobile applications.

Implicit versus Explicit Label Associations

There are two types of label associations on forms: explicit and implicit. The difference comes down to whether you are wrapping the text and input elements in a label, or associating a label with an input element using the 'for' attribute.

Implicit labeling would look like this:

<label>
  Name: <input type="text" name="name">
<label>

Explicit labeling would look like this:

Cats or Dogs?
  <input id="cat" type="radio" name="catdog" value="cat">
  <label for="cat"> Cat </label>

  <input id="dog" type="radio" name="catdog" value="dog">
  <label for="dog"> Dog </label>

When doing explicit labels, the 'for' attribute in the label says which form control the label is associated with, and must match up with the 'id' attribute in the input tag. Some people prefer using explicit labeling with checkboxes and radio forms, and implicit labeling with text inputs. However, some speech recognition softwares are unable to process implicit label associations. As developer Aaron Gustafson suggests, that is evidence for the value of using both implicit and explicit associations. (You can read his full post about the value of labels here.)

Take-Aways

Labeling is important for accessibility, and all forms should include labels, even if it feels like your code is redundant. However, this all leads to a larger issue of the problems with screen readers. Screen readers should be able to read forms that don't use labels. As screen readers have many abilities, forms--which are ubiquitous across the internet--should not stump them. In the mean time, before screen readers are improved, we all should be explicitly labeling our forms.