用途:为表单字段设计可见且持久的标签、说明文字与分组结构,使其对屏幕阅读器和认知障碍用户友好。资料指出,每个字段都需要一个可见、持久且与输入框程序化关联的标签,这是网页最常见的无障碍缺陷,也最容易修复。
主要能力与规则:每个输入都要有可见标签,使用 label 元素配合 for/id 关联;标签始终可见,不能只用聚焦后消失的占位符;标签置于输入框上方,最易访问和扫读。标签要说明应填内容,如“Email address”“Date of birth (DD/MM/YYYY)”,格式提示放在标签或帮助文本中。必填字段用可见文字“required”或 * 标注,若用 * 需在表单顶部说明,并用 aria-required="true" 做程序化标记;也可改为默认必填、只标注可选字段。相关字段用 fieldset 和 legend 分组,单选按钮必须分组,复选框共享同一问题时分组,地址字段按“Delivery address”或“Billing address”分组。多表单场景中,每个表单区块应有标题或 legend,并在视觉与结构上分隔,可用进度指示帮助用户定位。
说明与错误:帮助文本放在标签与输入框之间,用 aria-describedby 关联,保持一句话简洁。错误信息必须与字段程序化关联(aria-describedby 或 aria-errormessage),放在字段正下方而非远处横幅,并在错误中包含字段标签。
常见错误:用占位符当标签、仅图标标签、标签与输入框距离过远、标签随输入状态变化、按钮无标签。
检查清单:每个输入都有可见 label 且 for/id 关联;无仅占位符标签;必填字段有视觉与程序化标识;相关字段用 fieldset/legend 分组;帮助文本用 aria-describedby 关联;错误信息与字段关联;所有按钮有可见文字标签。
限制:资料未提供具体代码示例、安装命令、平台或收费信息。