This is a fix for a reCAPTCHA accessibility issue

[kath...@prometsource.com]

Hello,

I ran the HTML CodeSniffer accessibility tool against the reCAPTCHA and it returned these two errors:

Issue

ERROR 1
This textarea element does not have a name available to an accessibility API. Valid names are: label element, title attribute, aria-label attribute, aria-labelledby attribute.

ERROR 2
This form field should be labelled in some way. Use the label element (either with a "for" attribute or wrapped around the form field), or "title", "aria-label" or "aria-labelledby" attributes as appropriate.

Fix

The g-recaptcha-response <textarea> field is meant to be hidden from users which is fine. However screen readers still see this field and read it to their users as it's set right now. There are two ways to fix this:

Option 1

1. Add a <label> element and an title attribute to the <textarea> field

This method makes it accessible and viewable to the screenreader.

Option 2 (recommended)

2. Add an area-hidden="true" attribute to the <textarea> field

This method makes it accessible and *not* viewable to the screen reader. Since it's meant to be internal, this is the method that I'd suggest you implement as soon as possible to make your code truly accessible:

Change from:

<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 80px; border: 1px solid #c1c1c1; margin: 0px; padding: 0px; resize: none;" value=""></textarea>

To:

<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 80px; border: 1px solid #c1c1c1; margin: 0px; padding: 0px; resize: none;" aria-hidden="true" value=""></textarea>

Once you apply this the reCAPTCHA should pass the accessibility test using the HTML CodeSniffer accessibility tool or any other tool. That should do it. Thanks.

Kat

[kath...@prometsource.com]

I'm very surprised that I haven't gotten any reply on this issue. Can someone from this group please look into this issue, as it makes this feature inaccessible to screen reader users.

Katherine

[Louis GAUDRY]

Hello there. I to have had a problem with that as well. So I tried a different captcha and things were worse. Screen readers could not see the text in the window in order to retype it. So I came here. But right now. I am having trouble setting it up. Are you able to help with this?

On Thursday, September 28, 2017 at 8:48:58 AM UTC-5, kath...@prometsource.com wrote:

[fairymudan XianZhi]

Pls help I’m resetting uninstalling login on laptop it’s not working

How long this captcha not correct on instagram I’m so boring

My Instagram is for my daily life I post many at 1hour cos it’s my life activity I’m not spam post 

Pls help my instagram Chaptcha @fairymudan.celestial

Pls lift my captcha error 

[kath...@prometsource.com]

Unfortunately I can't because I still haven't heard a thing from Google on this issue. It's very frustrating.

Katherine

[ga...@hiinfo.com]

I've used the following to add a aria-labelledy attribute to textarea that appears on a wordpress site's contact form 7 - in case this is of any help to anyone .. shotout to the url that inspired the setInterval solution as Google's recaptcha was loading too fast before script could run

<script>

//http://takeip.com/htmlcollection-appearing-in-console-with-many-elements-but-has-length-0.html

    var intervalID = window.setInterval(myCallback, 50);

    function myCallback() {

        var textAreaCheck = document.getElementsByClassName('g-recaptcha-response');

        if (textAreaCheck.length > 0) {

               $(textAreaCheck).attr('aria-labelledby', 'g-recaptcha-response');

               console.log($(textAreaCheck));

          clearInterval(intervalID);

        }

     }

</script>

[Abby Kingman]

This information posted on the group page could be why Google has not responded to your comment posted here? (#2 below)

Do not use this group for:

1. Questions involving code. They should be posted to StackOverflow with the 'recaptcha' tag.
2. Reporting a bug or requesting a feature, ask those to the reCAPTCHA team directly.
   

[kath...@prometsource.com]

Thanks Abby. I've just emailed Google's reCaptcha's team via email as you suggested. I'll post back if/when I hear anything back from them.

Kat