Google reCAPTCHA不符合辅助功能 [英] Google recaptcha is not accessibility compliant

问题描述

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文本区域元素。

希望能有所帮助！

这篇关于Google reCAPTCHA不符合辅助功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！