表单

表单是允许用户向字段或组提供数据的元素 字段。表单可以简单到单个字段,也可以复杂到 每页有多个字段的多步骤表单元素、输入验证和 有时需要人机识别系统。

表单被认为是直接从 无障碍视角,因为这需要了解我们 以及仅适用于表单的其他规则。部分人 您可以制定一个适合您和 用户。

“表单”是本课程中的最后一个组件专用单元。本单元将介绍 您学到的所有其他指南 详细介绍,例如 内容结构 键盘焦点色彩对比度,也适用于表单 元素。

字段

表单的核心是字段。字段是一些较小的互动模式,例如 一个输入或单选按钮元素,让用户能够输入内容或 选择。我们提供了大量表单字段供您选择 。

默认建议使用已建立的 HTML 格式,而不是 构建自定义的 ARIA, 功能(如字段状态、属性和值)本身就是 ,同时您必须手动添加自定义 ARIA。

ARIA

<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>

此外,相关的表单字段(例如邮寄地址)必须 按程序化方式分组,而且直观地分组显示。一种方法是使用字段集/图例 对相似的元素进行分组。

广告内容描述

字段说明与标签的用途类似, 为相应字段和要求提供更多背景信息。字段说明不 如果标签或表单说明是描述性的,则需要提供无障碍信息 就足够了

不过,在某些情况下,添加其他信息十分有用。 以避免格式错误,例如中继有关默认 密码字段的输入内容,或告知用户要使用的日历格式(例如 格式为 MM-DD-YYYY)。

您可以使用许多不同的方法向 表单。其中一种最佳方法是添加 Aria-describedby 属性添加到表单元素中。<label>屏幕 阅读器会同时阅读说明和标签。

如果您将 aria-labelledby 属性,则该属性值会替换 <label>。与往常一样,请务必使用您创建的所有 AT 测试最终代码 计划提供支持服务

错误

在创建无障碍表单时,您可以采取许多措施来 生成表单错误。在本单元前面的部分中,我们介绍了 字段、创建标识标签以及添加详细的说明, 但无论您认为自己的表单有多清晰,最终都会成为 都会出错。

当用户遇到表单错误时,第一步是 确认错误。 必须明确指出发生错误的字段, 必须以文本形式向用户说明。

有多种方法可以显示错误 消息,例如:

  • 内嵌于错误位置附近的弹出式窗口模态
  • 错误集合,汇总到页面顶部一条较长的消息中

请务必注意键盘焦点ARIA 实时区域选项

请尽可能向用户提供关于如何解决 错误。有两种属性可用于通知用户存在错误。

  • 您可以使用 HTML 必需属性。浏览器将根据字段验证参数提供一般错误消息。
  • 或者,您也可以使用 aria-required 属性向 AT 分享自定义错误消息。只有 AT 会收到消息,除非您添加其他代码以使消息向所有用户显示。

一旦用户认为所有错误都已解决,允许他们重新提交 表单,并提供有关提交结果的反馈。出错了 消息会告诉用户还有更多更新要完成,而成功消息 确认他们已解决所有错误并成功提交表单。

检查您的理解情况

测试您对无障碍表单相关知识的掌握情况

以下哪个答案是最容易获取的表单输入功能?

Email address: <input type="email" required>
没有与“电子邮件地址”相关联的标签输出。
<label>Email address: <input type="email" required></label>
缺少 autocomplete 属性,用于向用户代理和辅助技术 (AT) 提供用途定义或识别目的。
<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>
如果字段填写不当,则 aria-describedby 属性可为用户可能收到的错误添加额外的上下文。虽然此属性不是必需的,但对 AT 用户可能很有用。