-
Posts
-
Hello there guys,
We were asked if we can create a website that meets the criteria WCAG 2.0 AA (by using the website https://achecker.ca/checker/index.php as a validation tool). We are trying to see if we can achieve it with Enfold.
We are unable to meet the criteria, no matter what we try at the following elements:
– Contact forms
It appears that there is an extra element in the contact form, which is hidden and triggers “known problem” at “Line 239, Column 1680:
<input type=”text” name=”avia_6_1″ class=”hidden ” id=”avia_6_1″ value=”” /> ” . There is no 6th element at the form. While using developer tools in the browser, we can locate that 6_1 at a random place adjacent to the contact form.– Fulldwidth / Fullscreen sliders
At the homepage of the demo website, the tool shows that the contrast of the font, in comparison to its background, does not meet the requirements. No matter what we have tried: text shadow, different background pictures, pure black background (the fonts are white), frame behind the titles of the slider, it still fails to meet the criteria.Can you please kindly assist us in resolving this so we can offer to take the design job?
You may find the demo URL and login credentials at the private content tab.
Thank you in advance for your assistance!
Best regards,
Victor
Hey wtechgr,
Thank you for the inquiry.
The hidden input field is a decoy, which should be empty, and is added to trick spam bots, and so when this hidden input is filled, the form will not be sent. We could remove that decoy by editing the enfold\config-templatebuilder\avia-shortcodes\contact\contact.php, and by removing this code around line 898.
//fake username field that is not visible. if the field has a value a spam bot tried to send the form $elements['avia_username'] = array( 'type'=>'decoy', 'label'=>'', 'check'=> 'must_empty' );This, however, will decrease form security but you could still use other form protection such as the Google reCAPTCHA.
And regarding the contrast issue, the tool might be giving lower scores because you are using a background image. Contrast check is much more effective when testing a font color against a solid background, so adding a box with a solid background behind the text should help.
Best regards,
IsmaelHello there Ismael,
Thank you for your reply! I will try to change the code for the form and hopefully we’ll be good to go, when it comes to that accessibility issue!
UPDATE 1: I’ve managed to fix it by commenting the code you have indicated. Thank you very much.As for the contrast, there is the background of the title, different than the background image and directly related to the title. I’ve tried to trick the tool with the following Quick CSS:
`.avia-caption-title {
background-color: rgb(0, 0, 0, 0.01) !important;
} `but it still shows contrast issues for the title.
UPDATE 2: I’ve managed to trick the tool for the sub-title (caption text) by adding <p style= “background-color: rgb(0, 0, 0,0.01);” > … </p> at the caption text. But doing similar tricks at the Caption title makes the text black and still, I am unable to pass the contrast challenge.
Looking forward to receiving your guidance and thank you in advance for your reply!
Best regards,
Victor
Hi,
Thank you for the update.
Creating a box with solid or opaque background should help improve the contrast between the background and the caption. Please try this css code.
#top div .caption_center .slideshow_caption { text-align: center; background: rgba(0,0,0,0.5); width: 50%; margin: 0 auto; float: none; left: 50%; transform: translate(-50%, -50%); height: 50%; top: 50%; }If the tool continues to complain about it, try to increase the transparency of the background from 0.5 to 0.7 or higher.
Best regards,
IsmaelHello there Ismael,
I understand that this just creates a different layer of background between the title and the image. Unfortunately this does not change the background itself, of the title text and it still won’t pass the WCAG 2.0 AA requirement for the home page.
Going back to the contact form issue that appeared to be resolved after your first reply, unfortunately it just made the whole contact form disappear and that way the tool showed no issues.
Is there anything else we can try or, forms and sliders, cannot be made compatible with WCAG 2.0 AA accessibility standards?
Thank you once again in advance for your reply.
Best regards,
Victor
Hi,
The caption title has no background by default but you could try this css code to make sure that it is transparent.
#top #wrap_all .all_colors h1, #top #wrap_all .all_colors h2, #top #wrap_all .all_colors h3, #top #wrap_all .all_colors h4, #top #wrap_all .all_colors h5, #top #wrap_all .all_colors h6 { background: transparent !important; }The other thing that might be causing the issue is the dimming effect. There seems to be a background that transitions from light to dark.
And the modification that we suggested for the contact form should only remove the decoy field, which is a single input field, not the entire contact form. Are you sure that you did not modify anything else?
Best regards,
Ismael
- You must be logged in to reply to this topic.