Javascript 可访问性:使画外音阅读文本而不关注网页

Javascript 可访问性:使画外音阅读文本而不关注网页,javascript,html,accessibility,voiceover,Javascript,Html,Accessibility,Voiceover,我在网页中有一个表单(HTML、JavaScript、Jquery)。由于表单中的无效条目(一切都发生在客户端)而导致表单提交失败时,如何使VoiceOver读取内容,而不将焦点设置为包含错误描述的元素 我能够使它与NVDA一起工作,但画外音不喜欢在不关注它的情况下阅读某些内容,或者至少我没有为它设置适当的属性。这里有什么建议吗 在NVDA中工作的代码如下 if(logic for error) { $('#inline-errors-alert').attr({ 'aria-h

我在网页中有一个表单(HTML、JavaScript、Jquery)。由于表单中的无效条目(一切都发生在客户端)而导致表单提交失败时,如何使VoiceOver读取内容,而不将焦点设置为包含错误描述的元素

我能够使它与NVDA一起工作,但画外音不喜欢在不关注它的情况下阅读某些内容,或者至少我没有为它设置适当的属性。这里有什么建议吗

在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>

这里有一些消息


当活动区域的显示属性发生变化时,对于活动区域应发生的情况存在分歧/困惑,请参见下页的“注意事项”

您的实现必须向有视力的用户发出不可见的警报。因此,您应该在以下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>

这里有消息


然后,每次生成错误消息时,都会替换警报的全部内容

如果焦点方法或接收元素出现问题,是否可以发布代码示例?焦点通常是发布错误消息的最简单方法。我添加了代码,谢谢你的帮助。正如我所说,NVDA宣布错误。这是画外音,它不张贴你的CSS为hiddenHi@unobf,这是CSS(显示:无;可见性:隐藏;)非常感谢你,先生!