H1.06.2error summary links to fields设计研究

汇总项应可跳转到对应字段

别名: 错误跳转 · summary in-page link · error list navigation

概念解释

顶部清单若只是一段不能点的文字,人仍要自己在长表里搜那一项。可跳转指每一条汇总都是指向对应输入的页内链接:激活后,焦点落到该字段,该项进入可编辑状态。跳转的是具体控件,不是「大概那一段」的锚点。这条假定清单已经存在,只谈清单项的导航能力,不谈为什么需要清单,也不谈清单能不能顶替字段旁的那句错误。

机制

从目录到对象,中间隔着滚动距离和视觉搜索。纯文本清单只完成了「告知」,把「到达」留给人。长表、分栏、折叠里,字段名和屏幕上的标签还可能不一致(清单写「联系电话」,页面写「手机」),搜索失败。链接把到达收成一次激活:阅读顺序、焦点、视口对齐绑在同一目标上。第二层是可逆的来回:人改完一项往往要回到清单看还剩几处;若跳转是单向的 location.hash 且焦点被丢在字段上无法快捷回去,清单的计数功能被浪费,人会改用再提交当探测。跳转失败的典型原因不是没写 href,而是目标 id 绑在包裹 div 上、字段被禁用、或折叠未展开就执行 focus(),焦点落到不可见节点,看起来像没跳。

怎么研究

给同一份三处错误的清单做成「纯文本」「跳到区块标题」「跳到输入并聚焦」三种。测量从点清单到开始编辑的时间,并纳入键盘和阅读器用户。

自变量:跳转目标(无 / 区块 / 输入控件)、跳转后折叠是否自动展开、是否提供回到清单的路径。 因变量:从点击到该字段首个按键的时间、焦点是否落在可编辑节点、阅读器是否播报字段名、返回清单再处理下一项的次数。

鼠标用户会自己滚,掩盖跳转失败。键盘用户点清单里的链接后若 Tab 顺序乱掉,要单独记。不要把「有锚点」当成「可聚焦到输入」。

边界

一次性密钥、文件选择器等不能接收焦点的控件,链接应落到其可聚焦的触发器或包裹说明,并在到达时展开必要的折叠。单页路由把 #field-id 解释成另一次导航时,跳转会重载表单并丢掉已填值,必须用页内焦点 API 而不是改路由。打印件上的清单没有跳转。清单项多于一屏时,清单自身也要能键盘遍历,否则跳转入口到达不了。

怎么落地

  • 每一条汇总结成指向对应输入 id 的链接;激活时展开所在折叠,把焦点设到该输入,而不是只滚动到附近标题。
  • 字段名在清单与标签之间保持同一用词,避免跳到了地方却对不上号。
  • 提供回到清单的键盘路径(清单容器可聚焦,或「返回错误列表」),使人可以按目录逐项处理而不靠反复提交。
  • 验证:键盘激活第二条清单,确认焦点在第二处输入且可立即键入。把该字段放进折叠,确认先展开再聚焦。改完后 Shift+Tab 或「返回错误列表」能回到清单。把 id 误绑在外层 div 上作为反例,确认那种实现不得通过。

延伸

  • 同组H1.06.1 多处错误需要顶部汇总 · H1.06.3 汇总不能替代字段级提示
  • 相邻J3.01 键盘可达 · H1.05 错误定位与聚焦 · G2.05 位置指示
  • 站内检索error summary · in-page link · focus target

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/H1.06.2