0

hCaptcha 是一种相当流行的验证码解决方案（请参阅演示.

他们的系统大致是这样工作的：

  1. 网站将 div 添加到带有 sitekey 的表单中，并添加 hCaptcha 的 JavaScript
  2. hCaptcha 向表单添加了一个 iframe 和 2 个文本区域。
  3. 当访问者解决 hCaptcha 时，两个文本区域会填充一个提交给站点的令牌
  4. 该站点可以在服务器到服务器调用中发送令牌以验证用户是否通过了验证码

在第 2 步中添加的 texteares 如下所示：

<textarea id="h-captcha-response-0da5o6pd30l5" name="h-captcha-response" style=""></textarea>
<textarea id="g-recaptcha-response-0da5o6pd30l5" name="g-recaptcha-response" style=""></textarea>

根据pa11y ，这些文本区域不可访问。屏幕阅读器需要知道这些表单元素不是用于人工输入，而是仅用于站点的功能。我相信一种解决方案可能是将 HTML 属性添加aria-hidden="true"到这两个 textarea 元素中。

hCaptcha 的消费者有什么解决办法吗？或者对 hCaptcha 来说最好的事情是什么？

4

1 回答 1

0

因为这些文本区域仅供 hCaptcha 使用，并不打算与用户进行交互，所以它们应该被隐藏。通过display: none在每个文本区域上使用，hCaptcha 仍然能够在表单提交中包含隐藏的令牌，而不会导致可访问性问题。

目前尚不清楚您使用的是什么框架，但输出应如下所示：

<textarea id="h-captcha-response-0da5o6pd30l5" name="h-captcha-response" style="display: none;"></textarea>
<textarea id="g-recaptcha-response-0da5o6pd30l5" name="g-recaptcha-response" style="display: none;"></textarea>
于 2022-01-10T05:13:33.263 回答