form-labelling

表单标注

每个表单字段都需要有清晰可见、持续显示的标签，并以编程方式与输入框关联。这是 Web 上最常见的无障碍问题，也是最容易修复的问题。

核心规则

每个输入框都有可见标签

• 使用 元素，并通过 for/id 建立关联
• 标签必须始终可见，不能只是获得焦点后就消失的占位符文本
• 标签应放在输入框上方（这是最便于访问和快速浏览的做法）
• 绝不能只用占位符文本作为标签，因为用户开始输入后它就会消失

标签要说明要输入什么

• 好例子："电子邮件地址"
• 坏例子："在此处输入信息"
• 好例子："出生日期（DD/MM/YYYY）"
• 坏例子："日期"
• 格式提示应包含在标签或帮助文本中，而不应只放在占位符里

明确标示必填字段

• 用可见文本标记必填字段："必填"或 *
• 如果使用 ，请在表单顶部说明：" = 必填"
• 使用 aria-required="true" 以便以编程方式标示
• 更好的做法：通过设计让大多数字段成为必填项，并标示可选字段，例如"公司名称（可选）"

分组模式

相关字段需要使用 fieldset

• 使用 和 对相关字段进行分组
• 单选按钮：始终使用 fieldset 分组
  • 图例："首选联系方式"
  • 选项：电子邮件、电话、短信
• 复选框：当它们共用一个问题时进行分组
  • 图例："您对哪些主题感兴趣？"
  • 选项：设计、工程、产品
• 地址字段：归入"送货地址"或"账单地址"分组

包含多个表单时

• 每个表单部分都应有标题或图例
• 各部分在视觉和结构上都应清晰区分
• 进度指示器有助于用户了解当前所处的位置

说明模式

帮助文本

• 将帮助文本放在标签与输入框之间
• 使用 aria-describedby 关联，以便屏幕阅读器读出
• 好例子："至少需要 8 个字符，并包含一个数字"
• 说明应简洁——一句话即可

关联错误信息

• 错误信息必须以编程方式关联到字段（使用 aria-describedby 或 aria-errormessage）
• 将错误文本直接放在字段下方，而不是放在远处的横幅中
• 错误信息中应包含字段标签："电子邮件地址：请输入有效的电子邮件地址"

常见错误

• 用占位符代替标签——输入后会消失，许多屏幕阅读器也无法识别
• 仅用图标作为标签——只有放大镜图标，没有"搜索"文字标签
• 标签与输入框相距太远——空间上的分离会破坏视觉关联
• 标签会变化——不要根据输入状态更改标签文本
• 按钮没有标签——每个按钮都需要可见文本或 aria-label

评估清单

• 每个输入框都有可见的 ，并通过 for/id 与输入框关联
• 没有仅用占位符作为标签的情况
• 必填字段在视觉上和以编程方式都有标示
• 相关字段使用 fieldset/legend 分组
• 帮助文本通过 aria-describedby 关联
• 错误信息与对应字段关联
• 所有按钮都有可见的文本标签