表单提交后,页面顶部列出“姓名未填写”,输入框旁却写着另一句含义不明的提示,读者可能以为还有两个不同问题。GOV.UK Design System的Error summary说明要求:汇总中的消息与对应输入位置旁的错误消息使用相同措辞。[1] 重复同一个问题的名称,在这里是为了让两处信息相互对应。

页首汇总先提供全局视角。组件说明将它放在页面顶部,用来概括用户遇到的错误;同时,每个有错误的答案旁仍需显示Error message。读者从汇总知道这次有哪些地方需要关注,再在具体答案附近理解上下文。只有总览而缺少局部提示,会让人到了字段旁又重新寻找问题;只有局部提示,也不一定让人知道页面其他位置还有遗漏。

指南还要求,汇总中的错误链接到相应答案。这意味着消息不只是列成一段文字,还与具体位置建立关系。对于只用一个输入框回答的问题,原页说明链接到该字段;多字段答案和选项组又分别有自己的定位说明。本文采用的是“每条汇总对应答案”这一关系,不把一种字段形式的细节推广到所有表单。

比如,一份虚构设计稿在顶部写“填写联系人姓名”,在姓名字段旁也使用同一句话。这两处不是两次独立验证结果,而是同一项错误在总览与局部位置的呈现。如果后来修改字段名称,资料核对就需要同时检查两处是否仍指向同一问题。这个例子没有验证任何真实用户提交,也没有修改实际表单。

错误数量少,并不取消这一结构。GOV.UK说明即使只有一个验证错误,也显示错误汇总。它还将键盘焦点移到汇总列为组件行为要求,并说明其前端脚本会处理这一点。但别的网站是否已经实现相同行为,仍要真实检查;组件指南不能替代运行记录。

对网站设计交付而言,总览消息、字段旁消息及其定位关系应一起描述。本文依据所读组件文档,不提供后台验证或数据修改操作,也没有作浏览器与读屏验收。统一措辞不是让所有错误都用同一句泛泛的“出错了”,而是让同一个具体问题在不同位置保持一致。

信息来源

本文基于上述公开资料整理,未使用来源页面的图片、视频或嵌入媒体。