Chances are screen readers overlook Google’s faux pas when it comes to not providing labels for thier hidden g-recaptcha-response TEXTAREA, but we would prefer not seeing such errors during accessibility evaluations.
Here is a simple script to handle the problem gracefully.
window.addEventListener('load', () => {
document.querySelectorAll('.g-recaptcha-response').forEach((element) => {
if (!element.labels.length && !element.ariaLabel) {
element.ariaLabel = 'Google CAPTCHA Response (do not edit)'
}
})
})
After the page has loaded, at which point reCAPTCHA fields should be available, we check to see if each element has an associated label. If not, we check for a non-empty aria-label. If both checks fail, we add our own ARIA label to the element.
Should Google add there own labels down the road, this script will see them and skip making unnecessary alterations.