WAI-ARIA：事件，如果aria-hidden = true MS窗口叙述者从UI读取文本

Question

我们在网络应用程序中使用WAI-ARIA进行访问。我们遇到一个场景是Windows叙述者从屏幕读出所有内容，即使这些内容被标记为隐藏。 要解决此问题，我尝试了以下解决方案，

1. <span style="visibility: hidden;display:none;" aria-hidden="true">Loading..</span>

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

提到：

http://juicystudio.com/article/screen-readers-display-none.php#comment3

http://webaim.org/techniques/css/invisiblecontent/#absolutepositioning

https://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/

然后Windows解说员也读出来了。所以我的要求是我们如何隐藏Windows叙述者的文本，以便它不会读取我隐藏的文本和消息？

有什么建议吗？

Answer 1

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

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