Google reCAPTCHA不符合辅助功能

本文介绍了Google reCAPTCHA不符合辅助功能的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

Google reCAPTCHA创建了一个没有可访问性属性的文本区域，比如aria-Label。这将导致reCAPTCHA无法通过站点改进进行辅助功能扫描。

我曾尝试使用Java脚本将aria-Label属性添加到文本区域，但我是在将其添加到DOM之后才将其添加到元素中的，所以我猜这就是辅助功能失败的原因。

以下是来自SiteImages Google扩展的文本：

失败需求4.1.2textarea为空。这是因为没有标签与文本区域相关联，或者没有将aria-Label属性添加到文本区域。

推荐答案

因为有问题的Google reCAPTCHA文本区域具有内联样式Display：None，所以它不应该需要aria-idden=true或任何其他附加属性，因为它已经通过API从可访问性树中删除，并且不能由使用屏幕阅读器的用户聚焦。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假"> <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>

根据Fourth Rule of Aria上的文档，这是不必要的(请参阅第三个绿色注释部分)。

我从多个自动辅助工具(the WAVE tool和HTML CodeSniffer)在线上看到过此问题，但问题在于这些工具无法测试文本区域是否具有内联样式显示：无，而不是reCAPTCHA文本区域元素。

希望能有所帮助！