I want to solve an error in passing the WAVE validation test. The error is in the CF7 of WordPress CMS. The WAVE Check tool exports this "Missing form label A form control does not have a corresponding label.".
My contact form code is:
<div class="form-send-cell">
<label for="your-name">Name</label>
[text* class:input-send your-name id:your-name]
</div>
<div class="form-send-cell">
<label for="your-email">E-mail</label>
[email* class:input-send your-email id:your-email]
</div>
<div class="form-send-cell">
<label for="your-subject">Subject</label>
[text* class:input-send your-subject id:your-subject]
</div>
<div class="form-send-cell">
<label for="your-message">Your Message</label>
[textarea* class:input-send your-message id:your-message]
[select* menu-890 use_label_element "General Inquiry" "Commerce" "Accounting"]
</div>
<div class="submit-button">
[submit "send"]<i class="send" aria-hidden="true"></i>
</div>
Contact Form 7 does not function as you might expect with the use_label_element shortcode.
This has been broken for a long time.
Instead do as you have done with the rest of your form and add an associated label and use the id:enquiry-type with associated for="enquiry-type" method you have used with all the other fields.
If you are attempting to have a non-visible label for the select you could use a visually hidden class (CSS at bottom) but please reconsider this if that was the intention.
Labels also help people with cognitive disabilities and anxiety disorders so should be visible and located above the input so they know what they are selecting / have selected.
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap; /* added line */
}