您构建的表单是针对用户的。 人们使用不同的设备。 有些设备使用鼠标、触摸设备、键盘,还有一些设备使用眼球运动。有些使用屏幕阅读器,有些使用小屏幕,有些使用文字放大软件。 每个人都想使用您的表单。了解如何让您的表单可供所有人轻松访问和使用。
确保用户了解表单字段的用途
有多种表单控件可供选择。
它们有什么共同点?
每个表单控件都必须具有关联的 <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%。 始终在不同平台(尤其是并非日常使用的设备或设置)上测试您的表单。你认识使用屏幕阅读器或文字放大软件的人吗?让他们填写您的表单。 无障碍功能评价很棒,通过真实用户进行测试会更好。
详细了解如何执行无障碍功能审核以及如何通过真实用户进行测试。