您构建的表单是针对用户的。 用户使用不同的设备。 有些使用鼠标，有些使用触摸设备，有些使用键盘， 一种由眼球运动控制的设备。 有些需要使用屏幕阅读器，有些需要使用小屏幕，有些则使用文字放大软件。 所有人都希望使用您的表单。了解如何让所有人都能访问和使用您的表单。
确保用户了解表单字段的用途
您可以从多个表单控件中进行选择。
它们有何共性？
每个表单控件都必须有一个关联的 <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%。 务必在不同平台上测试您的表单 尤其是您不日常使用的设备或设置。 你认识正在使用屏幕阅读器的人吗？ 还是别人使用的文字放大软件？请他们填写您的表单。 无障碍功能审核非常好，通过真实用户进行测试甚至更好。
详细了解如何 无障碍功能审核 以及如何通过真实用户进行测试。