有沒有辦法讓屏幕閱讀器讀取文檔上的新內容（或出現的內容）？角色警報僅適用於幾個標籤

Question

我試圖讓屏幕閱讀器讀取從display:none切換到display:block的一些內容。我認爲使用role="alert"是一種好方法，但它僅在內容處於div，p或span時有效。

但我的內容是div，span，p混合和屏幕閱讀器不讀（如h1，ul，li，和其他人）等標籤。

如何讓屏幕閱讀器讀取所有內容？

這裏有一個例子：

<button onclick="show()"> 
    Show 
</button> 

<div id="button" style="display:none" role="alert"> 
    Lettera A 
    <div> 
    Lettera B 
    <h1> 
    Lettera E 
    </h1> 
    <div> 
     Lettera C 
     <ul> 
     <li>Lettera D</li> 
     </ul> 
    </div> 
    </div> 
</div> 

的Javascript：

function show() { 
    $('#button').show(); 
} 

在這個例子中，屏幕閱讀器（我在Windows上使用NVDA在Firefox）只讀：
LETTERA一個
LETTERA乙
Lettera C

Answer 1

aria-live property就是你正在尋找的。它用於指示元素將被更新，並描述用戶代理，輔助技術和用戶可從活動區域獲得的更新類型。

當區域被指定爲禮貌時，輔助技術會通知用戶更新，但通常不會中斷當前任務，並且更新的優先級較低。當區域被指定爲有主見，輔助技術將立即通知用戶，並有可能清除以前的更新