你或许须要扩充可点击区域的范围⛅

您是否曾经尝试单击或点击某个元素（例如，按钮，连接），而且意识到只有单击该元素的特定区域，它才会响应？

发生这种状况是由于可点击区域未应用于整个元素。为了更加清楚，请参见下图。我举例说明了可点击区域应该和不该该如何。

对于本文，我将介绍不少我注意到的示例，并展现如何正确解决它们。

用户体验注意事项

WCAG准则

根据WCAG 2.1，触摸或鼠标的最小目标尺寸应为 44×44 像素。大小不是固定的，可能会根据使用状况而改变。可是，44×44 像素是一个很好的起点。

菲茨定律

UX设计中要遵循的重要定律。简而言之，触摸或点击目标越大，越接近，则须要用户与其进行交互的时间越短。

在下图中，我为主按钮模拟了两种不一样的状况。在左侧，按钮更小，更远，这须要用户花费更多时间与之交互。在右侧，按钮的大小更大且更接近其同级输入元素，这将使其更容易，更快地进行交互。

让咱们来看一些实际的例子，并牢记 WCAG 2.5.5 目标大小和 Fitts 定律。

按钮

button 在须要时使用实际值很是重要。下面的示例来自我使用的在线银行系统：

<div class="navig next" onclick="validateLogin()">Next</div>
复制代码

这是上述按钮的 HTML 的 GIF 图片。我将鼠标悬停在按钮上，而且光标仍然是指针，这很好。可是，我也能够选择文本，而且在悬停时还有一个文本光标！若是使用正确的元素，则不会发生这种状况。

使用 HTML的button 元素时，您将免费得到如下内容：

• 可经过鼠标，键盘或触摸访问
• 能够经过键盘选择（表单元素均可以）
• Javascript 事件（聚焦，失去焦点）、CSS 表单伪类

一旦使用了正确的元素，出于两个缘由，您须要添加足够的填充：

• 让按钮看起来能够点击（cursor: pointer）！
• 使其变大，这样很容易被注意到（菲茨定律）。

连接

我过去曾犯过这个错误。当有导航菜单时，应为 a 元素而不是 li 元素提供填充。

<nav>
  <ul>
    <li class="nav-item"><a href="#">Home</a></li>
    <li class="nav-item"><nav href="#">Products</nav></li>
    <li class="nav-item"><a href="#">Store</a></li>
    <li class="nav-item"><a href="#">Team</a></li>
  </ul>
</nav>

.nav-item {
  padding: 12px 16px;
}
复制代码

根据上述 HTML 和 CSS，可点击区域将仅为文本。检查下图：

正确的方法是在连接自己上添加填充。请注意，顶部和底部填充默认为行内元素，所以默认状况下不起做用。不管是哪一种状况，它均可以是 block 或 inline-element 或 flex。

.nav-item a {
  display: block;
  padding: 12px 16px;
}
复制代码

结果，整个连接如今是可单击/可点击的。这是显示差别的图：

汉堡菜单

仍是烤肉串？随便你怎么说 重要的是增长它们的可点击区域，由于它们大多数将用在触摸设备上。

假设可点击区域以下：

这不是很好，而且将很难使鼠标或手指指向屏幕上如此小的目标。在下图中，它更大而且更易于交互。

如下是效果演示:

复选框和单选按钮

当存在复选框或单选按钮元素时，我但愿能够单击它或关联的标签来激活/禁用它。

在下图中，可单击区域仅与复选框或单选元素绑定。换句话说，您不能单击标签来激活/禁用它。

从用户体验的角度来看，这是没法访问的而且是很差的。在 HTML 中，您可使用 for 属性将标签与输入绑定。

<input type="checkbox" id="option1">
<label for="option1">Option 1</label>
复制代码

或者您能够将输入内容放置在标签内：

<label for="option1">
  Option 1
  <input type="checkbox" id="option1">
</label>
复制代码

而后，您将须要在 label 元素上添加填充，以使可点击区域变大。这样，问题得以解决，整个复选框或单选按钮都是可单击的，以下图所示：

侧边栏

对于带有类别的页面，有时我会注意到列表连接没有扩展到其父级的整个宽度。也就是说，可点击区域仅在文本上。

下图显示：

解决方法是：

从 li 元素上删除填充，而是将其移动到 a 元素上（在连接点中进行了讨论）。 经过添加使连接采用其父级的完整宽度 display: block。

.nav-item a {
  /*Other styles*/
  padding: 12px 16px;
  display: block;
}
复制代码

很好奇，看看上面添加了少许 CSS 后的外观如何？

现实生活中的例子

在最近的 Twitter 更新中，导航设计在可点击区域大小方面存在问题。最初，它仅与文本相关，以下面的屏幕截图所示，但他们在收到反馈后将其修复。

箭头

在某些状况下，须要在节标题的远端添加“查看更多”按钮或箭头。在下面的示例中，我将箭头放置在假圆中，以即可以正确地使箭头居中。

一般，箭头的间距能够在 CSS 中使用填充或宽度和高度来完成。不管哪一种状况，您均可以使用。

使用伪元素增长可点击区域

仅经过更改元素的宽度和高度或使用填充，并不必定老是能够增大可点击区域。好吧，伪元素能够解救！

这个怎么运做？

这个想法是，伪元素属于其父元素，所以当咱们建立具备特定宽度和高度的伪元素时，它将充当其父元素的单击/触摸/悬停区域。

在下图中，我向 :after 菜单按钮添加了一个伪元素。这是使用的 CSS：

.menu-2:after {
  content: "";
  position: absolute;
  left: 55px;
  top: 0;
  width: 50px;
  height: 50px;
  background: #e83474;
  /*Other styles*/
}
复制代码

请注意，55px 出于说明目的，我有意将正方形放在其父级的左侧。当该正方形位于其父对象的中心时，它将增长触摸目标。达成目标！！

如下是效果演示:

本文已结束，感谢您看到最后。

原文地址：ishadeed.com/article/cli…

最后

若是你以为这篇文章不错，请别忘记点个赞跟关注哦~😊

交流

微信公众号「前端宇宙情报局」，将不定时更新最新、实用的前端技巧/技术性文章，对了偶尔还会有互联网中的趣事趣闻🍻

关注公众号，回复"1"获取群聊二维码，一块儿学习、一块儿交流、一块儿摸鱼🌊