时间戳

首页 > 解决方案 > 不同浏览器中复选框的屏幕阅读器功能

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

问题描述

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

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

理想的情况是这样的：

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

2：屏幕阅读器告诉我它是 a 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>

这就是我使用 Strutscheckbox标签的时候。

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

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

1：我正在Checkbox使用标签，屏幕阅读器说“标签”。

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

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

任何帮助表示赞赏，

提前致谢。

标签： htmlcheckboxscreen-readersfieldsetaccessible

解决方案

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

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

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

推荐阅读