标签或说明

要求内容

当用户被要求提供输入——文本框、复选框、单选按钮、下拉选择框、日期选择器、文件选择器——必须有标签或说明告知用户预期填写的内容。标签可以是可见文本、<label> 元素、aria-label 或 aria-labelledby；说明可以包含所需格式、允许的值或示例。

必填字段、预期格式（如”DD/MM/YYYY”）以及特殊约束（如”至少8个字符，含大小写”）均属于本成功准则的涵盖范围。

如何满足

• 为每个 <input>、<textarea> 和 <select> 配备 <label for="…">，其中 for 值与输入框的 id 匹配。
• 切勿仅用占位文本作为标签——占位文本在聚焦时消失，且对比度较差。
• 以可见方式标明必填字段（星号、“必填”文字或 aria-required="true"），并在表单顶部附近解释该约定。
• 提前说明预期格式，而非等用户出错后再告知：“日期（DD/MM/YYYY）“或”电话号码，如 555-123-4567。”
• 对于复选框或单选按钮组，使用 <fieldset> 和 <legend> 为该组添加标签。
• 对于仅含图标或筛选栏的输入框，使用 aria-label 提供有意义的名称。

常见失败

• 表单中仅以占位文本作为标签，用户开始输入时标签随即消失。
• 必填字段仅以红色星号标注，且未建立程序化关联。
• 出生日期输入框要求特定格式，却只在用户验证失败后才告知。
• 搜索输入框仅用放大镜图标标注，没有可访问名称。
• 登录表单的用户名和密码字段视觉上紧邻标签，但标签未与输入框建立程序化关联。

重要性

表单是大多数用户与网站进行交互的场所——注册、结账、联系、支持、预约。未加标签或标签不足的表单完全将屏幕阅读器用户拒之门外，因为他们无法判断每个输入框要填写什么内容。同样，这对阅读障碍用户也会造成困难——占位文本消失后，他们便失去了上下文提示；对认知障碍用户而言，提前提供格式指引尤为重要。

标签对于密码管理器、自动填充和语音控制软件同样不可或缺，这些工具均依赖标签文本来匹配字段。标签完善的表单惠及所有用户。