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

Posted 2023-04-13

【中文标题】不同浏览器中复选框的屏幕阅读器功能

【英文标题】：Screen reader capability for checkboxes in different browsers

【发布时间】：2018-05-07 11:03:03

【问题描述】：

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

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

理想的情况是这样的：

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

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

3：空格键将取消选中并检查我的checkbox，通知我我的操作。

这是我尝试过的两种不同的代码 sn-ps，但它们仅适用于 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 时，屏幕阅读器都无法识别我的内容。我遇到的情况：

1：我正在切换到我的Checkbox，屏幕阅读器会说“Tab”。

2：我正在使用空格键取消选中我的复选框，屏幕阅读器 说“空间”。 （但它仍然取消选中我的复选框）

除此之外，我尝试将我的代码包含在不同的 divs 中，分配角色和 web-aria，但似乎没有任何效果。由于我对此完全陌生，因此我会喜欢一些“最佳实践”的想法和技巧。

感谢您的帮助，

提前致谢。

【参考方案1】：

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

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

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

【讨论】：

不幸的是，我被 Struts 困住了，看来我必须使用 struts 复选框才能让提交按钮真正起作用。似乎我不能将我的 struts 提交按钮与标准 html 复选框（.

【参考方案2】：

嗯，这有点像 Chrome 问题。

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

我不知道有什么解决方案，几年前我就遇到过这个问题，幸运的是我必须在 A/AA 上做到这一点。

【参考方案3】：

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