Support » Plugin: Contact Form 7 » Accessibility Issues

  • ToniRome

    (@tonirome)


    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.

    Thanks!

    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

    (@takayukister)

    As the linked webaim.org 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.

    ToniRome

    (@tonirome)

    That fixed the radio buttons, but not the other errors:
    http://wave.webaim.org/report#/https://boisekidney.com/contact-us/

    Here is the syntax of my form:

    Full Name*[text* your-name]
    Email*[email* your-email]
    Phone[tel* tel placeholder “(123) 345-6789″]
    <fieldset>
    <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”]
    </fieldset>
    [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>
    <fieldset>
    <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 />
    </fieldset>
    <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)
  • You must be logged in to reply to this topic.