Add Label "for" attribute to Form Control for accessibility

When I add Webflow’s standard ‘Form Block’ to create a contact form, I create labels for Name, Email, etc. I then go to WAVE to test my accessibility. WAVE has an error message in each of my ‘Text Field’ in my contact form. WAVE says- “A form control does not have a corresponding label”. But when I test the contact form, it is successful and I get all the information that I input.

Hi @strudel, Welcome to the Forum! :wave:

The Wave test is looking for the “for” attribute with a value of the input name.

Unfortunately Webflow does not allow you to use the “for” attribute on labels as it is restricted (have no idea why).

So what can you do? Use this workaround:

You can simply replace label with an custom embed that contains Name. Do that for each input field. Remember the name value should match the input field Name: value in the designer for that Text Field Settings.

Thank you. Do you mean that I click the ‘Form Label’ and then click the Settings pane on the right and then click ‘Custom attributes’? The plus (+) arrow asks for ‘Name’ and ‘Value’.

I will let the video do the explaining. :slight_smile:

2 Likes

Much appreciated! Solved on WAVE now. Thank you.

Great. Glad I could help.

Do you by any chance know why WAVE puts an error on the Webflow branding at the bottom? I have a paid membership and have the branding removed on my published website.

1 Like

I have had the same “error” come up on WAVE, and it bugs me too. The branding should be removed, and not simply hidden.