0

I have some information in HTML run in a WebView on an iPhone which should not be visible to regular Users, but should be read out by accesibility features such as IOs's VoiceOver.

just putting all the information inside an aria-label="lorem ipsum dolor" attribute did not work. Voice Over stil reads out the plain content of the tag. So i tried adding an "invisible" Element holding this information. However it seem to me that VoiceOver magically ignores elements which are not visibleto the user. I tried the varios techniques described by the Yahoo Accesibility Lab: http://www.cssmojo.com/hide-content-from-sighted-users/ but none of them are working for me.

Here is the Code:

<div tabindex="2">
  <h2 class="visually-hidden">Ausgewählter Ton:</h2>
  <div class="jingle" ng-if="ctrl.getAlarmJingle()">{{ctrl.getAlarmJingle()}}</div>
</div>
I want VoiceOver to read out "Ausgewählter Ton:" plus the value of `{{ctrl.getAlarmJingle()}}. best case would be that all of this appears to be one element in VoiceOver the Accessibility-Tree. What is the best practice of doing this? Has anybody good resources on how VoiceOver really works?

The Project is a hybrid app using angular 1 and Ionic. We are using wkwebview as WebView, but i don't think thats relevant for VoiceOver problems.

r-hold
  • 941
  • 8
  • 30

1 Answers1

0

Sorry the problem was, that my scss wasn't compiled hance the css never updated. Now that it does everythings works as expected.

r-hold
  • 941
  • 8
  • 30