表单是允许用户向字段或组提供数据的元素 字段。表单可以简单到单个字段,也可以复杂到 每页有多个字段的多步骤表单元素、输入验证和 有时需要人机识别系统。
表单被认为是直接从 无障碍视角,因为这需要了解我们 以及仅适用于表单的其他规则。部分人 您可以制定一个适合您和 用户。
“表单”是本课程中的最后一个组件专用单元。本单元将介绍 您学到的所有其他指南 详细介绍,例如 内容结构 键盘焦点和 色彩对比度,也适用于表单 元素。
字段
表单的核心是字段。字段是一些较小的互动模式,例如 一个输入或单选按钮元素,让用户能够输入内容或 选择。我们提供了大量表单字段供您选择 。
默认建议使用已建立的 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>
<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>