Google recaptcha is not accessibility compliant

Question

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.

Answer 1

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!

Answer 2

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");

Answer 3

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>