6

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

4

2 回答 2

13

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'属性。
  • 为了锦上添花，在 div 上包含一个rolearia-live具有. 如果您不确定要使用哪个角色，请选择role="status"——这是一个非常安全的选择。
  • 当页面处于不再需要显示“不刷新页面”的状态时，请务必颠倒上述步骤。（即，如果您使用第一个选项并将整个元素添加到DOM，从 DOM 中删除整个元素。或者，如果您使用第二个选项并填充了元素的文本内容，请清除该元素的文本内容。）
于 2016-07-26T21:09:41.893 回答
1

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

首先引用MDN - ARIA live region：

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

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

于 2020-03-20T16:03:55.793 回答