您构建的表单是供人们使用的。人们使用不同的设备。有些人使用鼠标，有些人使用触摸设备，有些人使用键盘，有些人使用眼睛运动控制的设备。有些人使用屏幕阅读器，有些人使用小屏幕，有些人使用文本放大软件。每个人都想使用您的表单。了解如何使您的表单对每个人都具有可访问性和可用性。
确保用户了解表单字段的用途
您可以选择许多表单控件。它们都有什么共同点？每个表单控件都必须具有关联的 <label> 元素。<label> 元素描述了表单控件的用途。<label> 文本在视觉上与表单控件关联，并由屏幕阅读器读出。
此外，点击或单击 <label> 会聚焦关联的表单控件，使其成为更大的目标。
使用有意义的 HTML 来访问内置浏览器功能
从理论上讲，您可以使用仅 <div> 元素构建表单。您甚至可以使其看起来像原生的 <form>。使用非语义元素有什么问题？
内置表单元素提供了许多内置功能。让我们看一个例子。
在视觉上，<input>（示例中的第一个）和 <div> 看起来相同。您甚至可以为两者插入文本，因为 <div> 具有 contenteditable 属性。但是，使用适当的 <input> 元素和看起来像 <input> 的 <div> 之间存在许多差异。
屏幕阅读器用户无法将 <div> 识别为输入元素，并且无法完成表单。屏幕阅读器用户听到的只是“姓名”，没有指示该元素是用于添加文本的表单控件。
单击 <div>姓名</div> 不会聚焦与其关联的 <div>，而 <label> 和 <input> 通过使用 for 和 id 属性连接。
提交表单后，在 <div> 中输入的数据不包含在请求中。虽然可以使用 JavaScript 附加数据，但 <input> 默认情况下会执行此操作。
内置表单元素具有其他功能。例如，使用适当的表单元素和正确的 inputmode 或 type，屏幕键盘会显示相应的字符。在 <div> 上使用 inputmode 属性无法做到这一点。
确保用户知道预期的数据格式
您可以为表单控件定义各种验证规则。例如，假设表单字段应始终至少包含八个字符。您可以使用 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 或 Mac 上的 VoiceOver）或将页面缩放到 200%。始终在不同的平台上测试您的表单，尤其是在您不常使用的设备或设置上进行测试。您认识使用屏幕阅读器的人，或者使用文本放大软件的人吗？请他们填写您的表单。无障碍功能审查很棒，与真实用户进行测试更好。
了解更多关于进行无障碍功能审查以及如何与真实用户进行测试的信息。