无障碍

您构建的表单是针对用户的。 用户使用不同的设备。 有些使用鼠标,有些使用触摸设备,有些使用键盘, 一种由眼球运动控制的设备。 有些需要使用屏幕阅读器,有些需要使用小屏幕,有些则使用文字放大软件。 所有人都希望使用您的表单。了解如何让所有人都能访问和使用您的表单。

您可以从多个表单控件中进行选择。 它们有何共性? 每个表单控件都必须有一个关联的 <label> 元素。 <label> 元素描述表单控件的用途。 <label> 文本在视觉上会与表单控件相关联,并由屏幕阅读器读出。

此外,点按或点击 <label> 会将焦点移至相关的表单控件, 使其成为更大的目标

使用有意义的 HTML 访问内置的浏览器功能

理论上,您可以仅使用 <div> 元素构建表单。 您甚至可以使其看起来像原生 <form>。 使用 非语义元素?

内置表单元素可提供许多内置功能。我们来看一个示例。

从直观上看,<input>(示例中的第一个网址)和 <div> 看起来一样。 您甚至可以同时为这两种语言插入文本,因为 <div> 具有 contenteditable 属性。 不过,使用适当的 <input> 元素和使用 <div> 之间存在很多区别。 看起来像 <input>

屏幕阅读器用户未将 <div> 识别为输入元素, 但无法填写表单 屏幕阅读器用户只会听到“Name”(姓名), 且不会指明该元素是用于添加文字的表单控件。

点击 <div>Name</div> 不会聚焦于它附带的 <div>,而 <label> 和 使用 forid 属性连接 <input>

提交表单后,在 <div> 中输入的数据不会包含在请求中。 虽然可以使用 JavaScript 附加数据, <input> 默认执行此操作。

内置表单元素具有其他功能。 例如,只要有适当的表单元素和正确的 inputmodetype, 屏幕键盘会显示相应的字符。对 <div> 使用 inputmode 属性 无法做到这一点

确保用户了解预期的数据格式

您可以为表单控件定义各种验证规则。 例如,假设某个表单字段应始终包含至少 8 个字符。 您将使用 minlength 属性,向浏览器指明验证规则。 如何确保用户也了解验证规则?请告诉他们。

直接在表单控件下方添加有关预期格式的信息。 为了让辅助设备能够清楚地辨认出这一点 对表单控件使用 aria-describedby 属性, 以及具有相同值的错误消息上的 id,以连接这两者。

帮助用户找到表单控件的错误消息

在上一个介绍验证的单元中 您学习了如何在数据输入无效时显示错误消息。

<label for="name">Name</label>
<input type="text" name="name" id="name" required>

例如,如果字段具有 required 属性,但输入了无效数据,浏览器会显示 表单控件旁会显示错误消息。屏幕阅读器还会读出错误消息。

您也可以定义自己的错误消息:

此示例需要做出进一步更改,才能将错误消息与表单控件相关联。

一个简单的方法是使用 aria-describedby 属性(与错误消息元素中的 id 匹配)。 然后,使用 aria-live="assertive" 显示错误消息。 当出现错误时,ARIA 实时区域会向屏幕阅读器用户指出错误。

此方法对于包含多个字段的表单存在以下问题: aria-live 通常仅在有多个错误的情况下才会公布第一个错误。 正如这篇关于同一操作有多个 aria-live 公告的文章中所述,您可以通过串联所有错误来创建单条消息。另一种方法是通告存在错误,然后在字段获得焦点时通告各个错误。

确保用户能够识别错误

有时,设计人员会将无效状态的颜色设为红色 使用 :invalid 伪类实现自定义。 不过,若要传达错误或成功情况, 但绝不应该只依赖颜色 对于红绿色盲、 绿色和红色边框看起来几乎一样。 您无法查看邮件是否与错误有关。

除了颜色之外,还可以使用图标,或将错误类型作为错误消息的前缀。

<span class="error">
  <strong>Error:</strong>Please use at least eight characters.
</span>

帮助用户浏览表单

您可以使用 CSS 更改表单控件的视觉顺序。 视觉顺序与键盘导航之间的关联(DOM 顺序) 会给屏幕阅读器和键盘用户带来问题。

详细了解如何确保 网页上的视觉顺序遵循 DOM 顺序

帮助用户识别当前聚焦的表单控件

使用键盘浏览内容 此表单。 您知道表单控件激活后,其样式发生了变化吗? 这是默认的焦点样式。 您可以使用 :focus CSS 伪类。 无论您在 :focus 中使用了什么样式, 始终确保默认状态和焦点状态之间的视觉差异清晰可辨。

详细了解 设计焦点指示器

确保您的表单可用

您可以使用不同的设备填写表单,找出很多常见问题。 只能使用键盘和屏幕阅读器(例如 Windows 或 NVDA VoiceOver), 或将网页缩放至 200%。 务必在不同平台上测试您的表单 尤其是您不日常使用的设备或设置。 你认识正在使用屏幕阅读器的人吗? 还是别人使用的文字放大软件?请他们填写您的表单。 无障碍功能审核非常好,通过真实用户进行测试甚至更好。

详细了解如何 无障碍功能审核 以及如何通过真实用户进行测试

资源