9

The google recaptcha creates a textarea that has no accessibility attributes, like aria-label. This is causing the recaptcha to fail our accessibility scan via Siteimprove.

I've tried adding the aria-label attribute to the textarea using javascript, but i'm adding it to the element after it has been added to the DOM, so i'm guessing that is why the accessibility is failing.

Here is text from Siteimproves google extension:

Failing requirement 4.1.2 textarea is empty. This is because no label is associated with the text area or an aria-label attribute isn't added to the textarea.

Akxe
  • 9,694
  • 3
  • 36
  • 71
RDotLee
  • 1,083
  • 2
  • 15
  • 32

7 Answers7

13

Since the Google reCAPTCHA textarea in question has the inline style display: none, it shouldn't need the aria-hidden=true or any other additional attribute, since it is already removed from the accessibility tree via the API and won't be focusable by users with screen readers. 

<textarea 
  id="g-recaptcha-response" 
  name="g-recaptcha-response" 
  class="g-recaptcha-response" 
  style="width: 250px; 
         height: 40px; 
         border: 1px solid rgb(193, 193, 193); 
         margin: 10px 25px; 
         padding: 0px; 
         resize: none; 
         display: none;">
</textarea>

According to the documentation on the Fourth Rule of Aria, this is unnecessary (see the third green note section).

I've seen this problem occurring online from multiple automated accessibility tools (the WAVE tool and HTML CodeSniffer), but the problem is with the tools failing to test whether the textarea has the inline style display: none, and not the reCAPTCHA textarea element.

Hope that helps!

Ben Woodruff
  • 146
  • 1
  • 5
6

I ended up setting the following attributes in javascript and this fixed the issue. This is a work-around in my book, as google should address this.

Anyway, here is what I set;

  var textarea = document.getElementById("g-recaptcha-response");
  textarea.setAttribute("aria-hidden", "true");
  textarea.setAttribute("aria-label", "do not use");
  textarea.setAttribute("aria-readonly", "true");
RDotLee
  • 1,083
  • 2
  • 15
  • 32
1

I had a quick fix for this one,

<script type="text/javascript">
    function onloadCallback() {
        $('#g-recaptcha-response').attr('aria-hidden', true);
    }
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback>
mbhargav294
  • 389
  • 1
  • 3
  • 15
1

The full solution that works is combing the two above answers so:

<script>
        function onloadCallback() {
            $('#g-recaptcha-response').attr('aria-hidden', true);
            $('#g-recaptcha-response').attr('aria-label', 'do not use');
            $('#g-recaptcha-response').attr('aria-readonly', true);
        }
    </script>

<script src='https://www.google.com/recaptcha/api.js?onload=onloadCallback'></script>
George Brountzas
  • 46
  • 5
1

$(window).on('load', function () {
      onloadCallback();
 });
function onloadCallback() {
            $('#g-recaptcha-response').attr('title', "g-recaptcha-response");          
        }
abhay pratap
  • 11
  • 1
1

This passed the WAVE accessibility test for me:

Use a regular form label with a visually-hidden style for screen-readers only and a for attribute matching the ID of your Google recaptcha form field.

CSS

.sr-only {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

HTML

<label class="sr-only" for="g-recaptcha-response">Google Recaptcha</label>
Floyd
  • 445
  • 5
  • 9
0

Using rails, and pulling in the recaptcha js through gems, I was unable to use the onloadCallBack "quick fix" option above because those assets are loaded earlier, and reloading them entirely seemed wasteful. I opted for a similar setAttribute, but needed to wait for a few seconds (even when using document.ready) to make sure the textarea was available on which to update the attribute. This seems to do what the question asker needs from a rails perspective, as was in my case, and screen readers will behave as desired/expected:

<script type="text/javascript">
    $(document).ready(function(){
        setTimeout(() => {
          var textarea = document.getElementById("g-recaptcha-response");
          textarea.setAttribute("aria-hidden", "true");
          textarea.setAttribute("aria-label", "do not use");
          textarea.setAttribute("aria-readonly", "true");
      }, 2000);
    });
</script>

If you're looking for a clean report for a client that reflects actual screen reader results, the wave browser extension for chrome and firefox both report clean (no error), while the wave web-based app still has an error on that field. htmlcodesniffer clears that textarea without error, but actually reports an error on the recaptcha iframe (which is above the textarea) having an empty title, which can't be changed because of the cross-site scripting request to update the iframe (that has different domain origin). Have a lovely day.

noleftsignal
  • 21
  • 1