辅助功能：使用 aria-live 的页面加载器指示器
Accessibility: Page Loader indicator using aria-live
问题： 我遇到了一个正在努力解决的辅助功能问题。我有一个 angular 网络应用程序。加载内容时显示页面加载 spinner/indicator。当页面内容加载后，微调器将被隐藏。此 "div" 永远不会从 DOM 中删除。
当显示加载 div 时，加载 div 的内容未被读取（通过 NVDA 或 jaws）。
<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 工作？
已更新 (27/July/2016)
进一步说明：我不是从DOM中删除内容，而是使用css到show/hide内容（显示：none 显示：块，反之亦然）
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 中删除整个元素。或者，如果您使用第二个选项并填充了元素的文本内容，请清除元素的文本内容。）
动态添加或 shown/hidden 实时区域有几个问题。
Simply including an aria-live attribute or a specialized live region role (such as role="alert") in the initial markup as it's loaded will have no effect.
Dynamically adding an element with an aria-live attribute or specialized role to the document also won't result in any announcement by assistive technologies (as, at that point, the browser/assistive technologies are not aware of the live region yet, so cannot monitor it for changes).
Always make sure that the live region is present in the document first, and only then dynamically add/change any content.
根据我的个人经验，如果您使用 show/hide 然后 NVDA also has a bug，即使在页面加载时 DOM 中存在实时 regoin，这也需要在文本更新之前稍作延迟最初显示后的实时区域。显然是因为添加第一个文本时该区域不存在，所以这不是 "update"。关于超时，您需要将其设置为大于浏览器刷新频率的值。我使用 100 毫秒。免责声明：我强烈反对使用此类解决方法来弥补屏幕阅读器或浏览器的问题，但在某些情况下它可能对某些人有用。
问题： 我遇到了一个正在努力解决的辅助功能问题。我有一个 angular 网络应用程序。加载内容时显示页面加载 spinner/indicator。当页面内容加载后，微调器将被隐藏。此 "div" 永远不会从 DOM 中删除。
当显示加载 div 时，加载 div 的内容未被读取（通过 NVDA 或 jaws）。
<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 工作？
已更新 (27/July/2016)
进一步说明：我不是从DOM中删除内容，而是使用css到show/hide内容（显示：none 显示：块，反之亦然）
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
roleattribute on the div that hasaria-live。如果您不确定使用哪个角色，请选择role="status"——这是一个非常安全的选择。 - 当页面处于不再需要显示“不刷新页面”的状态时，请务必反向执行上述步骤。（也就是说，如果您选择了第一个选项，并且您将整个元素添加到 DOM，从 DOM 中删除整个元素。或者，如果您使用第二个选项并填充了元素的文本内容，请清除元素的文本内容。）
动态添加或 shown/hidden 实时区域有几个问题。
Simply including an
aria-liveattribute or a specialized live region role (such asrole="alert") in the initial markup as it's loaded will have no effect.
Dynamically adding an element with anaria-liveattribute or specializedroleto the document also won't result in any announcement by assistive technologies (as, at that point, the browser/assistive technologies are not aware of the live region yet, so cannot monitor it for changes).
Always make sure that the live region is present in the document first, and only then dynamically add/change any content.
根据我的个人经验，如果您使用 show/hide 然后 NVDA also has a bug，即使在页面加载时 DOM 中存在实时 regoin，这也需要在文本更新之前稍作延迟最初显示后的实时区域。显然是因为添加第一个文本时该区域不存在，所以这不是 "update"。关于超时，您需要将其设置为大于浏览器刷新频率的值。我使用 100 毫秒。免责声明：我强烈反对使用此类解决方法来弥补屏幕阅读器或浏览器的问题，但在某些情况下它可能对某些人有用。