表单

bookmark_border 通过集合保持井然有序 根据您的偏好保存内容并对其进行分类。

表单是一个元素，允许用户在字段或字段组中提供数据。表单可以像单个字段一样简单，也可以像多步骤表单元素一样复杂，每个页面有多个字段、输入验证，有时还有 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 autocomplete 属性添加到您的字段中。添加 autocomplete 属性允许更细粒度的目的定义或识别给用户代理和辅助技术 (AT)。

Autocomplete 属性允许用户个性化视觉呈现，例如在具有生日 autocomplete 属性（bday）的字段中显示生日蛋糕图标。更一般而言，autocomplete 属性使填写表单更容易、更快捷。这对于患有认知和阅读障碍的人以及使用 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）。

您可以使用多种不同的方法将字段描述添加到表单中。最好的方法之一是将 aria-describedby 属性添加到表单元素，以及 <label> 元素。屏幕阅读器将同时读取描述和标签。

如果您将 aria-labelledby 属性添加到您的元素，则属性值将覆盖 <label> 中的文本。与往常一样，请务必使用您计划支持的所有 AT 测试最终代码。

错误

在创建无障碍表单时，您可以做很多事情来防止用户犯表单错误。在本模块的前面，我们介绍了清晰地标记字段、创建识别标签以及尽可能添加详细描述。但是，无论您认为您的表单有多么清晰，最终用户都会犯错误。

当用户遇到表单错误时，第一步是告知错误。必须清楚地识别发生错误的字段，并且必须以文本形式向用户描述错误本身。

有不同的方法来显示错误消息，例如

• 模态框，内联在错误发生的位置附近
• 在页面顶部的一个较大消息中分组的错误集合

请务必注意键盘焦点和ARIA live region 选项，以在宣布错误时使用。

尽可能为用户提供有关如何修复错误的详细建议。有两个属性可用于通知用户错误。

• 您可以使用 HTML required 属性。浏览器将根据字段验证参数提供通用错误消息。
• 或者您可以使用 aria-required 属性向 AT 共享自定义错误消息。只有 AT 会收到消息，除非您添加其他代码以使消息对所有用户可见。

一旦用户认为所有错误都已解决，请允许他们重新提交表单，并提供有关其提交结果的反馈。错误消息告诉用户他们需要进行更多更新，而成功消息则确认他们已解决所有错误并成功提交了表单。

其他成功标准

WCAG 2.2 引入了以下成功标准，这些标准侧重于更易于访问的表单体验

• 目标大小（最小）
• 一致的帮助
• 无障碍身份验证
• 冗余条目.

检查您的理解情况

测试您对无障碍表单的知识