-
Posts
-
Hello,
The website I’m working on needs to be (WCAG) 2 Level AA (Accessibility) compliant. I was able to fix a lot of stuff but once I put the website to test it keeps failing in the forms. Would you be able to provide a solution for this issue. I have no clue how to fix it or apply those changes suggested. You will understand more on you test it. I really appreciate your help.The problems showing are:
Success Criteria 1.3.1 Info and Relationships (A)Check 57: input element, type of “text”, missing an associated label.
Repair: Add a label element that surrounds the control’s label. Set the for attribute on the label element to the same value as the id attribute of the control. And/or add a title attribute to the input element. And/or create a label element that contains the input element.
Error Line 242, Column 860:
<input type=”text” name=”avia_3_1″ class=”hidden ” id=”avia_3_1″ value=”” />
Error Line 249, Column 1398:
<input type=”text” name=”avia_5_2″ class=”hidden ” id=”avia_5_2″ value=”” />
Check 213: input element, type of “text”, has no text in label.
Repair: Add text to the input element’s associated label that describes the purpose or function of the control.
Error Line 242, Column 860:
<input type=”text” name=”avia_3_1″ class=”hidden ” id=”avia_3_1″ value=”” />
Error Line 249, Column 1398:
<input type=”text” name=”avia_5_2″ class=”hidden ” id=”avia_5_2″ value=”” />
3.3 Input Assistance: Help users avoid and correct mistakes.Success Criteria 3.3.2 Labels or Instructions (A)
Check 188: Label text is empty.
Repair: Add text to the label element.
Error Line 242, Column 860:
<input type=”text” name=”avia_3_1″ class=”hidden ” id=”avia_3_1″ value=”” />
Error Line 249, Column 1398:Hey DanielKG,
Thank you for the inquiry.
Looks like the checker is looking for the label for the input tags in the contact form element, but those labels already exist, so these warnings should not show up. This is an example of the field markup in the contact form element in the home page.
<p class=" first_form form_element form_fullwidth" id="element_avia_2_2"><label for="avia_2_2">E-Mail <abbr class="required" title="required">*</abbr></label> <input name="avia_2_2" class="text_input is_email" type="text" id="avia_2_2" value=""></p> <p class=" first_form form_element form_fullwidth" id="element_avia_2_2"><label for="avia_2_2">E-Mail <abbr class="required" title="required">*</abbr></label> <input name="avia_2_2" class="text_input is_email" type="text" id="avia_2_2" value=""></p>As you can see, it has a corresponding label for each input tags.
<label for="avia_2_2">E-Mail <abbr class="required" title="required">Best regards,
IsmaelHello Ismael,
Thanks for your response, but because it is showing the error they are still reluctant on approving it. I did a test with gravity forms and it’s passing. Would you be able to help me getting the form for the newsletter in the center and the whole width?
Thank you.
Hi,
Thank you for the info.
Looks like you are now using the gravity form for that page. Would you mind creating a test page using the default contact form in the theme? And as we described above, the contact form fields already have labels, so the warnings or reports above are not accurate. This is the label for the email field for example.
<label for="avia_2_2">Best regards,
IsmaelHello Ismael,
Yes, I did use gravity forms to test it and show you that when using those forms it passes the accessibility test.
I have created a test page with the same two forms but with the enfold ones. Is there anything that you can do to pass the accessibility test?
Thanks.
Hi,
Thank you for the info.
According to the checker, there are no known accessibility issue in the site.
There are potential problems, but most of them are not required to pass the accessibility test and usually done to support existing accessibility features.
Best regards,
IsmaelHello,
You are not getting any errors because the page is password protected as it is a test page with the forms as requested to figure out the problem, so the way you looking at it is not going to show any “Know Problems” and errors.
Please use the admin info I send you, make the test page public by removing the password while you test it and you will see the errors. Attached is a screen shot of what you will see.
Thanks.
Hi,
Thank you for the info.
We set the page as public, run it against the accessibility tool and are able to reproduce the same result as you described above. However, we cannot add labels to the listed input fields because they are decoys and are used to protect the contact form against bots.
This is an example of the hidden or decoy input field.
<p class="hidden"><input type="text" name="avia_5_2" class="hidden " id="avia_5_2" value=""></p>Best regards,
Ismael
- The topic ‘Forms not passing accessibility test/approval’ is closed to new replies.