Why Form Labels and Instructions Are Important for Digital Accessibility

April 19, 2022

Do your users understand how to fill out your website’s forms? 

If you’re asking people to interact with your website, you have an obligation to provide them with the resources they need to complete that process. When sighted users visit your website, they use text next to form fields to determine what information they need to provide — but many people access forms with screen readers, which convert text to audio or braille. 

Screen readers are popular with people who have vision-related disabilities and conditions that affect mobility and motor control. As we’ve discussed in other articles, screen reader accessibility is extremely important, and web forms frequently have barriers that prevent screen reader users from understanding them.

To make sure your website is accessible for the widest possible audience, you’ll need to make sure your forms use appropriate labels and instructions. Here’s what developers and designers should know.

Form labels and instructions play a crucial role in accessibility 

The Web Content Accessibility Guidelines (WCAG) are the consensus standard for digital accessibility. WCAG Success Criteria 3.3.2 requires websites to provide labels or instructions when content requires user input. 

Form labels are especially important because they’re read by a screen reader when a form field receives focus. A sighted user might see three fields for an address and reasonably assume that all three fields should contain a portion of their address, but a person using a screen reader won’t have the visual clues to come to that conclusion. 

Provide a label for every element, using descriptive language to convey information to the user. Here’s an example of a useful form label: 

<label for="search">Search:</label>

<input type="text" name="search" id="search"><br>

This tells the user that the field is a search control. By using simple HTML and clear, unambiguous labels, you’ll provide screen reader users with the information they need to interact with your website.

You might decide to hide the label element using the visuallyhidden class to avoid presenting redundant information to visual users. However, it’s important to test your forms to make sure that your labels are read properly. 

Related: Leveraging HTML for Web Accessibility

Other Ways to Label Forms and Interactive Controls

Basic HTML labels are widely supported, so they’re the best option for identifying form controls. However, depending on the nature of your content, you might need to use other methods.

The title attribute can identify form controls, but some screen readers can’t interpret title as a replacement for the label attribute. Using title is acceptable when the visual design can’t accommodate a label, but the best practice is to avoid it. 

If a group of form controls requires a single label (for instance, three fields for an address entry), use the <fieldset> and <legend> attributes. Screen readers will announce the <legend>, providing users with the context they need to complete the entry. 

Labeling Form Controls with WAI-ARIA

For some complex or dynamically generated content, form labels might not be available. When you can’t use form labels, it’s accessible to use WAI-ARIA markup such as the aria-label and aria-labelledby attributes. 

Test your markup carefully: WAI-ARIA can create accessibility barriers when misused. Wherever possible, use HTML — ARIA should only be used when semantic HTML isn’t available. For more information and examples, read the World Wide Web Consortium (W3C)’s guide to labeling controls.

Related: 4 Questions to Ask Before Using ARIA

Provide clear instructions for completing forms

In addition to labels, websites should provide text instructions to help users complete the required actions. Tips to keep in mind:

  • Instructions should include examples of the expected data formats (for example, acceptable dates, addresses, and phone numbers). 
  • Provide a link to a reference page of correct values. 
  • Put instruction text at the beginning of the form. If the instructions are at the end of the form, some users might become confused — they’ll need to navigate through every field before receiving the instructions. 
  • Make sure your forms are accessible with a keyboard alone. Some forms can have “keyboard traps" that prevent a user from changing focus; this is one of the most frustrating accessibility issues, but you can avoid it by testing your content frequently.

To audit your forms for accessibility, use a combination of manual and automated tests. Don’t rely on automated tools alone — while they’re useful, an automated tool can’t tell you whether your form labels are descriptive for real-life users. 

For more information on common website accessibility barriers, download the Bureau of Internet Accessibility's Ultimate Guide to Web Accessibility.

Receive an industry accessibility analysis of your website

Recent posts

Beverly Hills Attorney Faces Charges for Alleged Web Accessibility Fraud

July 1, 2022

How CSS Benefits Accessibility 

June 30, 2022

5 Myths About Sign Language 

June 28, 2022

Not sure where to start?

Start with a free analysis of your website's accessibility.

GET STARTED