Form elements do not have associated labels
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 to it. Take care to make the Name of the Input the same as the Field Label.
Form inputs, such as entering your name and email or other text information, need labels. And the labels must be programmatically connected to the input. This helps screen readers to understand what the input is for.
This is easily done in Webflow, but it's also easily broken.
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.
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 this.
Name and Email Address, which are defaults on the Form, have labels attached.
Form elements needing labels
You MUST add a label to the following elements:
- Text Area
Checkbox and Radio buttons have labels by default.
Avoid using reCAPTCHA if possible, as it’s not very accessibility friendly.
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.
- Make the name of the Input settings the same as the Label.
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".
- Always plan your forms carefully before starting to build them.
- Always add the label, then the input for Inputs, Text area and Select.
- DON'T cut and paste labels and inputs.
- Give the labels a CSS class if you want to design them.
Google Lighthouse says
Labels ensure that form controls are announced properly by assistive technologies like screen readers. Assistive technology users rely on these labels to navigate forms. Mouse and touchscreen users also benefit from labels because the label text makes a larger click target.