[英]Accessibility: Make VoiceOver read a text without focus on a Web page
我在网页中有一个表单(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>
然后,每次生成错误消息时,都会替换警报的全部内容
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.