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

Question

我想創建一個可訪問的網頁，其中包含許多組件，可以在用戶與頁面交互時隱藏和顯示這些組件。 當顯示組件時，我期望屏幕閱讀器（在這種情況下為NVDA）讀取組件的內容。

舉個例子：

 <html> <body> <div id="comp1" style="display:none;" role="region" tabindex="-1" aria-expanded="false"> <div>This is component 1</div> <button type="button" onclick="ShowComponent(comp2)">Show 2</button> </div> <div id="comp2" style="display:none;" role="region" tabindex="-1" aria-expanded="false"> <div>This is component 2</div> <button type="button" onclick="ShowComponent(comp1)">Show 1</button> </div> <script type="text/javascript"> function HideAll() { // hide both components var comp1 = document.getElementById("comp1"); comp1.style.display = "none"; comp1.setAttribute("aria-expanded", "false"); var comp2 = document.getElementById("comp2"); comp2.style.display = "none"; comp2.setAttribute("aria-expanded", "false"); } function ShowComponent(comp) { HideAll(); // show this component comp.style.display = "block"; comp.setAttribute("aria-expanded", "true"); comp.focus(); } ShowComponent(document.getElementById("comp1")); </script> </body> </html>

在上面的示例中，單擊組件1中的按鈕將隱藏組件1並顯示組件2。

單擊組件2中的按鈕將隱藏組件2並顯示組件1。

但是，當在組件之間切換時，NVDA似乎不會讀取組件的內容。 有沒有辦法實現這一目標？

請在GitHub上查看此Gist以查看使用NVDA

Answer 1

將這兩個街區填入ARIA直播區域。

您需要了解一些實時區域屬性才能使其正常工作。 如果你想讓它們在變化后立即公布，無論用戶在做什么，它都將是assertive 。 如果您希望它等到用戶完成交互，那么它將是polite 。 還有相應的實時區域角色，我在下面顯示。

我認為您的示例代碼中不需要其他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之外的屏幕閱讀器。

以下是脫機警報的示例。 這是一個方便的幻燈片，更詳細。 現在還有很多東西你知道要搜索什么。

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

問題描述

1 個解決方案

解決方案1
4 已采納 2016-11-23 14:23:12

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

問題描述

1 個解決方案

解決方案1 4 已采納 2016-11-23 14:23:12

解決方案1
4 已采納 2016-11-23 14:23:12