2

情况

我有一个可以通过 JavaScript 显示和隐藏的屏幕区域（类似于“显示/隐藏高级搜索选项”）。在此区域内有表单元素（选择、复选框等）。对于使用屏幕阅读器（在本例中为 JAWS）等辅助技术的用户，我们需要将这些表单元素与标签链接或使用“标题”属性来描述每个元素的用途。我使用 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 会这样？

4

3 回答 3

2

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

于 2015-04-22T23:59:12.953 回答
1

这绝对看起来像 JAWS 中的一个错误，因为规范明确指出 display:none 应该导致元素及其子元素不显示在任何媒体中。

但是，玩说话：听觉属性可能有用吗？我不知道，因为我没有可用的 JAWS。

http://www.w3.org/TR/CSS2/aural.html#speaking-props

于 2008-10-29T00:53:17.953 回答
0

你试过这个吗？

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

过去，当我想让 JAWS 阅读一件事并跳过通常会阅读的其他内容时，这对我有用。

于 2015-04-15T20:34:38.520 回答