Question

我正在一个几乎任何人都可以访问的网站上工作。

目前，我正试图找出一种方法，可以通过不同类型的屏幕阅读器访问复选框，使用键盘浏览内容。目前我同时使用标准Windows屏幕阅读器和NVDA（参见https://www.nvaccess.org/）。我尝试过在网络上找到的不同解决方案，但我仍然坚持，我会喜欢一些关于如何实现这些功能的技巧和诀窍。需要注意的一点是，它必须适用于不同类型的浏览器（理想的是Microsoft Edge，谷歌浏览器和Internet Explorer）。

理想的情况是这样的：

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

2：屏幕阅读器通知我它是checkbox，它的当前状态（已选中，未选中）及其标签。

3：空格键将取消选中并检查我的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中所期望的那样，但每当我使用谷歌浏览器时，屏幕阅读器都无法弄清楚我的内容。我遇到的情景：

1：我选择了Checkbox，屏幕阅读器说＆＃34; Tab＆＃34;。

2：我使用空格键取消选中我的复选框，屏幕阅读器说＆＃34; Space＆＃34;。（虽然它仍然取消选中我的复选框）

除此之外，我试图用不同的divs包围我的代码，分配角色和网络咏叹调，但似乎没有任何效果。因为我对此非常陌生，所以我会喜欢一些最佳实践＆＃39;想法和提示。

感谢任何帮助，

提前致谢。

Answer 1

首先，我建议您不要使用Struts复选框，因为大多数都是针对旧版浏览器设计的。对于现代屏幕阅读器来说，它可能并不总是最好的。

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

或在复选框上使用aria-label。但由于浏览器/屏幕阅读器的不同支持，第二种方式不太值得推荐。在一些不好的情况下，他们可以通过不同的方式忽略或读取副本来读取该行。

Answer 2

嗯，这是一种Chrome问题。

检查this，因为您不是唯一的一个。

我不知道这方面的任何解决方案，几年前我已经碰到了这个问题，幸运的是我只能在A / AA做到这一点。

Answer 3

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

不同浏览器中复选框的屏幕阅读器功能

3 个答案: