创建一个机制允许用户跳转到错误区域___20160701

原文地址


说明

该技巧的目的是当用户提交的信息不被接受的时候,帮助用户找到错误区域。这些错误区域包含必填信息缺失和区域信息错误。当校验用户输入数据并检测到错误时,提供一个链接到错误区域的链接,这样用户就不必搜索错误区域。一个方法是使用服务器端验证,然后再次展示表单(包含先前已输入的数据),在页面顶端提供一个文本描述指明存在一个输入错误,描述问题的原因,并提供一个链接到问题区域的链接。


样例

样例1:服务器端错误检查

用户在表单区域输入无效数据并提交表单。服务器返回表单,用户输入的数据仍然存在,并在页面顶端清楚说明存在不被接受的数据。文本描述了错误的原因并提供一个链接链接到问题区域,这样用户可以容易地导航到问题区域并修复它。

样例2:使用弹窗校验客户端错误

用户在表单区域输入无效数据并试图提交表单。科幻段脚本检测到错误,取消提交,并修改网页文档来提供文本消息以描述错误,并带有跳转到错误区域的链接。脚本同时也会修改问题区域的标签并高亮。

样例3:不使用弹窗校验客户端错误

当用户提交一个表单,相对于将用户带到一个新网页,脚本会自动聚焦到“发生错误”的文本链接上。该链接会跳转到描述错误消息有序列表的第一个项目上。每一个列表项是一个链接,可跳转到错误发生的区域。在错误区域会有一个链接跳回到描述错误消息有序列表。如有需要,重复上述过程。


无障碍效果

各读屏、各浏览器的支持效果

测试人:

争渡、IE11:
永德、IE11:
NVDA、IE11:
永德、chrome:
NVDA、chrome:
NVDA、Firefox:
voiceover、chrmoe:
voiceover、Safari: