有没有办法让屏幕阅读器读取文档上的新内容（或出现的内容）？角色警报仅适用于几个标签

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就是你正在寻找的。它用于指示元素将被更新，并描述用户代理，辅助技术和用户可从活动区域获得的更新类型。

当区域被指定为礼貌时，辅助技术会通知用户更新，但通常不会中断当前任务，并且更新的优先级较低。当区域被指定为有主见，辅助技术将立即通知用户，并有可能清除以前的更新