Support » Plugin: Contact Form Block » Accessibility Issue with form labels

  • Resolved Natalie MacLees

    (@nataliemac)


    Hi there! Sorry, just a note that while the for attributes of the labels and the name attributes of the form inputs now match after addressing this other ticket, it’s actually an id attribute on the form inputs that is used to link those up with the labels.

    Is it possible to have an id attribute added to each form input that would match the value in the for attribute on the label?

    Current HTML:

    <div class="meow-contact-form__group">
    	<label class="meow-contact-form__group-label" for="mcfb_name">Name</label>
    	<input class="meow-contact-form__group-input" type="text" name="mcfb_name" value="" required="">
    </div>

    Correct HTML for accessibility:

    <div class="meow-contact-form__group">
    	<label class="meow-contact-form__group-label" for="mcfb_name">Name</label>
    	<input class="meow-contact-form__group-input" type="text" name="mcfb_name" id="mcfb_name" value="" required="">
    </div>

    More information here: https://www.w3.org/WAI/tutorials/forms/labels/

Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.