Question 3398 in Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Contact form 7 + accessibility – Woocommerce

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 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

Tags:

2

Answers


  1. 0

    The code you are displaying is the widget code people need to insert in their WordPress pages to render the form.

    That is not the actual code generating the forms, as that code is in the PHP files of the plugin itself.

    My suggestion is to hire a web dev who can go into those files.

    In terms of accessibility you need to make sure that each input field has a label (specifics of this apply).

    Bad example, missing label: <input type="text">

    Good example: <label for="nameField">Insert name</label><input id="namefield" type="text">

    So, you need to have a label and that label also needs to be connected with the actual input field via the for attribute pointing to the id of the input.

    Login or Signup to reply.
  2. 0

    Like @Manuel Cheta said you need to wrap your input field with a label tag. For example:

    <label for="**your-email**">[text* your-email **id:your-email** placeholder "your email"]</label>

    but you also need to add the id of this input field.
    Although, Contact form 7 supports HTML directly. So, if you have code like this:

    <div>
<p><input name="your-email" aria-label="Your Email" /></p>
<p><input name="your-name" aria-label="Your Name" /></p>
</div>

    you could also have aria-label="Email" attribute. That works fine to me too!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search