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
3. Click on Add Elements (A)
4. Drag Label onto Form
5. Click on Add Elements (A)
6. Drag Input onto Form
7. Your Label and Input are now programmatically linked
8. Remove placeholder text for better accessibility
9. 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.
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.
- Select the Settings panel of the input field.
- Make the name of the Input settings and Label the same.
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".
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.