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

Question

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?

Answer 1

为项目提供aria-hidden =“ true”属性，并且该属性应从屏幕阅读器中隐藏。

Answer 2

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

Answer 3

Did you try this?

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

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.