javascript - 为什么隐藏的表单元素仍然被 JAWS 读取？

Question

情况

我有一个屏幕区域可以通过 JavaScript 显示和隐藏(类似于“显示/隐藏高级搜索选项”)。在这个区域内有表单元素(选择、复选框等)。对于使用屏幕阅读器(在本例中为 JAWS)等辅助技术的用户，我们需要将这些表单元素与标签链接起来，或者使用“title”属性来描述每个元素的用途。我使用 title 属性是因为没有足够的空间放置标签，而且您获得的工具提示对于非屏幕阅读器用户来说非常好。

代码看起来像这样:

<div id="placeholder" style="display:none;">
  <select title="Month">
    <option>January</option>
    <option>February</option>
    ...
  </select>
</div>

问题

通常，JAWS 不会读取隐藏的元素...因为它们是隐藏的并且它知道这一点。但是，似乎如果元素设置了标题，JAWS 无论如何都会读取它。如果我删除标题，JAWS 将不会读取任何内容，但显然这是不可访问的标记。

可能的解决方案

我的第一个想法是使用隐藏标签代替标题，如下所示:

<div id="placeholder" style="display:none;">
  <label for="month" style="display:none">Month</label>
  <select id="month">...</select>
</div>

这导致完全相同的行为，现在我们失去了非屏幕阅读器用户的工具提示。此外，我们最终生成了两倍的 Html。

第二个选项是仍然使用标签，将其放置在屏幕之外。这样屏幕阅读器就可以阅读，但视觉用户看不到:

<div id="placeholder" style="display:none;">
  <label for="month" style="position:absolute;left:-5000px:width:1px;">Month</label>
  <select id="month">...</select>
</div>

这确实有效，但我们再次失去了工具提示，但仍然生成额外的 Html。

我的第三个可能的解决方案是在 JavaScript 中递归遍历 DOM，在区域隐藏时移除标题，在区域显示时将其添加回来。这也行得通……但由于显而易见的原因，它非常难看，并且不能很好地扩展到更一般的情况。

还有其他想法吗？为什么 JAWS 会这样？

Answer 1

为项目提供 aria-hidden="true"属性，它应该对屏幕阅读器隐藏。