Missing label on recaptcha form field (accessibility)

[sneelz]

Issue description

When you run a webpage with the recaptcha on it through accessibility software like WAVE, it calls out a missing form field on the recaptcha. It seems to be on a textarea field that is not actually visible to the user until you turn the page styles off. I'm not sure if this is specific to ng-recaptcha or recaptcha overall.

Environment

Using ng-recaptcha to render via Angular UI, but I think this may be an issue with recaptcha itself.

• OS name and version:
• PHP version:
• Web server name and version:
• google/recaptcha version:
• Browser name and version:

Reproducing the issue

• URL (optional): https://dethariel.github.io/ng-recaptcha/basic
• Code (optional):

User steps

Instructions:

1. Go to any site using recaptcha (e.g. https://dethariel.github.io/ng-recaptcha/basic)
2. Run WAVE on the page: https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh

Example screenshot of ng-recaptcha WAVE result with styles:

Example screenshot of ng-recaptcha WAVE result without styles:

[bikbal]

Hi, is there any update on this? Google reCaptcha is still not accessibility compliant.

[mhotch24]

I'd like to know too. Having same issue!

[feerz]

Same issue, still happening.

[jandrij]

Issue is still present.

[webmousegr]

This textarea appears when a error is encountered, the error triggers because the page is loaded inside Wave web application, in normal circumstances this orphan textarea will not appear, thus the G-CAPTCHA is not always failing the WCAG standard, only when a error is triggered.

If you are interested in passing the WAVE app test for reporting purposes this might help:

<script>
	window.addEventListener('load', function () {
		const label = document.createElement("label");
		const label_text = document.createTextNode("CAPTCHA");
		label.appendChild(label_text);
		label.setAttribute("for", "g-recaptcha-response-100000");
		label.classList.add("screen-reader-text"); // style this class to hide the label (native in wordpress)
		const input_for_label = document.getElementById("g-recaptcha-response-100000");
		input_for_label.insertAdjacentElement("beforebegin", label); 
	})
</script>

in case of wordpress you can wrap this script in functions.php:

	add_action('wp_head','g_captcha_wcag_fix_js');
	function g_captcha_wcag_fix_js()
	{ // break out of php ?>
		<script>
		// paste the script here...
		</script>
	<?php } // break back into php