angularjs - 可访问性:使用 aria-live 的页面加载器指示器

Question

问题:我有一个我正在努力解决的可访问性问题。我有一个有 Angular 的 Web 应用程序。加载内容时会显示页面加载微调器/指示器。当页面内容加载完毕后，微调器就会隐藏起来。这个“div”永远不会从 DOM 中删除。

当显示加载 div 时，加载 div 的内容不会被读取(通过 NVDA 或颚)。

<div class='loading' aria-live='polite' aria-label='Do not refresh the page' tabindex="-1">Do not refresh the page</div>

我不想改变应用程序的结构，而是使用“aria 标签”来解决这个问题，只是想知道我是否还需要做更多的事情来使 aria-live 工作？

更新(2016 年 7 月 27 日)

进一步说明:我不是从 DOM 中删除内容，而是使用 css 来显示/隐藏内容(显示:无显示:块，反之亦然)

Answer 1

aria-live当元素带有 aria-live 时触发屏幕阅读器(或带有 aria-live 的元素中的文本)被添加到 DOM 或从 DOM 中删除。相反，当您取消隐藏隐藏元素时，元素和文本都不会从 DOM 中添加或删除，因此该元素的 aria-live属性(property)不发挥作用。

要让屏幕阅读器宣布“不刷新页面”，以下任一选项都可以解决问题:

您可以创建 <div class='loading' aria-live='polite'>元素及其文本内容，然后将该元素添加到 DOM。

或者你可以从一个空的 <div class='loading' aria-live='polite'> 开始元素，然后填充其文本内容。

其他一些花絮:

只要元素里面的文字是你想朗读的，就可以省略元素的aria-label='Do not refresh the page'属性。

锦上添花，伤不起include a role attribute on the div that has aria-live .如果您不确定要使用哪个 Angular 色，请使用 role="status" ——这是一个非常安全的赌注。

当页面处于不再需要显示“不刷新页面”的状态时，请务必反转上述步骤。(即，如果您使用第一个选项并将整个元素添加到DOM，从 DOM 中删除整个元素。或者，如果您使用第二个选项并填充元素的文本内容，请清除元素的文本内容。)