我在网页中有一个表单(HTML、JavaScript、Jquery)。当由于表单中的无效条目(一切都发生在客户端)而导致表单提交失败时,如果不将焦点设置到包含错误描述的元素,如何让 VoiceOver 读出某些内容?
我能够让它与 NVDA 一起工作,但是 VoiceOver 不喜欢在不关注它的情况下阅读某些东西,或者至少我没有为它设置适当的属性。这里有什么建议吗?
在 NVDA 中运行的代码是这样的
if(logic for error) {
$('#inline-errors-alert').attr({ 'aria-hidden': 'false' });
setTimeout(function() { $('#inline-errors-alert').attr({ 'aria-hidden': 'true' })}, 500);
}
HTML 标记是这样的
<div class="hidden" id="inline-errors-alert" role="alert" aria-describedby="inlineErrorsMessage" aria-hidden="true">
<p id="inlineErrorsMessage">some message here.</p>
</div>
最佳答案
关于实时区域在显示属性更改时应该发生什么,存在分歧/困惑,请参阅下页的“注释”https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role
您的实现必须向有视力的用户发出不可见警报。因此,您应该使用具有以下 CSS 的屏幕外技术:
.hiddden {
border: 0;
clip: rect(0 0 0 0);
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
width: 1px;
position: absolute;
}
然后使用以下 HTML 标记:
<div class="hidden" id="inline-errors-alert" role="alert" aria-atomic="true">
<p>some message here.</p>
</div>
每次生成错误消息时,您都将替换警报的全部内容
关于javascript - 辅助功能:让 VoiceOver 阅读文本而不关注网页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33128475/