How to Make Accessible Form Labels

When designing accessible forms, it’s important that all form controls have a label.

How do you Make Form Labels Accessible?

The simplest way to label a form field is to wrap the <input> element with the label tag. This is called implicit labeling.

The better way, and the one best supported by assistive technology, is explicit labeling. This time you separate the label from the input field, but associate them programatically. Therefore the attribute of the label matches with the id attribute of the field.

You should use explicit labeling where you can, because implicit labels are not reliably supported by voice control software such as Dragon Naturally Speaking.

How do you Arrange Accessible Labels?

Labels can be to the left of input fields or above them. An advantage of having labels above is that it reduces horizontal scrolling on mobile devices.

For input types such as checkboxes and radio buttons, the label for each should be to the right of the control.

How do you use Placeholder Text?

Placeholder text is text within a form field intended as a hint or guide to the input format for a form field. Some designers hide form labels and just use placeholder text. 

However, placeholder text is not a good substitute for a visible form label. This is because it is not always read out by screen readers. It also disappears when you begin typing in the field, so it can be harder to remember what you’re entering in a long form. In addition, it usually has a poor color contrast.

A more modern design pattern uses placeholders initially in the form fields, which changes to text above the field when you click or tap in the field. This is known as floating labels. 

If you then go to the next form field, the label becomes a placeholder. If you type text in the form, the label sits above the field so that you can read both the label and the text you typed.

How do you Hide Form Labels?

There are a few instances when it’s appropriate to hide a form label. One is for a search form where there is a button or icon labelled “search” next to it. There are a few different methods of doing this. The American Foundation for the Blind uses an aria-label with the value “search” on the input field, as well as a placeholder.

Another approach is to hide the label with CSS in such a manner that it isn’t seen, but is still read out by a screen reader. This is what Sightsavers does.

How do you Indicate the Function of a Field?

You can use the aria-labelledby attribute to indicate the function of the field. The aria-labelledby value must be equal to the id of the field.

Another method of labeling a search field is to use the title attribute. This shows as a tooltip if you hover over the search field with a mouse. It’s not a recommended method because the information doesn’t show if you’re a keyboard only user or touch device user.

Required Fields

You should let your users know if any or all form fields are required before they submit a form. Otherwise, they may have to submit the form and check error messages to see if they have missed anything.  One way to inform them of required information is by giving instructions before the form. 

To make it crystal clear, mark required form controls in the form label. There are two main methods of doing this. The first is by adding the word required in brackets after the label. In this form, the email address and the checkbox are both required. The input field also has an aria-required=”true” attribute.

Another method is to use an asterisk before or after the form label, often colored red. Ideally you should also say somewhere on the form that the asterisk indicates a required field.

The issue with the asterisk method is that not all screen readers are set up to read punctuation, so the asterisk can be missed. In Drupal’s registration form, the NVDA screen reader doesn’t read the asterisks, so a screen reader user won’t know that the username, password and email fields are required.

TPGi’s contact form hides the asterisks from screen readers with aria-hidden=”true” and uses aria-required=”true” on the input fields so a screen reader user understands that all fields are required.

Optional Fields

Edward Scott of the Baymard Institute recommends marking optional fields on ecommerce forms as well as required ones, as it clears up any doubts about the purpose of the information. The WooCommerce checkout form does this, using asterisks for required fields and (optional) for optional fields.

By contrast, designer Adam Silver says you should only mark optional fields in forms and let users assume that the other fields are required. He qualifies that by saying you should avoid optional fields altogether if possible. In this loyalty card registration form, all fields are required except for the Allow Marketing Communications checkbox, so it would be sensible to mark that one as optional.

You can minimise the use of optional fields in forms by using conditional logic to only show them if a certain condition is met. If you ask a user whether they want delivery updates by SMS and they answer yes, you can then show a field to collect their cellphone number. This field is only visible under that condition – it’s not shown when the form loads initially or if the answer to the question is no. If you’re a WordPress user, a form plugin such as Gravity Forms has conditional logic built in.

David Swallow of TPGi points out that marking only optional fields doesn’t work in a form where all fields are required. In this case the ambiguity of whether the fields are required or not is a failure of WCAG Success Criterion 3.3.2 Labels or Instructions. So labeling required fields is necessary here, unless the form is very short, such as a login form, where it’s reasonable to expect that all fields are required.

Frequently Asked Questions