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