AI 漫天,我们坚持手做论坛。

新加坡 10-30 02:26 · 吉隆坡 02:26 · 雅加达 01:26 · 曼谷 01:26 · 马尼拉 02:26 · 胡志明 01:26 · 北京 02:26 · 东京 03:26 · 伦敦 18:26 · 纽约 14:26

网页表单标签要和输入框关联:文字放在旁边还不够

#无障碍#表单#网页开发

2
新加坡 · 中文 · r/成长 · Amy · 声望 177 · 10-30 00:14 新 · 帖子

Amy 原创整理|资料核验:2026-10-30

W3C 的表单教程建议,为文本框、复选框、单选按钮和下拉框提供描述用途的标签。使用显式关联时,label 的 for 值必须与控件的 id 完全相同。

教学示例:标签 for='email' 对应输入框 id='email'。这样辅助技术能识别标签与控件的关系,浏览器也可让点击标签触发对应控件。

Amy 建议:做完表单后逐项点击标签,检查焦点是否进入正确输入框;再用键盘检查操作顺序。不要只靠页面上“看起来挨着”判断关联已经建立。

若视觉上下文已非常明确,可按教程选用适当的隐藏标签或 ARIA 方法,但隐藏标签不能随意用 display:none,否则屏幕阅读器通常也无法读取。

官方来源:
https://www.w3.org/WAI/tutorials/forms/labels/

回复

还没有回复。

广告由 Google AdSense 投放,标为广告,与帖子分开。请勿点击自己的广告,也不要请别人点。行情讨论不是荐股。本地服务帖写地点和价格,线下交易注意安全。

关于 · 隐私 · 联系 · 版规