Screen reader 不同浏览器中复选框的能力

Question

我正在开发一个几乎所有人都可以访问的网站。

目前，我正在尝试找出一种方法，让不同类型的屏幕 reader 可以访问复选框，使用键盘在内容中导航。目前我正在使用标准 Windows Screenreader 和 NVDA（参见 https://www.nvaccess.org/）。我已经尝试了在网上找到的不同解决方案，但我仍然被卡住了，我会喜欢一些关于如何实现这些类型的功能的提示和技巧。需要注意的一件事是它必须适用于不同类型的浏览器（理想的是 Microsoft Edge、Google Chrome 和 Internet Explorer）。

理想的场景应该是这样的：

1：使用 Tab 键导航到 checkbox（或列出复选框）。

2：屏幕 reader 告诉我这是一个 checkbox，它是当前状态（选中，未选中）和它的标签。

3：Space 键将取消选中并选中我的 checkbox，通知我我的操作。

这是我试过的两个不同的代码片段，但它们只适用于 Microsoft Edge 和 Internet Explorer：

<fieldset id="accept">
<legend> My legend </legend>
<input type ="checkbox" id ="chbox" name ="check_1">
<label for "chbox">This is my checkbox></label>
</fieldset>

这是我使用 Struts checkbox 标签的时候。

<span class="">
<s:checkbox 
    label="someLabel"                   
    name="someName" id="accept" />
</span>

这些在 Microsoft Edge 和 Internet Explorer 中按预期工作，但每当我使用 Google Chrome 时，屏幕 reader 都无法识别我的内容。我遇到的情况：

1：我正在切换到我的 Checkbox，屏幕 reader 显示 "Tab"。

2：我正在使用 space 键取消选中我的复选框，屏幕 readers 说 "Space"。（虽然它仍然取消选中我的复选框）

除此之外，我尝试用不同的 divs 包围我的代码，分配角色和 web-aria，但似乎没有任何效果。由于我对此完全陌生，我希望得到一些 'best-practice' 想法和提示。

感谢任何帮助，

提前致谢。

Answer 1

首先，我建议您不要使用 Struts 复选框，因为它们中的大多数都是为旧版浏览器设计的。它可能并不总是最适合现代屏幕 reader.

关于复选框，ARIA 参考最近的建议是使用 DOM 结构 <label><input>Text</label> 而不是 <label for>。

或在复选框上使用 aria-label。但是由于browser/screenreader的支持不同，第二种方式不太推荐。在某些糟糕的情况下，他们可以通过不同的方式忽略或读取重复的行。

Answer 2

嗯，这是一个 Chrome 问题。

勾选 this，因为您不是唯一一个。

我不知道有什么解决办法，我几年前就遇到过这个问题，幸运的是我不得不在 A/AA 上成功。

Answer 3

值得一提的是，讲述人不支持第三方（非 Microsoft）浏览器。

Screen reader 不同浏览器中复选框的能力

Screen reader capability for checkboxes in different browsers

html

checkbox

fieldset

screen-readers

accessible