javascript - 辅助功能:使VoiceOver可以在不关注网页的情况下阅读文本

我在网页中有一个表单(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/