Why Proper Form Labelling Matters for Accessibility

Forms are an essential part of any website, allowing users to submit comments, perform searches, or provide other information. However, improperly labelled form fields can create significant accessibility barriers and make it difficult for some users to understand or complete forms correctly.

The WordPress Comment Form Labelling and WordPress Search Form Labelling features in the Accessibility Toolkit plugin ensure that all form fields are properly labelled. Each field includes clear and descriptive information, helping users understand what information is required and interact with forms effectively.

Who is Affected

This issue particularly affects

• users of screen readers who depend on labels to identify the purpose of each form field
• users with cognitive challenges who need clear instructions to complete forms accurately
• users with motor impairments who navigate forms using keyboard or assistive input devices

Understanding the Importance of Form Labelling

An accessible form field must have a label that describes its purpose. Labels can be visible on the page or provided via HTML attributes like aria-label or aria-labelledby. Screen readers rely on these labels to announce each field to users accurately.

For example, an inaccessible comment field might look like this:

<textarea id="comment"></textarea>

Without a label, a screen reader may announce:

“Text area”

This gives no context about what the user is expected to enter.

An accessible version with a label would be:

<label for="comment">Your Comment</label>
<textarea id="comment" name="comment"></textarea>

Now, a screen reader will announce:

“Your Comment, text area”

This simple improvement provides clarity and helps users complete forms correctly.

Checking Form Fields on Your Site

You can manually check your site for proper form labelling:

1. Open the WordPress comment form or search form on your website.
2. Inspect each form field using your browser’s developer tools.
3. Verify that each input, textarea, or search field has a corresponding <label> or an appropriate ARIA attribute such as aria-label or aria-labelledby.

You can also check form accessibility using a screen reader. When using a screen reader, each form field should announce its label before the user starts typing. For example, if a field has a label “Your Comment,” the screen reader will say “Your Comment, edit text,” so users understand what information they are expected to enter.

If fields lack labels or have confusing descriptions, users relying on assistive technology may struggle to submit forms correctly.

Using Accessibility Toolkit to Ensure Proper Labelling

The WordPress Comment Form Labelling and Search Form Labelling features automate this process:

• Comment Form Labelling: Ensures all fields in the WordPress comment form have descriptive, correctly associated labels.
• Search Form Labelling: Provides a clear, defined label for the WordPress search field, improving clarity for screen reader users and keyboard navigators.

To enable these features:

1. Navigate to the Accessibility options in your Accessibility toolkit dashboard.
2. Check the boxes for Comment Form Labelling and Search Form Labelling.
3. Click Save settings at the bottom.

Once activated, the plugin automatically updates your forms sitewide.

Added labels to the WordPress comment
form

Label added to the search field

Why Proper Form Labelling Is Important for Accessibility and Usability

Correct form labelling helps:

• Screen reader users understand each form field and its purpose.
• Keyboard users navigate forms efficiently.
• Cognitive-impaired users complete forms with reduced confusion.
• Prevent form submission errors caused by unclear instructions.
• Maintain compliance with WCAG 2.1 Success Criterion 3.3.2 by ensuring that all form fields have clear and descriptive labels or instructions.

Proper labelling is not only an accessibility requirement, but it also improves user satisfaction, engagement, and overall site usability.

Best Practices for Accessible Forms

• Always provide a clear and descriptive <label> for each input field.
• Use ARIA attributes (aria-label or aria-labelledby) when a visible label is not possible.
• Ensure that labels are correctly associated with their input fields using the for attribute.
• Keep instructions concise but informative to reduce cognitive load.
• Test forms using screen readers and keyboard navigation to confirm accessibility.

By implementing proper labelling for both WordPress comment forms and search forms, your website becomes more inclusive, easier to navigate, and fully usable for all users, regardless of their abilities or assistive technology. The Accessibility Toolkit plugin simplifies this process, ensuring forms are clear, descriptive, and accessible sitewide.