如何讓屏幕閱讀器能夠響應在動態Web應用程序中顯示和隱藏內容？

我想創建一個可訪問的網頁，其中包含許多可以在用戶與頁面交互時隱藏和顯示的組件。當顯示一個組件時，我希望屏幕閱讀器（在這種情況下是NVDA）讀取組件的內容。如何讓屏幕閱讀器能夠響應在動態Web應用程序中顯示和隱藏內容？

作爲一個例子：

<html> 
 
<body> 
 
\t <div id="comp1" style="display:none;" role="region" tabindex="-1" aria-expanded="false"> 
 
\t \t <div>This is component 1</div> \t 
 
\t \t <button type="button" onclick="ShowComponent(comp2)">Show 2</button> \t 
 
\t </div> 
 
\t <div id="comp2" style="display:none;" role="region" tabindex="-1" aria-expanded="false"> 
 
\t \t <div>This is component 2</div> 
 
\t \t <button type="button" onclick="ShowComponent(comp1)">Show 1</button> 
 
\t </div> 
 

 
\t <script type="text/javascript"> 
 
\t \t function HideAll() { \t \t 
 
\t \t \t // hide both components 
 
\t \t \t var comp1 = document.getElementById("comp1"); 
 
\t \t \t comp1.style.display = "none"; 
 
\t \t \t comp1.setAttribute("aria-expanded", "false"); 
 
\t \t \t 
 
\t \t \t var comp2 = document.getElementById("comp2"); 
 
\t \t \t comp2.style.display = "none"; 
 
\t \t \t comp2.setAttribute("aria-expanded", "false"); 
 
\t \t } 
 
\t \t 
 
\t \t function ShowComponent(comp) { 
 
\t \t \t HideAll(); 
 
\t \t \t 
 
\t \t \t // show this component 
 
\t \t \t comp.style.display = "block"; 
 
\t \t \t comp.setAttribute("aria-expanded", "true"); 
 
\t \t \t comp.focus(); \t \t \t 
 
\t \t } \t 
 
\t \t 
 
\t \t ShowComponent(document.getElementById("comp1")); 
 
\t </script> 
 
</body> 
 
</html>

在上述例子中點擊部件1內的按鈕將隱藏部件1和顯示部件2

部件2內點擊一個按鈕將隱藏組件2並顯示組件1.

但是NVDA似乎不會讀取t他在組件之間切換時的內容。有沒有辦法可以實現這一點？

Please see this Gist on GitHub to check using NVDA

來源

2016-11-23 James.M

東西這兩個塊成ARIA live region。

有一些live region properties你需要知道使它工作。如果您希望在更改後立即宣佈它們，則無論用戶在做什麼，它都會是assertive。如果您希望它等到用戶完成交互，那麼它將是polite。還有corresponding live region roles，我在下面展示。

我不認爲你需要在你的示例代碼中的其他ARIA位或tabindex，但我不知道頁面的範圍。這是一個不同的例子，而不是：

<div role="alert" aria-live="assertive"> 
Anything in here will be announced as soon as it changes. 
</div> 

<div role="status" aria-live="polite"> 
Anything in here will be announced when it changes but only after the user has stopped interacting with the page.. 
</div>

此外，aria-atomic屬性將告訴屏幕閱讀器是否應該公佈整個事情（這是很好的一個警告消息），或者只是改變了部分（這可能是更適合定時器）。

避免在頁面上擁有多個ARIA直播區域。

這也將解決除NVDA以外的屏幕閱讀器。

這是example of an offline alert。這裏是方便的slideshare that goes into more detail。現在有更多的東西，你知道要搜索什麼。

來源

2016-11-23 14:23:12 aardrian

感謝您的回覆。在我的組件周圍添加一個活動區域解決了我的問題，NVDA現在可以按預期做出反應。我之前曾嘗試將aria-live屬性放在組件本身上，但沒有成功。看來，我遇到的主要問題是我的活動區域的範圍！ –

是的，這是一個常見問題。知道要包裝什麼是巨大的，然後知道在用戶測試之前，多麼積極（自信與禮貌）以及細節（原子）如何變得棘手。祝你好運！ – aardrian

如何讓屏幕閱讀器能夠響應在動態Web應用程序中顯示和隱藏內容？

回答

相關問題