如何使HTML-Elements在视觉上不可见但在Voice Over中呈现

Question

我在iPhone上的WebView中运行的某些信息对普通用户来说应该是不可见的，但是应该通过IOs的VoiceOver等可访问性功能来读取。

将所有信息放在aria-label =“lorem ipsum dolor”属性中并不起作用。 Voice Over stil读出标签的简单内容。所以我尝试添加一个“隐形”元素来保存这些信息。然而，在我看来，VoiceOver神奇地忽略了对用户不可见的元素。我尝试了Yahoo Accesibility Lab所描述的varios技术：http://www.cssmojo.com/hide-content-from-sighted-users/，但它们都不适用于我。

以下是代码：

<div tabindex="2">
  <h2 class="visually-hidden">Ausgewählter Ton:</h2>
  <div class="jingle" ng-if="ctrl.getAlarmJingle()">{{ctrl.getAlarmJingle()}}</div>
</div>

我希望VoiceOver读出“AusgewählterTon：”加上`{{ctrl.getAlarmJingle（）}}的值。最好的情况是，所有这些似乎都是VoiceOver中的一个元素 - 可访问性树。这样做的最佳做法是什么？有关VoiceOver真正有效的资源吗？

该项目是使用角度1和离子的混合应用程序。我们使用wkwebview作为WebView，但我认为这与VoiceOver问题无关。

Answer 1

抱歉问题是，我的scss没有编译，因为css从未更新过。现在，它确实可以按预期工作。