Google 验证码不兼容辅助功能

Question

Google recaptcha 创建一个没有辅助功能属性的文本区域，例如 aria-label。这导致 recaptcha 无法通过 Siteimprove 进行辅助功能扫描。

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

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

未满足要求 4.1.2

textarea

为空。这是因为没有标签与文本区域关联，或者 aria-label 属性未添加到文本区域。

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

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

我已经在多个自动化辅助工具（WAVE 工具和HTML CodeSniffer）中看到过这个问题，但问题在于这些工具无法测试文本区域是否具有内联样式显示：无，并且没有reCAPTCHA 文本区域元素。

希望有帮助！

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");

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

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

Answer 5

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

Answer 6

这对我来说通过了 WAVE 可访问性测试：

使用仅适用于屏幕阅读器的具有视觉隐藏样式的常规表单标签，以及与 Google recaptcha 表单字段的

for

匹配的

ID

属性。

CSS

.sr-only {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

HTML

<label class="sr-only" for="g-recaptcha-response">Google Recaptcha</label>

Answer 7

使用rails，并通过gems拉入recaptcha js，我无法使用上面的onloadCallBack“快速修复”选项，因为这些资源已提前加载，并且完全重新加载它们似乎很浪费。我选择了类似的 setAttribute，但需要等待几秒钟（即使使用 document.ready 时）以确保文本区域可用于更新属性。从 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 浏览器扩展都会报告干净（无错误），而基于 Wave Web 的应用程序在该字段上仍然有错误。 htmlcodesniffer 清除了该 textarea，没有错误，但实际上在 recaptcha iframe（位于 textarea 之上）上报告了一个错误，标题为空，由于跨站点脚本请求更新 iframe（具有不同的标题），因此无法更改该标题。域起源）。祝你有美好的一天。

Answer 8

似乎在新版本中，

g-recaptcha-response

是一个

class

名称，而不是

id

。我的有效解决方案如下：

<script type="text/javascript">
    function onloadCallback() {
        document.querySelectorAll('.g-recaptcha-response').forEach((e) => {
            e.setAttribute("aria-hidden", "true");
            e.setAttribute("aria-label", "do not use");
            e.setAttribute("aria-readonly", "true");
        });
    }
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback"></script>