表单是一种元素，可让用户向一个字段或一组字段提供数据。表单可以简单到单个字段，也可以复杂到每个页面具有多个字段的多步骤表单元素、进行输入验证，有时也可以采用人机识别系统。
从无障碍功能的角度来看，表单被视为最难实现的元素之一，因为它们要求了解我们已经涵盖的所有元素，并且需要特定于表单的其他规则。经过一定的理解和时间，您可以制作出适合您和您的用户的无障碍表单。
表单是本课程中最后一个特定于组件的单元。本单元重点介绍表单专用准则，但您在之前的单元中了解的所有其他准则（例如内容结构、键盘焦点和色彩对比度）也适用于表单元素。
字段
表单的核心是字段。字段是小型互动模式，例如输入或单选按钮元素，可让用户输入内容或进行选择。有多个表单字段可供选择。
默认建议使用已建立的 HTML 模式，而不是使用 ARIA 构建自定义内容，因为字段状态、属性和值等特性和功能本身就内置于 HTML 元素中，而您必须手动添加自定义 ARIA。
ARIA
<div role="form" id="sundae-order-form"> <!-- form content --> </div>
HTML
<form id="sundae-order-form"> <!-- form content --> </form>
除了选择最常访问的表单字段模式（如果适用），您还应为字段添加 HTML 自动补全属性。通过添加自动补全属性，可以为用户代理和辅助技术 (AT) 提供更精细的用途定义或识别。
借助自动补全属性，用户可以对视觉呈现进行个性化设置，例如在已为其分配生日自动补全属性 (bday) 的字段中显示生日蛋糕图标。从更笼统的角度来说，自动补全属性可让您更轻松快捷地填写表单。这对于有认知和阅读障碍的用户以及使用 ATs 的用户（例如屏幕阅读器）尤其有用。
<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 会收到消息，除非您添加其他代码以使消息对所有用户可见。
用户认为所有错误均已解决后，可以允许他们重新提交表单，并就其提交结果提供反馈。错误消息可告知用户他们还有更多更新要完成，而成功消息则确认用户已解决所有错误并成功提交表单。
检查您的掌握程度
测试您对无障碍表单相关知识的掌握情况
以下哪个答案是最无障碍的表单输入方式？
Email address: <input type="email" required><label>Email address: <input type="email" required></label><label>Email address: <input type="email" required autocomplete="email"></label><label>Email address (required): <input type="email" required aria-describedby="email-validation"> <span id="email-validation" class="validation-message">Please provide a valid email address using the format name@place.com</span></label>