为什么 JAWS 仍然可以读取隐藏的表单元素？
情况
我有一个屏幕区域可以通过 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 会有这样的行为？
The Situation
I have an area of the screen that can be shown and hidden via JavaScript (something like "show/hide advanced search options"). Inside this area there are form elements (select, checkbox, etc). For users using assistive technology like a screen-reader (in this case JAWS), we need to link these form elements with a label or use the "title" attribute to describe the purpose of each element. I'm using the title attribute because there isn't enough space for a label, and the tooltip you get is nice for non-screen-reader users.
The code looks something like this:
<div id="placeholder" style="display:none;">
<select title="Month">
<option>January</option>
<option>February</option>
...
</select>
</div>
The Problem
Normally, JAWS will not read hidden elements... because well, they're hidden and it knows that. However, it seems as though if the element has a title set, JAWS reads it no matter what. If I remove the title, JAWS reads nothing, but obviously this is in-accessible markup.
Possible Solutions
My first thought was to use a hidden label instead of the title, like this:
<div id="placeholder" style="display:none;">
<label for="month" style="display:none">Month</label>
<select id="month">...</select>
</div>
This results in the exact same behavior, and now we lose the tool-tips for non-screen-reader users. Also we end up generating twice as much Html.
The second option is to still use a label, put position it off the screen. That way it will be read by the screen-reader, but won't be seen by the visual user:
<div id="placeholder" style="display:none;">
<label for="month" style="position:absolute;left:-5000px:width:1px;">Month</label>
<select id="month">...</select>
</div>
This actually works, but again we lose the tool-tip and still generate additional Html.
My third possible solution is to recursively travel through the DOM in JavaScript, removing the title when the area is hidden and adding it back when the area is shown. This also works... but is pretty ugly for obvious reasons and doesn't really scale well to a more general case.
Any other ideas anyone? Why is JAWS behaving this way?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
为项目赋予 aria-hidden="true" 属性，它应该对屏幕阅读器隐藏。
Give items the aria-hidden="true" attribute, and it should be hidden from the screenreader.
这看起来绝对像是 JAWS 中的一个错误，因为规范明确指出 display:none 应该导致元素及其子元素不显示在任何媒体中。
然而，玩弄 talk: aural 属性可能有用吗？ 我不知道，因为我没有 JAWS。
http://www.w3.org/TR/CSS2/aural.html#speaking-props
This definitely looks like a bug in JAWS as the spec definitively states that display:none should cause an element and its children not to be displayed in any media.
However, playing with the speak: aural property might be useful? I don't know as I don't have JAWS available.
http://www.w3.org/TR/CSS2/aural.html#speaking-props
你尝试过这个吗？
过去，当我想让 JAWS 读取一件事并跳过通常会读取的其他内容时，这对我很有用。
Did you try this?
This has worked for me in the past when I wanted to make JAWS read one thing, and skip over something else that would normally be read.