Accessibility Errors in Google Lighthouse

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Form elements do not have associated labels

Webflow Forms

The Webflow Form Block is a well designed accessible component. When you add a new Input, Text Area or Select elements you MUST add a Label. Take care to make the Name of the Input  the same as the Field Label.

1. Go to Webflow Designer

2. Select your Form Block

Select your Form Block

3. Click on Add Elements (A)

Click on Add Elements (A)

4. Drag Label onto Form

Drag Label onto Form

5. Click on Add Elements (A)

Click on highlight

6. Drag Input onto Form

Drag Input onto Form

7. Your Label and Input are now programmatically linked

Your Label and Input are now programmatically linked

8. Remove placeholder text for better accessibility

Remove placeholder text for better accessibility

9. Here is your accessible form

Here is your accessible form


When you make a form, you start with the Form Block. You can then add other inputs and labels to create the fields you need. Here, for example, we've added "Message" and "Sector".

When you add a form block, the name and email inputs have corresponding labels.

When you want to add other inputs, you MUST add the label first, and then the input.

Change the name of the label, in this case "Message".

Then change the name of the text input.

screenshot change name of text field

Webflow then magically connects the two, programatically.

!!! If you cut and paste labels and inputs, they will NOT be connected and so they will NOT be accessible. See below on how to fix

Form elements needing labels

You MUST add a label:

  • Input
  • Text Area
  • Select


Checkbox and Radio buttons have labels by default.

Avoid using reCAPTCHA if possible, as it’s not very accessibility friendly.

https://www.w3.org/WAI/WCAG21/Techniques/html/H44.html

Fixing Webflow forms

You can fix existing forms by changing the Name of the input to the same as the field label.

  1. Select the Settings panel of the input field.
  2. Make the name of the Input settings and Label the same.

How to fix broken labels on Webflow forms

Search form

The search form is different. It is generally accepted that a search bar does not need a visible label. But it DOES need a programmatic label. This is where we use ARIA.

It's easy to do. In the Settings Panel of the Search Input add the Custom Attribute aria-label = "search".

Selected Search Input

Add aria to the search label

Webflow tips

  • Always plan your forms carefully before starting to build them.
  • Always add the label, then the input for Inputs, Text area and Select.
  • DO NOT cut and paste labels and inputs.
  • Give the labels a CSS class if you want to design them.

Google Lighthouse says

Assistive technology users rely on Labels to navigate forms. Labels help everyone know what the Field is for. Mouse and touchscreen users also benefit from labels because the label text makes a larger click target.