辅助功能：使VoiceOver读取文本而不关注网页

我在网页（HTML，JavaScript，Jquery）中有表单。如果没有将焦点设置为包含错误描述的元素，则表单提交因表单中的无效条目而失败（一切发生在客户端）时，如何让VoiceOver读取某些内容？辅助功能：使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>

来源

2015-10-14 EGN

您是否可以发布代码示例以防焦点方法或接收元素出现问题？重点通常是宣布错误消息的最简单方法。 – stringy

我加了代码，谢谢你的帮助。正如我所说，NVDA宣布这个错误。这是它的VoiceOver – EGN

张贴您的隐藏的CSS – unobf

有一个关于应该发生时，他们的显示属性改变为居住区有什么分歧/混乱请参阅以下页面上的“注释”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>

你会那么每次产生错误及时更换警报的全部内容消息

来源

2015-10-15 16:10:51 unobf

非常感谢您的先生！ – EGN

辅助功能：使VoiceOver读取文本而不关注网页

回答

相关问题