hCaptcha是一个相当流行的captcha解决方案(请参阅演示。
他们的系统大致是这样工作的：
- 网站在带有sitekey的表单中添加div，并添加hCaptcha的JavaScript
- hCaptcha在表单中添加了一个iframe和两个文本区域
- 当访问者解决hCaptcha时，两个文本区域将填充一个提交到网站的令牌
- 该站点可以在服务器到服务器的调用中发送令牌，以验证用户是否通过了captcha
在步骤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"添加到这两个文本区域元素中。
hCaptcha的消费者有什么解决方案吗？或者对hCaptcha来说最好的事情是什么？
因为这些文本区域仅由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>