辅助功能:使用aria-live的Page Loader指示器 [英] Accessibility: Page Loader indicator using aria-live

问题描述

问题:我遇到了可访问性问题.我有一个有角度的Web应用程序.加载内容时，将显示页面加载微调器/指示器.当页面内容加载后，微调器将被隐藏.永远不会从DOM中删除此"div".

Issue: I have an accessibility issue that I am struggling with. I have an angular web application. A page loading spinner/indicator is shown when content is loading. And when the page content has loaded the spinner is hidden. This "div" is never removed from DOM.

显示加载分区时，无法读取加载分区的内容(通过NVDA或爪子读取).

Content of the loading div are not read (by NVDAor jaws) when the loading div is shown.

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

我不想更改应用程序的结构，而是使用"aria标签"解决此问题，只是想知道我是否还需要做更多的工作才能使aria-live工作正常?

I wouldn't like to change the structure of the application but work around using 'aria tags' to resolve this, just wondering if I will have to do anything more to make aria-live work?

已更新(2016年7月27日)

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

Further clarification: I am not removing the content from DOM but using css to show/hide content (display: none to display: block and vice versa)

推荐答案

aria-live 当具有 aria-live 的元素(或元素中的文本)触发屏幕阅读器带有 aria-live 的代码)已添加到DOM中或从DOM中删除.相反，当取消隐藏隐藏元素时，不会在DOM中添加元素或文本，也不会从DOM中删除文本，因此元素的 aria-live 属性不会起作用.

aria-live triggers screen readers when an element with aria-live (or text within an element with aria-live) is added or removed from the DOM. In contrast, when you unhide a hidden element, neither elements nor text are added or removed from the DOM, so the element's aria-live property doesn’t come into play.

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

To get screen readers to announce "Do not refresh the page", either of these options should do the trick:

• 您可以从头创建< div class ='loading'aria-live ='polite'> 元素及其文本内容，然后将该元素添加到DOM中.
• 或者您可以从一个空的< div class ='loading'aria-live ='polite'> 元素开始，然后填充其文本内容.

• You can create the <div class='loading' aria-live='polite'> element and its text content from scratch and then add that element to the DOM.
• Or you can start with an empty <div class='loading' aria-live='polite'> element and then populate its text content.

其他一些花絮:

• 只要您要大声朗读元素内的文本，就可以忽略元素的 aria-label ='不刷新页面'属性.
• 要锦上添花，，这是一个非常安全的选择.
• 当页面处于或不再需要显示不刷新页面"的状态时，请确保颠倒上述步骤.(也就是说，如果您选择了第一个选项并添加了整个元素添加到DOM中，请从DOM中删除整个元素.或者，如果您选择了第二个选项，并且填充了元素的文本内容，请清除该元素的文本内容.)

• As long as the text inside the element is what you want to be read aloud, you can omit the element’s aria-label='Do not refresh the page' attribute.
• For icing on the cake, it can’t hurt to include a role attribute on the div that has aria-live. If you’re not sure which role to use, go with role="status"—that’s a pretty safe bet.
• When or if the page is at a state where you no longer need to display "Do not refresh the page", be sure to reverse the steps above. (That is, if you went with the first option and you added the whole element to the DOM, remove that entire element from the DOM. Or if you went with the second option and you populated the element’s text content, clear out the element’s text content.)

这篇关于辅助功能:使用aria-live的Page Loader指示器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！