辅助功能：让 VoiceOver 阅读文本而不关注网页

Question

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

Answer 1

有 disagreement/confusion 关于实时区域在其显示属性更改时会发生什么情况，请参阅下一页的 "note" 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>

每次生成错误消息时，您都需要替换警报的全部内容

辅助功能：让 VoiceOver 阅读文本而不关注网页

Accessibility: Make VoiceOver read a text without focus on a Web page

html

javascript

accessibility

voiceover