We all love a nice, clean form on a website, but what are you losing when you don't include labels for your inputs for the sake of screen real estate?

The answer is accessibility.

The W3C defines web accessibility as:

Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can perceive, understand, navigate, and interact with the Web, and contribute to the Web.

Source

With this definition in mind, if you want people with disabilities to both comprehend and interact with your forms, you need to keep accessibility in mind when setting up your forms.

One of the most important tags you can use in this respect is the label tag:

<label for="first-name">First Name</label>
<input type="text" id="first-name" name="first-name" />

However, labels take up space, and you don't always have room to include them in your designs. You more than likely utilizie the placeholder attribute instead:

<input type="text" id="first-name" name="first-name" placeholder="First Name" />

While aesthetically pleasing and a great space-saver, the placeholder attribute doesn't exactly do the same thing as the label tag with regards to accessibility. Searching the W3C's site for the placeholder attribute leads us to the following statement:

The placeholder attribute should not be used as an alternative to a label...

Source

What is the solution to this problem, then? We want a nice, clean form that doesn't take up a large amount of screen space, but we want to make sure our form is accessible to as many people as possible.

We can build a class exclusively for screen readers and apply it to our labels:

<label for="first-name" class="sr-only">First Name</label>
<input type="text" id="first-name" name="first-name" placeholder="First Name" />

.sr-only {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  top: auto;
  overflow: hidden;
}

This class places the label (or any tag with the .sr-only class) "off" of the screen for desktop and mobile views, but keeps the label tag within your HTML hierarchy, allowing screen readers to tie the label's context to the input field.

There are more intricacies of building a solid .sr-only class, but I hope this post acts as a starting off point to ensure your forms are reaching as many people as possible.

For more on .sr-only classes, see this GitHub Gist.

EDIT: There is an .sr-only class built into Bootstrap, so if that's your thing, you're already covered!

For more content from me, follow me on Twitter.