无障碍表单设计

清晰的标签能告诉你，每个表单字段需要填写什么信息。在代码中将标签与字段关联，能帮助辅助工具识别这些字段。说明和反馈能帮助你完成表单并纠正错误。检查一下，你接下来设计的表单中，标签是否与对应的字段关联。

屏幕阅读器是一种能朗读界面信息的软件。程序化标签关联，就是在代码中将字段的标签与字段连接起来，让辅助工具能够识别字段的用途。HTML 是用来构建网页结构的语言，它提供了 label 元素来建立这种关联。属性是 HTML 元素上的设置项：标签的 for 属性必须与字段的标识符 id 完全一致。在一个假设的电子简报订阅表单中，“电子邮箱地址”标签可以使用 for="email"，旁边的输入框则使用 id="email"。[2]

尽可能使用显式的标签关联。另一种方法是将字段和标签文字一起放进一个 label 元素中；指南指出，显式关联通常能得到辅助工具更好的支持。可见的标签能帮助你理解字段。在某些特定情况下，如果周围的内容已经清楚说明了字段的用途，可以在视觉上隐藏标签，同时让辅助工具仍能通过代码访问它。这种做法有适用条件，不能以此为由移除整个表单中的可见标签。[2]

使用 fieldset 和 legend 将相关控件分组：fieldset 是容纳一组相关控件的 HTML 元素，legend 则为这一组提供标题。一个假设的申请表可以将雇佣类型选项放在“雇佣类型”这一组中。提供说明，告诉用户如何填写字段。假设密码规则要求使用八个字符，就应让用户在开始输入前看到说明，例如在字段获得焦点时，也就是字段被选中、可以接收输入时显示说明。这个时机只是用来说明如何提供有帮助的提示，并不是规定所有情况都必须在此时触发。[1]

验证输入，也就是检查用户填写的信息，并提供撤销更改和确认输入数据的选项。出现错误时，告诉用户哪里出了问题、如何纠正，并在成功完成时给予确认。例如，在一个假设的表单中，如果用户漏填了必需的电子邮箱地址，可以提示“请输入电子邮箱地址”。所提供的概述支持给出纠错反馈，但没有规定错误提示必须放在某个位置，也没有保证屏幕阅读器会如何播报。[1]

让表单保持简短，只询问完成流程所需的信息。将长表单拆分成几个逻辑清晰的步骤，并向用户显示进度。尽可能避免设置时间限制；如果确实需要限制时间，就提供关闭限制或延长时间的方法。指南指出，实时活动，以及时间因素对有效提交必不可少的情况，属于例外。[1]

让标签在视觉上靠近对应的字段。对于英语等从左向右书写的语言，指南介绍的布局是：将标签放在复选框和单选按钮旁边，将其他字段的标签放在字段上方或左侧。把标签放在字段上方有助于减少横向滚动，但是否有用取决于周围的设计，需要逐一评估。这些建议没有规定适用于所有情况的构建顺序，也不能保证每位用户都能无障碍地使用表单。[2]

• 官方指南，而非实验证据：WAI 建议使用能说明用途的标签，并将标签与控件关联。显式关联要求标签的 for 属性与控件的 id 一致；这种关联能让辅助工具引用正确的标签，也能通过标签扩大可点击区域。[2]
• 官方指南：WAI 建议将相关控件分组、提供说明、检查输入，并在出现错误或成功完成时通知用户。这些做法相互补充，没有规定适用于所有情况的构建顺序。[1]
• 有适用条件的设计建议：将标签放在字段上方有助于减少横向滚动，但 WAI 指出，是否有用取决于附近的字段和内容，需要逐一评估。这并不是适用于所有情况的位置规则。[2]

这些文档提供的是官方实施指南，并非通过实验确定完成情况、错误率、认知或屏幕阅读器性能在数值上有何改善。它们不保证符合法律要求，使用某项技术也不能证明整个表单满足所有适用的无障碍要求。本课中的例子都是假设性的说明，并非研究报告中的结果。此前的参考文献条目“Web Accessibility Initiative (WAI) - Forms Concepts”标识有误，这里已替换为“表单教程（Forms Tutorial）”[1]。此前归于 WebAIM 审计分析的一项说法已被删除，因为所提供的摘录无法证实该说法。这些摘录也没有确定屏幕阅读器会使用的具体措辞或播报内容。