Accessible Form Labels

Labels are required for every form field on a page and must be visible. An accessible label means it’s obvious for a visual user what they are supposed to type in a field. Same goes for users that have assistive technology such as braille readers and screen readers.

Despite what we’ve done in the past, placeholders are not good enough. In fact, I prefer not to use placeholders anymore because they are difficult to make it compliant. When they are used as subtle descriptions to tell the user what to input, they are too light and don’t pass WCAG’s contrast ratios. If they are too dark the user might think they’ve already typed something into the field. Instead, we should use labels and descriptions when necessary.

Compliant labels

There are two ways to make sure your input has a label.

  1. Wrap the input and it’s label inside of a label tag.
<div>
	<label>Name: <input type="text"></label>
</div>
  1. Associate a label to a form field by id and for attributes so screen readers know how to inform the user what the field is. The two elements should still be next to each other so it makes sense to those who can see fine.
<div>
	<label for="unique_id_here">Name:</label>
	<input id="unique_id_here" type="text">
</div>

Making labels required

When a field is required you must both add a required attribute to the field itself, and some sort of indicator to the label. It must be clear.

<div>
	<label>Name (Required): <input type="text" required></label>
</div>

It’s common to use an asterisk to denote what is required. You can still do that but more information must be provided. We can’t assume everyone knows what that means.

<div>
	<p>Required fields are marked with an asterisk: <abbr title="required">*</abbr>).</p>
	<label>Name <abbr title="required">*</abbr>: <input type="text" required></label>
</div>

You could also style the <abbr> so it stands out. Just make sure there’s enough contrast to see it.

Using descriptions

Let’s say you want to keep your labels short, but they just don’t provide enough information. You could use descriptions to elaborate. Much like the label, they need to be associated to the field. We can do that with the aria-describedby attribute which will read the description to anyone using a screen reader automatically when they tab to that field, in addition to the label of course.

<div>
	<label for="unique_id_here">Name:</label>
	<input id="unique_id_here" type="text" aria-describedby="name_desc">
	<p id="name_desc">Please enter in your first and last name.</p>
</div>

Labels and descriptions are some of the simpler compliance issues when it comes to forms. We will get more into complicated form items and then validation in the future.