Question

当我使用div内容在图像或图形下显示时，必须关闭这些可视内容以使用辅助功能。我只是想展示我的咏叹调标签内容（语音）。画外音没有阅读此标签。

<div tabindex="0" role="definition" aria-hidden="false" aria-label="the bar for Current Balance & Available Credit" ng-if="vm.openCycleInfo" >
        <progress-bar tabindex="-1" aria-hidden="true" class="full-width" vb-min-text="Current Balance" vb-max-text="Available Credit" vb-id="BalanceProgress" vb-minimum-value="0" vb-maximum-value="{{vm.openCycleInfo.CreditLimit.Value}}" vb-current-value="vm.openCycleInfo.OTBBalance.Value"></progress-bar>
        <div tabindex="-1" aria-hidden="true" class="progress-bar-space"></div>
    </div>

Answer 1

我使用Windows上的Chrome和Firefox在NVDA中测试了您的代码，并且每次正确读取aria-label属性。与其他屏幕阅读器相比，VoiceOver似乎确实具有一些独特的行为，因此我不必为此担心太多。

某些选项：

您可以将aria-label属性的内容作为纯文本添加到div中。肯定会读。
如果您真的不希望此文本可见，也可以采用positioning the text off-screen的CSS方法，而不是使用aria-label。

无论如何，我不会太着迷于一个屏幕阅读器的工作原理。每种屏幕阅读器/浏览器组合都会产生略有不同的结果，并且这些结果会随着软件更新而随着时间而变化。作为开发人员，您能做的最好的事情就是对已建立的标准进行编码。

某些人会编写一些骇人听闻的“变通办法”，以缓解技术弱点（如此类）。如果您有足够的资源来不断更新代码，那么顺其自然。当屏幕阅读器或浏览器制造商着手解决问题时，采用的变通办法可能会导致比他们解决的问题更多的问题。

iOS Voiceover无法读取div内容

1 个答案: