WAI-ARIA：如果 aria-hidden=true MS windows 叙述者从 UI 中读取文本，则为事件

Question

我们在 Web 应用程序中使用 WAI-ARIA 来实现无障碍访问。我们遇到一种情况是 Windows 旁白从屏幕上读出所有内容，即使这些内容被标记为隐藏。为了解决这个问题，我尝试了以下解决方案，

<span style="visibility: hidden;display:none;" aria-hidden="true">Loading..</span>
<span style="width:0px;height:0px;font-size:0px;line-height:0 " aria-hidden="true">Loading..</span>

转介：

然后Windows解说员也读出来了。所以我的要求是，我们如何才能从 windows 旁白中隐藏文本，以便它不应该阅读我隐藏的文本和消息？

有什么建议吗？

Answer 1

由于您使用的是 Angular，因此您可以使用 HTML 中的 ng-if 到 add/remove 项。如果 ng-if 条件为 FALSE，项目将从 DOM 中删除，因此不会被读取：

<span ng-if="conditionSuchAsNotYetLoaded">Loading..</span>

WAI-ARIA : Event if aria-hidden=true MS windows narrator reads text from UI