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

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

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

用户体验注意事项

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 出于说明目的，我有意将正方形放在其父级的左侧。当该正方形位于其父对象的中心时，它将增加触摸目标。达成目标！！

以下是效果演示:

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

原文地址：https://ishadeed.com/article/clickable-area/

最后

如果你觉得这篇文章不错，请别忘记点个赞跟关注哦~😊