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

Question

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

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

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

当我打开浏览器并直接导航到这些元素显示的状态时，这工作正常。但是，如果我从应用程序的其他地方开始并导航到该内容，NVDA 将读取应该 被隐藏起来。

<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 会带你到下一张 table 等等。