在 hCaptcha 中解决此可访问性问题的正确方法是什么？答案

【问题标题】：What is the right way to fix this accessibility problem in hCaptcha?在 hCaptcha 中解决此可访问性问题的正确方法是什么？
【发布时间】：2022-01-07 18:26:27
【问题描述】：

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

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

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

第 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 来说最好的事情是什么？

【问题讨论】：

你能分享你的代码（减去你的密钥）吗？文本区域不应可见。 hCaptcha 的文档说在表单中添加了一个隐藏令牌，但看起来它在演示站点上可见。

标签： accessibility hcaptcha

【解决方案1】：

因为这些文本区域仅供 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>

【讨论】：

它们对有视力的用户不可见，但由于缺少 aria-hidden=true HTML 参数（或类似解决方案），它们对使用屏幕阅读器的访问者可见。
对，display: none; 也使这些字段对屏幕阅读器隐藏，根据 WebAIM：webaim.org/techniques/css/invisiblecontent/…。
我同意@Ezra。 display:none 是最好的解决方案。您不能单独使用aria-hidden，因为这不会阻止屏幕阅读器用户使用TABBING 到文本区域。它只会导致屏幕阅读器不宣布该元素，从而使情况变得更糟 - 您可以 TAB 到一个元素，但没有宣布任何内容。除了aria-hidden，您还需要tabindex="-1"，但display:none 会为您处理所有这些。