爲什麼隱藏的表單元素仍然被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讀取？

回答

相關問題