全部文章
发布与验证

让 AI 修表单标签:输入以后还知道这格是什么

给输入框一个填完之后仍然存在的标签。

资料核验2026.11.12 · W3C WAI · 网页可访问性

搜索框里的「按订单号搜索」一输入就消失了。表单只有一项时看着还好,一页有四个输入框时,用户回头检查就容易忘了每格是什么意思。

让助手从这一步开始

给助手带订单号和备注的两列表单,要求保留可见 label,用原生关联方式连接输入框。占位符仅做样例。再加入一条格式错误,确认页面能告诉用户该改哪格。

流程示意:可见标签;关联输入框;错误指向字段

让标签和输入框建立关系

优先使用可见 label,并通过 for 和唯一 id 关联到输入框。占位文字留给例子,比如「ORD-1024」。点标签、按 Tab 到输入框,再输入一个编号,确认输入以后仍能判断字段用途。

长提示或格式要求可以放在下方,并与字段关联。验证错误时既要看到问题,也要知道该改哪一格。

请助手写表单时,给每个字段提供短标签和一个反例,比让它自由发挥更省改文案的时间。

把问题变成可重跑的样例

在订单号框输入 ORD-1024 后,用键盘跳到备注框再跳回。订单号标签仍应可读。最后提交一个非法值,在浏览器检查错误说明与字段是否关联,并用可访问名称定位这两个输入框。

核对这几项输出

  • 点标签能聚焦相应字段。
  • 键盘可依序访问。
  • 输入后标签仍可见。
  • 错误出现时文字与字段有关联。

怎么判断改动能不能收

仅用截图判断修好了容易漏掉可访问名称。请助手同时检查浏览器可访问性树和键盘行为,用按角色与名称的测试定位。若多个行内字段重复标签,按业务含义加可区分信息。

表单有必填和格式要求时,把说明保留在字段附近,并给辅助技术明确关联。让助手用键盘完整填写一轮再故意提交非法值。按 Tab 返回时应知道自己到了哪个字段,以及为什么上次提交失败。

资料来源