Question

问题：我遇到了一个难以理解的辅助功能问题。我有一个有角度的Web应用程序。加载内容时会显示页面加载微调器/指示器。当页面内容加载时，微调器被隐藏。这个“div”永远不会从DOM中删除。

显示加载div时，不会读取加载div的内容（通过NVDAor钳口）。

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

我不想改变应用程序的结构，但是可以使用'aria tags'来解决这个问题，只是想知道我是否还需要做更多的工作才能让aria-live工作？

更新（2016年7月27日）

进一步澄清：我没有从DOM中删除内容，而是使用css来显示/隐藏内容（display：none to display：block，反之亦然）

Answer 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中删除整个元素。或者如果您使用第二个选项并填充元素的文本内容，请清除元素的文本内容。）

Answer 2

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

首先引述MDN - ARIA live regions：

仅在初始标记中包含aria-live属性或专门的实时区域角色（例如role="alert"），因为它已加载不会生效。
在文档中动态添加具有aria-live属性或专用role的元素也不会导致辅助技术的任何公告（因为此时，浏览器/辅助技术尚不了解实时区域，因此无法对其进行监视。
始终确保首先在文档中存在活动区域，然后再动态添加/更改任何内容。

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

辅助功能：使用aria-live

2 个答案: