无障碍

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

确保用户了解表单字段的用途

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

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

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

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

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

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

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

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

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

内置表单元素具有其他功能。 例如，只要有适当的表单元素和正确的 inputmode 或 type， 屏幕键盘会显示相应的字符。对 <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%。 务必在不同平台上测试您的表单 尤其是您不日常使用的设备或设置。 你认识正在使用屏幕阅读器的人吗？ 还是别人使用的文字放大软件？请他们填写您的表单。 无障碍功能审核非常好，通过真实用户进行测试甚至更好。

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

资源