Form Label tag accessibility

  • Resolved Dan Stramer

    (@danstramer)


    6 years, 6 months ago

    Hello
    I have added label tags to my form:

    <p> 
<label for="name"><span style="display:none;">Name</span></label>
[text* your-name id:name placeholder "Full Name*"]
</p>

    When I check the form with the WAVE checker, I get a warning:”A form control has more than one label associated with it”.
    Why is this happening?
    Thanks
    Dan

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    6 years, 6 months ago

    Because there are two <label for="name"> in the page?

    Thread Starter Dan Stramer

    (@danstramer)

    6 years, 6 months ago

    Yes, That’s because there are 2 contact forms on the page. They are the same cf7 form.
    One is in the page, and one appears from the side when clicking on the small red tag.
    Is that a problem with accessibility – having two same forms on the page?

    Thanks,
    Dan

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    6 years, 6 months ago

    I don’t know, but there are two elements sharing id="name" in the page, and this is definitely a problem.

    Thread Starter Dan Stramer

    (@danstramer)

    6 years, 6 months ago

    Right, so having the same form displayed twice on a page when an ID is added to an input element on the page caused this issue.
    I duplicated the form and changed the input fields’ ID’s and now the error is no longer showing.

    Dan

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Form Label tag accessibility’ is closed to new replies.