可访问的错误处理与外-ARIA-最佳实践？
可访问的错误处理与外-ARIA-最佳实践？
提问于 2017-05-10 07:12:17
我想告诉用户有关使用WAI属性的无效输入字段的辅助技术(如盲文或屏幕阅读器)。
我尝试过两种方法，两种方法都有效，但我不知道哪一种是最佳实践。请分享你对此的想法。
方法1
用咏叹调来形容。SR和盲文读标签，除非有错误信息存在。
可能的缺点:似乎一些较老的SRs有问题的外-咏叹调属性。还有更多的全局ids。
<input
id="{{unique-id}}"
type="text"
aria-describedby="{{unique-id}}-error-message"
>
<label
for="{{unique-id}}"
>
{{title}}
</label>
<p
id="{{unique-id}}-error-message"
role="alert"
>
{{error-message}}
</p>方法2
使用标题和咏叹调标签。向后兼容的标题。可能的缺点:必须从服务器发送到客户端的冗余文本。
<input
id="{{unique-id}}"
type="text"
title="{{title}} {{error-message}}"
aria-label="{{title}} {{error-message}}"
>
<label
for="{{unique-id}}"
>
{{title}}
</label>
<p>
{{error-message}}
</p>这两种方法的结合按以下顺序排列属性的优先级(如果支持的话)：
- aria标签
- 标题
- aria-描述
对这方面的最佳做法有什么想法吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-05-10 15:00:34
我建议您查看为表单验证而显式添加的ARIA状态：
本代码来自Mozilla -访问该网站获得更多信息。
<input name="email" id="email" aria-required="true" reqiured
aria-invalid="false" onblur="checkValidity('email', '@', 'Invalid e-mail address');"/>
<script>
function checkValidity(aID, aSearchTerm, aMsg) {
var elem = document.getElementById(aID);
var invalid = (elem.value.indexOf(aSearchTerm) < 0);
if (invalid) {
elem.setAttribute("aria-invalid", "true");
updateAlert(aMsg); // show your ARIA alert message
} else {
elem.setAttribute("aria-invalid", "false");
updateAlert(); // remove your ARIA alert message
}
}
</script>Stack Overflow用户
发布于 2017-05-11 13:41:30
第三个选项:使用带有约束验证API的本机客户端验证
这需要Javascript，但您将确保浏览器将本机实现错误消息，并将该信息提供给可访问性API。
document.getElementById("{{unique-id}}").setCustomValidity("21 characters expected");我不会使用此解决方案，除非使用足够的视觉信息，这将不要求用户在查看错误消息之前提交表单。如果您的方法能够解决这个问题，我也喜欢G139:创建允许用户跳转到错误的机制技术
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43885757
复制相关文章
相似问题
腾讯云开发者
