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

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

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

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

Answer 2

你试过这个吗？

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

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

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

2 个答案: