辅助功能：让VoiceOver在不关注网页的情况下阅读文本-Java 学习之路

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

1 回答

6
当显示属性发生变化时，对于活区域应该发生什么会有不同意见/混淆，请参阅下页"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>
```
然后，每次生成错误消息时，都会替换警报的全部内容
回复于 2024-04-27T15:41:06+08:00

辅助功能：让VoiceOver在不关注网页的情况下阅读文本

1 回答

相关问题