Contact form 7 + accessibility

  • Dear friends,
    I need your help with an error that i met. I want my website(eshop) to pass WCAG AA accessibility tests (webaim, achecker, w3validator). Plenty of errors came up and since there isn’t any tool to autofix it, and not temp fix upon loading like UserWay, i am correcting it one by one.

    One of the plugins that i used is Contact Forms 7. Before i proceed on the problem, i must mention that i use a theme from envato market called Metro, Elementor, Woocommerce, WPML.
    The report of wave.webaim.org found an error in the following page
    https://benetialingerie.gr/contact/?lang=en (and in its translation).
    The error is:
    Missing form label
    A form control does not have a corresponding label.
    You may find below the code.

    <div class=”metro-contact-form” aria-label=”contact form”>
    <h3 class=”rtin-title” aria-label=”title area”>Send Us a Message</h3>
    <div class=”row” aria-label=”name area”><div class=”col-md-6 form-group”>[text* your-name class:form-control placeholder “Name *”]</div><div class=”col-md-6 form-group”>[email* your-email class:form-control placeholder “Email *”]</div></div>
    <div class=”row” aria-label=”subject area”><div class=”col-md-6 form-group”>[text* your-subject class:form-control placeholder “Subject *”]</div><div class=”col-md-6 form-group”>[tel your-phone class:form-control placeholder “Phone”]</div></div>
    <div class=”form-group” aria-label=”text area”>[textarea* your-message class:form-control placeholder “Message *”]</div>
    <div class=”form-group” aria-label=”Submit button”>[submit “Submit”]</div>
    [response]
    </div>

    As i undestand, the code must have <label> elements. Since i am not familiar in coding and my developing skills are limited, can you please help me out? Any advices?
    Thanks in advance.
    Nikos

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

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

    (@takayukister)

    FAQ > Can I add text labels to input fields?

    Thread Starter nikoscompass

    (@nikoscompass)

    Dear Mr. Mihoshi, thank you for your time to reply my inquiry. I have found that article. The only solution is to rewrite the form? Won’t this change the visual appearance of the form?
    Thanks in advance.
    Nikos

    @nikoscompass : You need to modify the form and add labels in a form template itself. If you have some styles added for labels (in theme example).

    For @takayukister, other a11y improvement suggestion regarding .screen-reader-response: default response should not have empty <ul></ul> element. If there is empty list element in default response it fails WAI-ARIA 1.1: 5.2.5 Required Owned Elements criteria.

    @takayukister Has the empty

      code error been fixed yet? It is causing Accessibility errors.

      It fails WAI-ARIA 1.1: 5.2.5 Required Owned Elements criteria.

      I also get accessibility problem report even though I uses labels as described in the Contact Form 7 docs:

      1. Failing elements
      <input type=”search” class=”search-field” placeholder=”Search …” value=”” name=”s”>

      2. in plain words
      Labels ensure that form controls are announced properly by assistive technologies like screen readers. Assistive technology users rely on these labels to navigate forms. Mouse and touchscreen users also benefit from labels because the label text makes a larger click target.

      Anonymous User 17880307

      (@anonymized-17880307)

      @rogerrwl this is the (hidden) search form of WordPress itself and not related to Contactform 7.

      Try going to example.com?s=hello (replace example.com with your domain) and you will see, that it is the search function of WordPress which is independent of any (contact) form plugin.

    Viewing 6 replies - 1 through 6 (of 6 total)
    • The topic ‘Contact form 7 + accessibility’ is closed to new replies.
    • In: Plugins
    • 6 replies
    • 6 participants
    • Last reply from: Anonymous User 17880307
    • Last activity: 2 years, 1 month ago
    • Status: not resolved