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.

1 Like

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.

Hey did the video get deleted? I have the same issue it would be really helpful if you could reupload it. Thanks

@Coldy - I used to pay for a service that I only used to help with this forums. Due to a lack of donations and people willing to pay for assistance I canceled it. I no longer have the video.

Okay thank you!
For anyone interested on this issue, i found the solution.
Just go to custom attributes to the form that has an error and add “aria-label” as name and in the value box add the name you want that fits this element.