可访问性：使用 aria-live 的页面加载器指示器答案

【问题标题】：Accessibility: Page Loader indicator using aria-live可访问性：使用 aria-live 的页面加载器指示器
【发布时间】：2016-07-22 04:26:58
【问题描述】：

问题：我遇到了一个正在努力解决的可访问性问题。我有一个角度网络应用程序。加载内容时会显示页面加载微调器/指示器。当页面内容加载后，微调器被隐藏。这个“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 显示/隐藏内容（显示：无显示：块，反之亦然）

【问题讨论】：

我的 Angular 水平很低，但你有 URL 分享吗？不想改变结构意味着我不太可能提供帮助。
@aardrian 我不想改变结构的意思是寻求一个解决方案的建议，如果我不这样做，也许可以指出我正确使用 aria-live 就在上面.但如果您有任何其他想法，如果能解决我的问题，我将不胜感激。
你能澄清你的问题吗？您是说屏幕阅读器不会大声读取加载的 div 内容（“不要刷新页面”）吗？ Aria-live 旨在仅在其内容更改或显示更改（例如从 display: none 到 display: block ）时读出其元素内容。
@Josh 我已更新问题（2016 年 7 月 27 日）以提供更多详细信息。

标签： angularjs accessibility wai-aria aria-live

【解决方案1】：

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

要让屏幕阅读器宣布“不要刷新页面”，这些选项中的任何一个都可以解决问题：

您可以从头开始创建 <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 也无妨。如果您不确定要使用哪个角色，请使用role="status"——这是一个非常安全的选择。
当页面处于不再需要显示“请勿刷新页面”的状态时，请务必颠倒上述步骤。（也就是说，如果您使用第一个选项并添加了整个元素到 DOM，从 DOM 中删除整个元素。或者，如果您使用第二个选项并填充了元素的文本内容，请清除该元素的文本内容。）

【讨论】：

感谢 @ashley 为我清理 aira-live。我认为我的问题基本上是我希望 aria-live 能够在 show/hide 上工作，这肯定是行不通的。我还必须添加 aria-relevant（添加、删除、全部）以及 aria-live 以使其适合我的用例。

【解决方案2】：

动态添加或显示/隐藏实时区域存在几个问题。

首先引用MDN - ARIA live regions：

在加载的初始标记中仅包含aria-live 属性或专门的活动区域角色（例如role="alert"）将不起作用。
在文档中动态添加具有aria-live 属性或专用role 的元素也不会导致辅助技术发布任何公告（因为此时浏览器/辅助技术还不知道活动区域，所以无法监控它的变化）。
始终首先确保活动区域存在于文档中，然后才能动态添加/更改任何内容。

根据我的个人经验，即使在页面加载时 DOM 中存在实时 regoin，如果您使用 show/hide 然后 NVDA also has a bug 在最初显示后实时区域中的文本更新之前需要一小段延迟。显然是因为在添加第一个文本时该区域不存在，所以这不是“更新”。关于超时，您需要将其设置为大于浏览器的刷新滴答声。我使用 100 毫秒。免责声明：我强烈反对使用这种解决方法来弥补屏幕阅读器或浏览器的问题，但在某些情况下它可能对某些人有用。

【讨论】：