Google recaptcha 不符合可访问性答案

【问题标题】：Google recaptcha is not accessibility compliantGoogle recaptcha 不符合可访问性
【发布时间】：2022-01-27 19:10:10
【问题描述】：

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

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

这是来自 Siteimproves google 扩展的文本：

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

【问题讨论】：

颜色对比度也失败了：背景色和前景色没有足够的对比度。

标签： recaptcha

【解决方案1】：

由于所讨论的 Google reCAPTCHA 文本区域具有内联样式显示：无，它不应该需要 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>

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

我已经在多个自动辅助工具（the WAVE tool 和HTML CodeSniffer）在线看到了这个问题，但问题是工具无法测试 textarea 是否具有内联样式显示：无，而不是reCAPTCHA textarea 元素。

希望有帮助！

【讨论】：

【解决方案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");

【讨论】：

您没有收到跨域错误。我正在用 reactjs 实现？

【解决方案3】：

我对此有一个快速修复，

<script type="text/javascript">
    function onloadCallback() {
        $('#g-recaptcha-response').attr('aria-hidden', true);
    }
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback>

【讨论】：

【解决方案4】：

有效的完整解决方案是结合上述两个答案所以：

<script>
        function onloadCallback() {
            $('#g-recaptcha-response').attr('aria-hidden', true);
            $('#g-recaptcha-response').attr('aria-label', 'do not use');
            $('#g-recaptcha-response').attr('aria-readonly', true);
        }
    </script>

<script src='https://www.google.com/recaptcha/api.js?onload=onloadCallback'></script>

【讨论】：

【解决方案5】：

使用rails，并通过gems 拉入recaptcha js，我无法使用上面的onloadCallBack“快速修复”选项，因为这些资产被提前加载，重新加载它们似乎完全浪费了。我选择了类似的 setAttribute，但需要等待几秒钟（即使在使用 document.ready 时）以确保可以在其上更新属性的 textarea。从 Rails 的角度来看，这似乎可以满足提问者的需求，就像我的情况一样，屏幕阅读器的行为将符合预期/预期：

<script type="text/javascript">
    $(document).ready(function(){
        setTimeout(() => {
          var textarea = document.getElementById("g-recaptcha-response");
          textarea.setAttribute("aria-hidden", "true");
          textarea.setAttribute("aria-label", "do not use");
          textarea.setAttribute("aria-readonly", "true");
      }, 2000);
    });
</script>

如果您正在为客户端寻找反映实际屏幕阅读器结果的干净报告，chrome 和 firefox 的 wave 浏览器扩展程序都报告干净（无错误），而基于 web 的 wave 应用程序仍然有错误那个领域。 htmlcodesniffer 清除该 textarea 没有错误，但实际上在 recaptcha iframe（位于 textarea 上方）上报告了一个错误，标题为空，由于跨站点脚本请求更新 iframe（具有不同的域起源）。祝你有美好的一天。

【讨论】：

【解决方案6】：

$(window).on('load', function () {
      onloadCallback();
 });
function onloadCallback() {
            $('#g-recaptcha-response').attr('title', "g-recaptcha-response");          
        }

【讨论】：

以上代码对我有用