表单是一种元素，可让用户向字段或一组字段提供数据。表单可以简单到只有一个字段，也可以复杂到包含多个步骤的表单元素，每个页面包含多个字段、输入验证，有时还包含人机识别系统。
从无障碍设计的角度来看，表单是最难正确处理的元素之一，因为需要了解我们之前介绍的所有元素，以及仅适用于表单的其他规则。只要您花些时间了解相关知识，就可以创建适合您和用户的无障碍表单。
表单是本课程的最后一个特定于组件的模块。本单元将重点介绍表单专用准则，但您在前面单元中学习的所有其他准则（例如内容结构、键盘焦点和颜色对比度）也适用于表单元素。
字段
表单的支柱是字段。字段是小型互动模式，例如输入框或单选按钮元素，可让用户输入内容或进行选择。您可以从各种表单字段中进行选择。
默认建议是使用已建立的 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) 的字段中显示生日蛋糕图标。更广泛地说，自动补全属性可让用户更轻松、更快速地填写表单。这对有认知和阅读障碍的用户以及使用辅助技术（例如屏幕阅读器）的用户尤为有用。
<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 模式对类似元素进行分组。
广告内容描述
字段说明的用途与标签类似，都是用来为字段和要求提供更多背景信息。如果标签或表单说明足够描述性，则无需为无障碍功能提供字段说明。
不过，在某些情况下，添加额外信息有助于避免表单错误，例如传达有关密码字段输入最小长度的信息，或告知用户应使用哪种日历格式（例如 YYYY-MM-DD）。
您可以使用多种不同的方法向表单添加字段说明。最佳方法之一是，除了 <label> 元素之外，还向表单元素添加 aria-describedby 属性。屏幕阅读器会读出说明和标签。
如果您向元素添加 aria-labelledby 属性，该属性值会替换 <label> 中的文本。一如既往，请务必使用您计划支持的所有 AT 测试最终代码。
错误
在创建无障碍表单时，您可以采取许多措施来防止用户出现表单错误。在本单元前面的内容中，我们介绍了如何明确标记字段、创建标识标签，以及尽可能添加详细说明。但无论您认为自己的表单有多清楚，用户最终都会出错。
当用户遇到表单错误时，第一步是指明错误。必须明确指出发生错误的字段，并且必须以文本形式向用户说明错误本身。
您可以通过多种方法显示错误消息，例如：
- 在发生错误的位置附近显示模态式消息
- 将一组错误归为一则较大的消息，显示在页面顶部
在读出错误时，请务必注意键盘焦点和 ARIA 实时区域选项。
请尽可能为用户提供有关如何修正错误的详细建议。有两个属性可用于通知用户出现错误。
- 您可以使用 HTML required 属性。浏览器会根据提交的验证参数提供通用错误消息。
- 或者，您也可以使用 aria-required 属性向 AT 共享自定义错误消息。除非您添加其他代码以向所有用户显示消息，否则只有 AT 会收到消息。
当用户认为所有错误均已解决后，允许他们重新提交表单，并针对提交结果提供反馈。错误消息会告知用户需要进行更多更新，而成功消息则会确认用户已解决所有错误并成功提交表单。
其他成功标准
WCAG 2.2 引入了以下侧重于提高表单体验无障碍性的成功标准：
检查您的理解情况
测试您对无障碍表单相关知识的掌握情况
以下哪种表单输入方式最易于访问？
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>