Support » Plugin: Contact Form 7 » Accessibility Issues

  • Is there a way to edit the code so that it validates for accessibility? I like your plugin, but accessibility is vital to my client’s practice. I’d rather not have to search for another plugin.


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

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


    As the linked page explains, form controls in the page don’t have corresponding labels. Provide them with labels.

    For radio button items, you can use the use_label_element option to wrap each item with a label element.

    That fixed the radio buttons, but not the other errors:

    Here is the syntax of my form:

    Full Name*[text* your-name]
    Email*[email* your-email]
    Phone[tel* tel placeholder “(123) 345-6789″]
    <legend class=”hidden”>Tells us how we can help you</legend>
    How Can We Help You?<br />
    [radio help use_label_element “Make an Appointment” “Cancel an Appointment” “Please Call Me”]
    [submit “Send”]

    Here is the source code of the browser of the contact page:

    <p>Full Name*<br />
    <span class=”wpcf7-form-control-wrap your-name”><input type=”text” name=”your-name” value=”” size=”40″ class=”wpcf7-form-control wpcf7-text wpcf7-validates-as-required” aria-required=”true” aria-invalid=”false” /></span><br />
    Email*<br />
    <span class=”wpcf7-form-control-wrap your-email”><input type=”email” name=”your-email” value=”” size=”40″ class=”wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email” aria-required=”true” aria-invalid=”false” /></span><br />
    Phone<br />
    <span class=”wpcf7-form-control-wrap tel”><input type=”tel” name=”tel” value=”” size=”40″ class=”wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel” aria-required=”true” aria-invalid=”false” placeholder=”(123) 345-6789″ /></span></p>
    <legend class=”hidden”>Tells us how we can help you</legend>
    <p>How Can We Help You?<br />
    <span class=”wpcf7-form-control-wrap help”><span class=”wpcf7-form-control wpcf7-radio”><span class=”wpcf7-list-item first”><label><input type=”radio” name=”help” value=”Make an Appointment” /><span class=”wpcf7-list-item-label”>Make an Appointment</span></label></span><span class=”wpcf7-list-item”><label><input type=”radio” name=”help” value=”Cancel an Appointment” /><span class=”wpcf7-list-item-label”>Cancel an Appointment</span></label></span><span class=”wpcf7-list-item last”><label><input type=”radio” name=”help” value=”Please Call Me” /><span class=”wpcf7-list-item-label”>Please Call Me</span></label></span></span></span><br />
    <p><input type=”submit” value=”Send” class=”wpcf7-form-control wpcf7-submit” /></p>

    Notice that this gets written automatically in the input for the name, phone and email. Which is causing the error: aria-required=”true” aria-invalid=”false”.

    Don’t see where I have any control over that and the documentation doesn’t cover it.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Accessibility Issues’ is closed to new replies.