WCAG: The Unseen Impact of Missing Labels

The European Union has implemented new accessibility regulations with a compliance deadline of June 28th, 2025. Many companies are proactively taking steps to meet these standards to avoid penalties and ensure their digital platforms are accessible to all users.

Introduction

The European Accessibility Act (EAA) - Directive 2019/882, which establishes a comprehensive set of accessibility rules for digital offerings within the EU market, is going to come into effect next year. The deadline for compliance with this new legislation is June 28th, 2025. WCAG 2 Level AA is widely recognised as a benchmark for achieving EAA compliance.

With this in mind, I'm taking a look at some of the most common accessibility issues according to The WebAIM 2024 report on the accessibility of the top 1,000,000 home pages, who they affect, and how to fix them.

In this post, I'll be looking at the missing label, why it's important, who it affects, and how to fix it.

Missing Labels on HTML Forms: A Recipe for Confusion and Exclusion

HTML forms without proper labels can be quite challenging for many users. It may seem like a minor mishap to omit these labels, but in reality, it becomes a major accessibility hurdle for diverse user groups. This lack of direction leads to confusion and frustration, making it difficult for users to interact effectively with the website or application.

Who is Impacted by Missing Form Labels?

Missing form labels impact a large number of users. Here's why:

• Screen reader users: Screen readers rely on labels to identify form fields and provide context. Without labels, users are left guessing what information to input or even what a button does.
• Users with cognitive disabilities: Clear labels are crucial for users who may have difficulty understanding complex instructions or remembering information.
• Users with motor disabilities: Some people can take advantage of speech recognition software that translates the user's spoken words into language that the computer can understand. Having visible labels which are programatically linked with the relevant form elements is critical for the software to link the users commands with the correct input field.
• Users with low vision: Labels must have sufficient contrast and be easily distinguishable from the surrounding content and positioned close to their respective input fields for easy association.

The Importance of Labels: More Than Just Words

Labels serve as vital signposts in the user's journey through a form. They:

• Provide context: Labels tell users what information is being requested in each field.
• Guide interaction: They clarify the purpose of each field and how to interact with it.
• Improve comprehension: Clear labels make forms easier to understand and complete accurately.
• Enhance accessibility: Properly implemented labels are crucial for users who rely on assistive technologies.

WCAG Guidelines for Form Labels

The Web Content Accessibility Guidelines (WCAG) provide clear guidelines for labelling form elements:

• WCAG 1.3.1: Info and Relationships (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
• WCAG 2.4.6: Headings and Labels (Level AA): Headings and labels describe topic or purpose.
• WCAG 3.3.2: Labels or Instructions (Level A): Labels or instructions are provided when content requires user input.

Identifying and Fixing Missing Labels

Thankfully, identifying missing labels is relatively straightforward:

• Manual testing: Carefully review all forms and CTAs (Call To Action) on your website and ensure each field has a visible and descriptive label.
• Automated testing: Accessibility testing tools like WAVE, Axe, and Lighthouse can automatically detect missing labels and other accessibility issues.

Once identified, fixing missing labels is usually a simple matter of adding the appropriate HTML:
(note: to keep the examples short, I'm not adding the autocomplete attribute, but by rights, they should be included on form elements that request personal information)

<!-- DON'T DO THIS -->
<p>
  <strong>Name</strong>
  <input type="text" name="name">
</p>

<!-- Use a label, with a 'for' attribute -->
<label for="name">Name</label>
<input type="text" id="name" name="name">

Best Practices for Effective Form Labels

Writing Clear and Concise Form Labels

Use plain, simple language and avoid jargon. e.g.

<!-- Simple descriptive label -->
<label for="email">Email address</label>
<input type="text" id="email" name="email">

Using Descriptive Language for Form Labels

Labels should accurately describe the information being requested. e.g.

<!-- Describe what data is required -->
<label for="phone">Telephone number</label>
<input type="text" id="phone" name="phone">

Properly Associating Labels with Input Fields

Use the <label> element with the for attribute linked to the corresponding input's id or for multi fields (like radio buttons) use aria-labelledby. e.g.

<!-- Use a label, with a 'for' attribute -->
<label for="name">Name</label>
<input type="text" id="name" name="name">

<!-- Use a 'aria-labelledby' attribute for 
  multi-field input group -->
<fieldset>
  <!-- Legend with ID for referencing -->
  <legend id="petLegend">Insure your pet</legend>

  <label id="catLabel" for="cat">Cat</label>
  <!-- Cat radio button with aria-labelledby attribute -->
  <input type="radio" id="cat" name="pet" 
    aria-labelledby="petLegend catLabel">

  <label id="dogLabel" for="dog">Dog</label>
  <!-- Dog radio button with aria-labelledby attribute -->
  <input type="radio" id="dog" name="pet" 
    aria-labelledby="petLegend dogLabel">
</fieldset>

Ensure all CTAs have labels

Either add text to the CTA (visually hide it if it's not needed, e.g. if the CTA displays as an icon) or use the aria-label attribute. Consider a 'close' icon on a search panel;

<!-- DON'T DO THIS -->
<button class="close-search-icon"></button>

<!-- add text (can be visually hidden) -->
<button class="close-search-icon">
  <span class="visually-hidden">
    Close Search
  </span>
</button>
<!-- or aria-label -->
<button class="close-search-icon" 
  aria-label="Close Search"></button>

Visually distinct and placed appropriately

Ensure labels have sufficient contrast and are easily distinguishable from the surrounding content. Also, position labels close to their respective input fields for easy association.

Conclusion: Labels are Non-Negotiable

Missing labels are a common accessibility issue with a significant impact on user experience. By following WCAG guidelines and implementing best practices, we can create forms that are accessible, usable, and inclusive for everyone. Remember, clear and descriptive labels are not just a nice-to-have, they are essential for creating a truly accessible web.