Form (or “input”) labels tell users the purpose of a data entry field. They’re readable by screen readers, and failing to include them can leave visually impaired users, as well as anyone who needs extra clarification about the functionality of a field, unable to interact with a website properly. As such, they’re a critical consideration for proper web accessibility.
Missing Form Labels, As Defined by WCAG
According to the WebAIM Million Report, 2024, 48% of Home Pages failed a Web Content Accessibility Guidelines (WCAG) 2.2 audit due to Missing Form Labels.
WCAG 2.2 is a standard accessibility framework published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C), the main international standards organization for the Internet.
The success criterion can be found here and is outlined as follows:
Level: A
3.3.2 Labels or Instructions
Labels or instructions are provided when content requires user input.
Input labels are intended to describe the purpose of a data entry field. Screen readers can’t determine the purpose of an input field without help. If labels aren’t present, the software will only read out the type of field.
Here’s an example of a simple form which doesn’t include form labels, making it potentially difficult for the users discussed above to complete:
Here we have an example of that same form but with form labels, making it easier to understand.
Why Does It Matter?
Form labels explain the functionality of a data entry field to users who need additional clarification. This can include visually impaired people as well as those with cognitive or learning disabilities – even those from different language backgrounds.
Providing these labels helps to prevent users from making incomplete or incorrect form submissions. This can minimize errors and time spent submitting a correctly completed form, improving the user experience. It reduces additional resources needed to support users dealing with form issues and reflects better on the organization.
On the other hand, failing to provide form labeling can leave users feeling lost, frustrated, unable to proceed, or more likely to submit errors in their information that need to be amended later.
How Do I Fix It?
The process of including form labels is not a complex one, and minimal additional development time is needed. Add labels to form <input> elements, as follows:
<label for=”firstname”>First name:</label> <input type=”text” id=”firstname”>
Why Is This Important?
It’s estimated that 16% of the world’s population – 1 in 6 of us – have a significant disability. In a world where technology continues to play a critical role in our daily lives, our work, our learning, and many of the businesses and services we need, it’s vital to ensure that everyone’s needs are catered for wherever possible. For any individual business, these statistics and the importance of what they represent cannot be overstated.
Thursday, 16th May 2024, marks Global Accessibility Awareness Day, an annual event for institutions and technology companies to draw attention to the vital goal of ensuring digital assets—from websites to photos, video, audio, and social media—are accessible to everyone, including people with disabilities that may impair their sight, hearing, or mobility.
As a specialist in application modernization and development, gravity9 is committed to this inclusivity. Here, we’re looking at some key findings of the annual WebAIM (Web Accessibility in Mind) report, which studies 1,000,000 home pages to assess their accessibility and highlight any shortfalls. We’ll be examining why they matter and what you can do to ensure that you’re not letting your customers or your business down by failing to address these vital areas.
More in This Series
Here’s the full set of articles in this series: Common Accessibility Failures and How to Avoid Them.
- Low Contrast Text
- Missing Alt Text
- Missing Form Labels
- Empty Links
- Empty Buttons
- Missing Document Language