Bug Report: Captcha Container Label Issue

  • Resolved everade

    (@everade)


    1 year ago

    Pagespeed Insights still reports Accessibility issues regarding Cloudflare Turnstile applied to forms, thus accessibility tools like screen readers can’t display everything as expected.

    My configuration:
    I simply enabled Cloudflare Turnstile in my Form inside WPForms and then in Cloudflare I configured Cloudflare Turnstile to be invisible, and to no human interaction being required.
    Meaning that you don’t see any of it when visiting the website, it’s entirely invisible, it only reports back the the human check failed. Which in my case is intended behavior.

    Pagespeed Insights reports:
    ”
    Form elements do not have associated labels

    Labels ensure that form controls are announced properly by assistive technologies, like screen readers. Learn more about form element labels.

    Failing Elements

    div#wpforms-350 > form#wpforms-form-350 > div.wpforms-recaptcha-container > input.wpforms-recaptcha-hidden

    <input type=”text” name=”g-recaptcha-hidden” class=”wpforms-recaptcha-hidden” style=”position: absolute !important; clip: rect(0px, 0px, 0px, 0px) !important;” data-rule-turnstile=”1″>
    “

    Old Bug Report:
    I’ve reported this bug over a year ago, unfortunately no action was being taken:
    https://ww.wp.xz.cn/support/topic/captcha-container-aria-label-issue/

    I still hope that one day this issue can be resolved to improve assistive technologies.

Viewing 1 replies (of 1 total)
  • Plugin Support Ralden Souza

    (@rsouzaam)

    1 year ago

    Hi @everade,

    Thanks for reaching out and reporting the issue.

    At this time, WPForms is not fully ADA/WCAG compliant, meaning it does not yet meet all accessibility requirements. This is also noted in our Terms of Service under the “Web Content Accessibility Guidelines Compliance Disclaimer.”

    However, your request is valid, and we’re committed to helping our users succeed with their websites. For this reason, we are actively working on making our plugin capable of producing ADA/WCAG compliant forms. I’ve made a new note with your thoughts in our feature request, and we’ll keep it on our radar as we plan our roadmap.

    Regarding accessibility issues like “Form elements do not have associated labels,” we recommend adding a label and an aria-label attribute using a small custom code snippet.

    However, since you’re using Cloudflare Turnstile with Invisible Mode, this is not an option. Looking at this bug reported in the Cloudflare Community, you can address the issue by applying this CSS snippet:

    .wpforms-container .wpforms-recaptcha-container {
    display: none;
}

    Important: This CSS snippet should only be used with Cloudflare Turnstile in Invisible Mode. It will not cause any form submission issues in that mode. However, if used with Cloudflare Turnstile in Managed Mode, the form will not submit.

    I hope this helps, and thank you for your suggestion!

Viewing 1 replies (of 1 total)

The topic ‘Bug Report: Captcha Container Label Issue’ is closed to new replies.