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.
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
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.
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
In addition to labels, websites should provide text instructions to help users complete the required actions. Tips to keep in mind:
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.