NVDA 在动态更新后读取 aria-hidden 内容

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 以某种方式优先于 aria-hidden，但希望有人能有更多经验，或者有更好的模式来实现所需的行为。我尝试了另一种常见的技术，该技术涉及在呈现内容后关注页面的标题元素，但是这样做时，NVDA 仅读取该标题，而不是整个实时页面内容。

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

Answer 1

不要在主 div 上使用 aria-live。屏幕阅读器有自己的方式让用户控制阅读的内容，而您所做的基本上相当于在应用程序的所有内容上放置一个标志，直到用户“阅读”（无论这可能意味着什么），然后才允许他们阅读使用更多的应用程序。

关注标题是正确的做法。然后，您可以使用向下箭头键让 NVDA 阅读越来越多的页面。您还可以使用许多其他快捷键进行导航，例如按 h 键将带您进入下一个标题。 t 会带你去下一张桌子等等。