Google recaptcha 不符合可访问性

Question

google recaptcha 创建了一个没有可访问性属性的 textarea，例如 aria-label。这导致 recaptcha 无法通过 Siteimprove 进行可访问性扫描。

我已经尝试使用 javascript 将 aria-label 属性添加到 textarea，但是我在将它添加到 DOM 后将它添加到元素中，所以我猜这就是可访问性失败的原因。

这是来自 Siteimproves google extension 的文本：

未通过的要求 4.1.2textarea为空。这是因为没有标签与文本区域相关联，或者 aria-label 属性未添加到文本区域。

Answer 1

由于有问题的 Google reCAPTCHA textarea 具有内联样式 display: none，因此它不需要 aria-hidden=true 或任何其他附加属性，因为它已经通过 API 从可访问性树中删除并且不会成为焦点由具有屏幕阅读器的用户提供。

<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>

根据第四条 Aria 规则的文档，这是不必要的（参见第三个绿色注释部分）。

我已经从多个自动化辅助工具（WAVE 工具和HTML CodeSniffer）在线看到这个问题，但问题在于这些工具无法测试 textarea 是否具有内联样式 display: none，而不是 reCAPTCHA textarea 元素。

希望有帮助！

Answer 2

我最终在 javascript 中设置了以下属性，这解决了这个问题。这是我书中的一个变通方法，因为谷歌应该解决这个问题。

无论如何，这是我设置的；

  var textarea = document.getElementById("g-recaptcha-response");
  textarea.setAttribute("aria-hidden", "true");
  textarea.setAttribute("aria-label", "do not use");
  textarea.setAttribute("aria-readonly", "true");