表单是一种元素，可让用户在字段或一组字段中提供数据。表单可以是单个字段，也可以是复杂的多步表单，其中每页包含多个字段、输入验证和 CAPTCHA。
从无障碍功能的角度来看，表单被认为是难以正确处理的元素之一，因为它们需要了解我们已经介绍过的所有元素，以及仅适用于表单的其他规则。只要稍加了解并花一些时间，您就可以制作出适合您和用户的无障碍表单。
表单是本课程中最后一个特定于组件的模块。本模块重点介绍特定于表单的指南，不过，之前模块中的指南（例如内容结构、键盘焦点和颜色对比度）也适用于表单元素。
字段
字段是表单的主干。字段是小型互动模式，例如输入或单选按钮元素，可让用户输入内容或做出选择。您可以选择各种表单字段。
默认建议是使用已建立的 HTML 模式，而不是使用 ARIA 构建自定义模式，因为某些功能（例如字段状态、属性和值）是 HTML 元素固有的。自定义字段需要您手动添加 ARIA。
不推荐 - 带有 ARIA 的自定义 HTML
<div role="form" id="sundae-order-form">
<!-- form content -->
</div>
推荐 - 标准 HTML
<form id="sundae-order-form">
<!-- form content -->
</form>
除了选择最易于访问的表单字段模式之外，您还应在适用情况下向字段添加 HTML 自动补全属性 。添加自动补全属性可让用户代理和辅助技术 (AT) 更精细地 定义或识别用途 。
自动补全属性允许用户个性化视觉呈现，例如在分配了生日自动补全属性 (bday) 的字段中显示生日蛋糕图标。更一般地说，自动补全属性可让用户更轻松、更快速地填写表单。这对于有认知障碍和阅读障碍的人以及使用屏幕阅读器等 AT 的人尤其有用。
<form id="sundae-order-form">
<p>Name: <input type="name" autocomplete="name"></p>
<p>Telephone: <input type="tel" autocomplete="tel"></p>
<p>Email address: <input type="email" autocomplete="email"></p>
</form>
最后，表单字段在接收焦点或用户输入时不应产生上下文变化，除非用户在使用组件之前已收到有关该行为的警告。例如，当字段接收焦点或用户向字段添加内容后，表单不应自动提交。
标签
标签会告知用户字段的用途、字段是否为必填字段，还可以提供有关字段要求的信息，例如输入格式。标签必须始终可见，并准确地向用户描述表单字段。
无障碍表单的基本原则之一是在字段及其标签之间建立清晰准确的连接。无论是在视觉上还是在程序上，情况都是如此。如果没有这种上下文，用户可能无法理解如何填写表单中的字段。
<form id="sundae-order-form">
<p><label>Name (required): <input type="name" autocomplete="name" required></label></p>
<p><label>Telephone (required): <input type="tel" autocomplete="tel" required></label></p>
<p><label>Email address: <input type="email" autocomplete="email"></label></p>
</form>
此外，相关表单字段（例如邮寄地址）需要在程序上和视觉上进行分组。一种方法是使用 fieldset 和 legend 模式对相似的元素进行分组。
说明
字段说明与标签的用途类似，都是用于提供有关字段和要求的更多背景信息。如果标签或表单说明足够详细，则无需提供字段说明即可实现无障碍功能。
不过，在某些情况下，添加其他信息有助于避免表单错误，例如传递有关密码字段的输入长度下限的信息，或告知用户要使用的日历格式（例如 MM-DD-YYYY）。
您可以使用多种不同的方法向表单添加字段说明。其中一种最佳方法是，除了 <label> 元素之外，还向表单元素添加
aria-describedby
属性。屏幕阅读器将同时读取说明和标签。
如果您向元素添加
aria-labelledby
属性，则该属性值会替换
<label>中的文本。与往常一样，请使用您打算支持的所有 AT 测试最终代码。
错误
在创建无障碍表单时，您可以采取很多措施来防止用户出现表单错误。在本模块的前面部分，我们介绍了清晰标记字段、创建标识标签以及尽可能添加详细说明。但是，无论您认为表单有多清晰，用户最终都会犯错。
当用户遇到表单错误时，第一步是 让用户知道错误。必须清楚地标识发生错误的字段，并且必须以文本形式向用户描述错误本身。
- 模态，内嵌在错误发生的位置附近
- 一组错误，分组在页面顶部的一条较大消息中
宣布错误时，请务必注意键盘焦点 和ARIA 动态区域选项 。
尽可能向用户提供有关如何修复错误的详细建议。您可以使用两个属性来通知用户错误。
- 您可以使用 HTML required 属性。浏览器会根据文件验证参数提供一般错误消息。
- 或者，您可以使用 aria-required 属性向 AT 分享自定义错误消息。只有 AT 会收到此消息，除非您添加代码以使所有用户都能看到该消息。
用户认为所有错误都已解决后，允许他们重新提交表单并提供有关提交结果的反馈。错误消息会告知用户他们需要进行更多更新，而成功消息则会确认他们已解决所有错误并成功提交表单。
其他成功标准
WCAG 2.2 引入了以下成功标准，重点在于提供更易于访问的表单体验：