您构建的表单是针对用户的。 人们使用不同的设备。 有些设备使用鼠标、触摸设备、键盘，还有一些设备使用眼球运动。有些使用屏幕阅读器，有些使用小屏幕，有些使用文字放大软件。 每个人都想使用您的表单。了解如何让您的表单可供所有人轻松访问和使用。
确保用户了解表单字段的用途
有多种表单控件可供选择。
它们有什么共同点？
每个表单控件都必须具有关联的 <label> 元素。<label> 元素描述了表单控件的用途。<label> 文本在视觉上与表单控件相关联，并由屏幕阅读器读出。
此外，点按或点击 <label> 可聚焦关联的表单控件，使其成为较大的目标。
使用有意义的 HTML 访问内置浏览器功能
理论上，您只使用 <div> 元素即可构建表单。您甚至可以使其看起来像原生 <form>。使用非语义元素会有什么问题？
内置表单元素提供很多内置功能。下面我们来看一个示例。
从视觉上看，<input>（示例中的第一个）和 <div> 看起来一样。您甚至可以为这两者插入文本，因为 <div> 具有 contenteditable 属性。但使用适当的 <input> 元素与使用像 <input> 这样的 <div> 之间有很多区别。
屏幕阅读器用户无法将 <div> 识别为输入元素，因此无法填写表单。屏幕阅读器用户听到的所有结果都是“名称”，但没有表明相应元素是用于添加文本的表单控件。
点击 <div>Name</div> 不会聚焦于与之相关的 <div>，而 <label> 和 <input> 使用 for 和 id 属性连接。
提交表单后，在 <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 或 Mac 上的 VoiceOver），或者将页面缩放至 200%。 始终在不同平台（尤其是并非日常使用的设备或设置）上测试您的表单。你认识使用屏幕阅读器或文字放大软件的人吗？让他们填写您的表单。 无障碍功能评价很棒，通过真实用户进行测试会更好。
详细了解如何执行无障碍功能审核以及如何通过真实用户进行测试。