当我使用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>
答案 0 :(得分:0)
我使用Windows上的Chrome和Firefox在NVDA中测试了您的代码,并且每次正确读取aria-label
属性。与其他屏幕阅读器相比,VoiceOver似乎确实具有一些独特的行为,因此我不必为此担心太多。
某些选项:
您可以将aria-label
属性的内容作为纯文本添加到div中。肯定会读。
如果您真的不希望此文本可见,也可以采用positioning the text off-screen的CSS方法,而不是使用aria-label
。
无论如何,我不会太着迷于一个屏幕阅读器的工作原理。每种屏幕阅读器/浏览器组合都会产生略有不同的结果,并且这些结果会随着软件更新而随着时间而变化。作为开发人员,您能做的最好的事情就是对已建立的标准进行编码。
某些人会编写一些骇人听闻的“变通办法”,以缓解技术弱点(如此类)。如果您有足够的资源来不断更新代码,那么顺其自然。当屏幕阅读器或浏览器制造商着手解决问题时,采用的变通办法可能会导致比他们解决的问题更多的问题。