您可以通过多种方式填写表单。人们可能在拥挤的公交车上用智能手机、使用屏幕阅读器或从旧笔记本电脑上使用您的表单。让我们看看如何确保您的表单在不同的设备和不同的上下文中都能正常工作。
确保您的表单适用于键盘用户
确保您的表单可访问性的一个好的首要测试是仅使用键盘填写您的表单。打开您的表单，尝试使用 tab 键导航。当前活动的表单字段是否清晰？为了帮助用户了解哪个表单字段处于活动状态，您可以使用焦点指示器。
试用一下。使用您的 tab 键导航到输入框。当输入框处于活动状态时，您是否看到轮廓？这就是焦点指示器。您可以使用 :focus CSS 伪类添加焦点指示器。
input:focus {
outline: 4px solid #222;
}
了解更多关于设计可访问的焦点指示器的信息。
帮助用户导航您的表单
另一个测试可用性和可访问性的好方法是确保逻辑 Tab 顺序与视觉 Tab 顺序一致。如何测试 Tab 顺序？完全 Tab 遍历您的表单。您是否注意到任何不合逻辑的导航跳转？确保 DOM 顺序与视觉顺序匹配。
了解更多关于如何确保页面上的视觉顺序遵循 DOM 顺序的信息。
帮助用户在触摸设备上完成您的表单
太棒了！您已确保您的表单适用于键盘。现在，让我们看看如何确保它也适用于触摸设备，例如手机。
在您的触摸设备上打开您的表单，填写所有字段并提交表单。您是否需要多次点击才能选择表单控件？问题可能是点击区域太小。确保按钮的点击目标大小至少为 48px，并且每个 <input> 和 <select> 都足够大以便点击。您还可以通过在表单控件之间添加足够的间距来帮助用户在触摸设备上导航您的表单。
确保用户获得优化的键盘
在之前的模块中，您学习了如何使用 type 或 inputmode 属性激活不同的屏幕键盘。
在您的手机上打开 演示，然后点击电话号码字段。请注意，默认情况下，屏幕键盘上会显示数字，以及您可能需要的其他电话号码字符。使用 type="tel" 获取针对输入电话号码优化的屏幕键盘。
使用手机亲自试用一下，看看您是否可以轻松输入填写电话号码所需的每个字符。如果您好奇屏幕键盘如何为另一种 type 工作，请在 演示中尝试 type="email"。
确保表单按钮不被隐藏
假设您填写了一个长表单，并且您已准备好提交它。但是“提交”按钮在哪里？它可能位于屏幕底部的浏览器工具栏后面。确保按钮可见的一种方法是使用 env() CSS 函数。了解如何确保按钮不被设备用户界面遮挡。
确保您的表单在不同的平台上都能正常工作
尝试在尽可能多的设备上测试您的表单。有旧笔记本电脑吗？在其上打开默认浏览器并测试您的表单。您的朋友有平板电脑吗？借用它并在那里测试您的表单。
某些样式在一个浏览器中看起来是否不同？您可以在后面的模块中学习如何确保您的样式在跨平台工作中正常工作。
BrowserStack 为开源项目提供免费测试帐户，Browserling 提供免费试用，以便在不同的浏览器、设备和操作系统上进行测试。
帮助用户在不同的上下文中完成您的表单
人们不仅使用不同的浏览器、设备和操作系统。人们还在不同的上下文中使用您的表单。试用一下！现在外面阳光明媚吗？拿起您的手机走到外面。在强光下使用您的表单是测试对比度是否可用的好方法。
了解更多关于颜色和对比度无障碍功能的信息。
确保您的表单在网络连接不佳的情况下也能正常工作
假设您乘坐火车去某个地方。您在手机上打开一个网页。您想知道为什么加载网站会花费这么长时间 😕。
您可以使用 WebPageTest 或 DevTools 模拟慢速连接和不同的网络类型。
了解更多关于在低带宽和高延迟下进行测试的信息。
帮助用户在移动中使用您的表单
假设您正在步行前往约会地点。突然，您的手机响了，您接听了电话，同时，收到来自您的保险公司的警报，要求您完成您开始填写的申请表。您打开表单，尝试在走路和说话的同时填写它。
请记住，人们会在许多不同的上下文中使用您的表单。在压力大的情况下、在做其他事情时、在移动中。您可以通过确保您的表单易于使用来帮助用户。
尝试为自己设置完成表单的时间限制。尝试模拟不完善的条件，您可以在其中测试您的表单。
确保分享测试结果
记录所有测试，并与您的团队分享结果。这将有助于确定行动项的优先级，以确保您的团队中的每个人都了解最重要的任务。
了解更多关于分享测试结果的信息。
检查您的理解程度
测试您对跨平台测试的知识
您可以仅为键盘用户显示焦点指示器吗？
:focus-visible。:focus-detected。:focus-shown。资源
- WebPageTest：网站性能和优化测试
- 在低带宽和高延迟下进行测试
- 分享测试结果