无障碍点按目标

Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney
Patrick H. Lauke

当您的设计在移动设备上显示时 您应确保按钮或链接等互动元素足够大, 并在周围留有足够空间 使其易于点按,而不会意外重叠到其他元素上。 这能让所有用户受益 但对有运动障碍的人来说尤其有用。

建议的最小触摸目标大小约为 48 个设备无关像素 在正确设置移动视口的网站上投放 例如,虽然一个图标的宽度和高度可能只有 24 像素, 可以使用额外的内边距将点按目标的尺寸调整为最大 48px 48x48 像素的面积约为 9 毫米 大约相当于用户手指垫面积的大小。

在该演示中,我为所有链接添加了内边距,以确保它们满足最小尺寸。

各个触摸目标之间也应间隔大约 8 像素 包括水平和垂直方向 这样,用户的手指按下一个点按目标就不会意外碰到另一个点按目标。

测试触摸目标

如果您的目标是文本,并且使用了相对值(例如 emrem)来设置文本和所有内边距, 您可以使用开发者工具检查该区域的计算值是否足够大。 在以下示例中,我对文本和内边距使用了 em

检查链接的 a, 在 Chrome 开发者工具中,切换到 Computed 窗格,以便检查该框的各个部分 看看它们可解析为哪种像素大小 在 Firefox 开发者工具中,有一个布局面板。 在该面板中,您将获得所检查元素的实际尺寸。

Firefox 开发者工具中的布局面板,显示元素的大小

使用媒体查询检测触摸屏使用情况

不要简单地测试视口尺寸 小尺寸的屏幕很有可能是手机或平板电脑,而这反过来 使用触摸屏,现在还有其他更稳健的适应性方式 根据实际设备功能进行设计。

我们现在可以使用媒体查询测试一项媒体功能 设置用户的主要输入源是否为触摸屏 (pointer); 当前检测到的输入是否任何是触摸屏 (any-pointer)。 pointerany-pointer 功能将返回 finecoarse。 精确指针指使用鼠标或触控板的用户 (即使该鼠标已通过蓝牙连接到手机)。 coarse 指针表示触摸屏, 该平台可以是移动设备,也可以是笔记本电脑屏幕或大屏平板电脑。

如果您要调整媒体查询中的 CSS 以增加触摸目标, 粗略指针测试可让您提高所有触摸屏用户的点按目标。 这样一来,无论设备是手机还是尺寸更大的设备,点按区域都会越大。

.container a {
  padding: .2em;
}

@media (any-pointer: coarse) {
  .container a {
    padding: .8em;
  }
}

您可以详细了解指针等互动媒体功能 自适应设计基础知识一文。