跨设备和平台测试表单

您可以通过多种方式填写表单。 人们可能会在拥挤的公交车中通过智能手机使用表单, 屏幕阅读器、旧笔记本电脑。 让我们来看看如何确保表单在不同的设备和不同的环境中有效。

为确保表单可访问,最好先只使用键盘填写表单。 打开表单并尝试使用 tab 键进行导航。 您是否清楚当前处于活动状态的表单字段? 为了帮助用户了解哪个表单字段处于活动状态, 可以使用焦点指示标志

试试看。 使用 tab 键转到输入源。 当输入处于活跃状态时,您能看到外框吗? 那是焦点指示标志。 您可以使用 :focus CSS 伪类。

input:focus {
 
outline: 4px solid #222;
}

详细了解 设计易于使用的焦点指示器

帮助用户浏览您的表单

对于易用性和可访问性,另一个很好的测试是确保逻辑标签页顺序与可视化标签页顺序一致。 如何测试 Tab 键顺序? 按 Tab 键可完全按 Tab 键在表单中导航。 您是否发现了任何不符合逻辑的导航跳跃? 请确保 DOM 顺序与视觉顺序一致。

详细了解如何 确保页面上的视觉顺序遵循 DOM 顺序

帮助用户在触摸设备上填写表单

太棒了!您已确保表单支持该键盘。 现在,让我们来看看如何确保它也可用于手机等触摸设备。

在触摸设备上打开表单, 填写所有字段并提交表单。 您是否必须多次点按才能选择表单控件? 问题可能是点按区域太小。 确保 按钮的点按目标尺寸至少为 48 像素, 并且每个 <input><select> 都足够大,便于点按。 您还可以通过在表单控件之间添加足够的间距,帮助用户在触摸设备上浏览表单。

确保用户获得经过优化的键盘

在之前的单元中,您学习了如何激活不同的屏幕键盘 使用 typeinputmode 属性。

未解决 演示 ,然后点按电话号码字段。 请注意,数字键盘默认显示在屏幕键盘上, 以及电话号码可能需要的其他字符。 使用 type="tel" 获取针对输入电话号码进行了优化的屏幕键盘。

包含 type=&#39;tel&#39; 的 input 元素的两个屏幕截图显示了类型属性如何更改屏幕键盘。

使用手机亲自试用一下。 看看是否能轻松输入填写电话号码所需的每个字符。 如果您想知道屏幕键盘在另一个 type 上是如何运作的,不妨观看演示中的 type="email"

确保表单按钮未隐藏

假设您填写了一份很长的表单, 然后就可以提交表单了但是,提交按钮在哪里? 该图标可能位于浏览器工具栏之后,位于屏幕底部。 确保按钮可见的一种方法是使用 env() CSS 函数。 了解如何 确保按钮不会被设备界面遮挡

确保您的表单适用于不同的平台

尝试在尽可能多的设备上测试您的表单。 有一台旧笔记本电脑?在该浏览器上打开默认浏览器,然后测试您的表单。 您的朋友有平板电脑?也可以借用并测试您的表单。

某些样式在不同浏览器中的外观是否有所不同? 您可以了解如何确保 样式适用于跨平台在后续的模块中。

BrowserStack 为开源项目提供免费测试账号, 而 Browserling 则提供免费试用版,供用户在不同的浏览器、 和操作系统

帮助用户在不同的上下文中填写表单

用户不仅会使用不同的浏览器、设备和操作系统, 用户还会在不同环境中使用您的表单。 快来试试吧!现在外面有阳光吗?带上手机去户外。 在明亮的光线下使用表单是测试对比度是否可用的好方法。

详细了解 颜色和对比度

确保您的表单在网络连接状况不佳时也能正常运行

假设您乘坐火车前往某个地方。 您在手机上打开一个网页。 你想知道加载网站会花这么长时间吗 电话。

您可以使用 WebPageTestDevTools

详细了解 在低带宽和高延迟的情况下进行测试

帮助用户随时随地使用您的表单

假设您正在前往一个预约点。 突然,您的手机就会响铃,您接听来电,但同时 收到保险公司的提醒,要求填写你提交的申请表。 您打开表单时,一边走着和说话,一边尝试填写表单。

请注意,人们会在许多不同的环境中使用您的表单。 在紧张的环境中,随时随地做其他事情。 您可以通过确保表单易于使用来为用户提供帮助。

尝试为自己设置填写表单的时间限制。 尝试模拟不完美的条件,以便测试您的表单。

确保分享测试结果

记录所有测试,并与团队分享结果。 这有助于确定待办项的优先级 以确保团队中的每个人都了解最重要的任务。

详细了解 分享测试结果

检查您的理解情况

检验您对跨平台测试知识的掌握情况

能否仅向键盘用户显示焦点指示器?

是,使用 :focus-detected
是,使用 :focus-visible
是,使用 :focus-shown

资源