NVDA在动态更新后读取咏叹调隐藏内容

Question

我正在努力使我的单页HTML5应用程序更加友好。该应用程序的基本结构具有静态标题栏和导航菜单，以及一个“主”div元素，显示大块动态更改的“页面”数据。

目前我已将aria-live="assertive"属性添加到主div中，以便当用户触发更改页面内容的事件时，屏幕阅读器将停止阅读旧内容并开始阅读新内容。

有些“页面”会大量使用可视化数据（图表，图形，表格），因此为了更有效地将数据传递给屏幕阅读器我使用了隐藏视觉元素的模式，而是转发了信息通过屏幕文字。

当我打开浏览器并直接导航到显示这些元素的状态时，这很好。但是，如果我从应用程序的其他位置开始并导航到此内容，NVDA将读取应该的内容em>被隐藏。

<div id="main" aria-live="assertive"> 
    ...
    <div class="offscreen"> Text describing chart </div>
    <div class="chart" aria-hidden="true"> Graphically drawn chart data... </div>
    ...
</div>

我目前最好的猜测是，aria-live优先于隐藏的咏叹调隐藏，但希望有人会有更多的经验，或者更好的模式来实现理想的行为。我尝试了另一种常见技术，包括在呈现内容后关注页面的标题元素，但是这样做时，NVDA只读取 标题，而不是整个实时页面内容。

（注意：我正在使用NVDA和FireFox进行测试。）

Answer 1

不要在你的主要div上使用咏叹调。屏幕阅读器有自己的方式让用户控制阅读内容和你正在做的事情本质上相当于在应用程序的所有内容上放置一个标志，直到用户有＆＃34;阅读它＆＃34; （无论可能意味着什么），然后再允许他们使用该应用程序。

关注标题是正确的方法。然后，您可以使用向下箭头键让NVDA读取越来越多的页面。还有一些其他快捷键可用于导航，例如点击h键将带您到下一个标题。 t会带你到下一张桌子等。