您是否曾经尝试单击或点击某个元素（例如，按钮，链接），并且意识到只有单击该元素的特定区域，它才会响应？
发生这种情况是因为可点击区域未应用于整个元素。为了更加清楚，请参见下图。我举例说明了可点击区域应该和不应该如何。
对于本文，我将介绍很多我注意到的示例，并展示如何正确解决它们。
用户体验注意事项
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 出于说明目的，我有意将正方形放在其父级的左侧。当该正方形位于其父对象的中心时，它将增加触摸目标。达成目标！！
以下是效果演示:
本文已结束，感谢您看到最后。
最后
如果你觉得这篇文章不错，请别忘记点个赞跟关注哦~😊
