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

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

我有一个可以显示并通过JavaScript隐藏（类似“显示/隐藏高级搜索选项”）屏幕的面积。在这个区域内有表单元素（select，checkbox等）。对于使用屏幕阅读器（在这种情况下为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以这种方式行事？

来源

2008-10-28 Dave Lockhart

我只想说我访问了JAWS网站，这非常无益。我找不到任何方式提交一个错误报告，除了通过电子邮件（这绝对是一个错误）。不仅如此，即使页面上的简单链接在没有脚本的情况下也无法正常工作。据我所知，JAWS是市场的领导者。 :-( – Neall 2008-10-28 23:02:20

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

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

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

来源

2008-10-29 00:53:17 Gareth

你试试这个？

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

在过去，当我想让JAWS阅读一件东西，并跳过其他通常会被阅读的东西时，这已经适用于我。

来源

2015-04-15 20:34:38

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

来源

2015-04-22 23:59:12 thunderboltz

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

回答

相关问题