阅读 1095

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

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

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

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

用户体验注意事项

WCAG准则

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

菲茨定律

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

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

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

按钮

button 在需要时使用实际值非常重要。下面的示例来自我使用的在线银行系统:

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

这是上述按钮的 HTMLGIF 图片。我将鼠标悬停在按钮上,并且光标仍然是指针,这很好。但是,我也可以选择文本,并且在悬停时还有一个文本光标!如果使用正确的元素,则不会发生这种情况。

使用 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;
}
复制代码

根据上述 HTMLCSS,可点击区域将仅为文本。检查下图:

正确的方法是在链接本身上添加填充。请注意,顶部和底部填充默认为行内元素,因此默认情况下不起作用。无论是哪种情况,它都可以是 blockinline-elementflex

.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"获取群聊二维码,一起学习、一起交流、一起摸鱼🌊

关注下面的标签,发现更多相似文章
评论