CODEWITHSUNDEEP
angularjsaccessibilitywai-aria
user3249448
user3249448

Reputation: 1409

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

We are using WAI-ARIA in our web application for accessibility. We came across one scenario is that Windows narrator reads out all the contents from screen even if those are marked as hidden. To resolve this i tried below solutions,

  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>

Referred :

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/

Then also Windows narrator reads it out. So my requirement is that how we can hide the text from windows narrator so that it should not read my hidden text and messages?

Any suggestions?

Upvotes: 1

Views: 975

Answers (1)

Alvin Thompson
Alvin Thompson

Reputation: 5438

Since you're using Angular, you could use ng-if to add/remove items from the HTML. If the ng-if condition is FALSE, the items are removed from the DOM so will not be read:

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

Upvotes: 0

Related Questions