如何修复“可点击元素太接近”错误(3 种方法)

如何修复“可点击元素太接近”错误(3 种方法)

如何修复“可点击元素太接近”错误(3 种方法)

未解决的移动可用性问题可能会对你的网站流量产生重大影响。一个共同的问题谷歌搜索控制台可能会警告你 "可点击元素太接近在一起" 错误,这可能意味着你的网站对于移动用户来说很复杂。

超过43.2 亿人从他们的移动设备访问互联网。因此,尽快解决此可点击元素错误至关重要。值得庆幸的是,你可以通过多种方式做到这一点,使你的网站更加移动友好。

在本文中,我们将解释什么是 "可点击元素太接近" 的问题,讨论它发生的原因,并引导你通过三种方法,你可以用它来修复它。我们还将解释什么是 "内容大于屏幕" 错误,以及如何解决它。

什么是"可点击元素太接近在一起" 错误

简而言之,移动可用性错误可以使你的 WordPress 网站无法访问对移动用户来说,导航更具挑战性。你可以使用谷歌搜索控制台的移动可用性报告以测试你的网站。

你可能会遇到六种主要类型的移动可用性问题,即:

  1. 使用不兼容的插件
  2. 未设置视图端口
  3. 视图端口未设置为 "设备宽度"
  4. 文本太小,无法阅读
  5. 内容大于屏幕
  6. 可点击元素太接近在一起

作为本报告的一部分,Google 搜索控制台将检查你网站的所有可点击元素,如按钮和链接。其目的是验证移动用户是否可以仅使用触摸(而非使用键盘或鼠标)轻松与网站元素进行交互。

如果 Google 搜索控制台确定你的可调用元素对移动用户构成挑战,则摘要报告中将包含 "可点击元素过于接近" 错误。

如果你点击该错误,它将带你到详细信息和状态页面。在此屏幕上,你可以了解有关此问题的更多内容,包括受影响的页面。

从本质上讲,可单击元件错误是一个警告,表明 WordPress 网站上的可访问元素太小,移动用户无法舒适地与之交互。

或者,这可能意味着它们足够大,但定位太接近邻近元素。如果按钮、链接和其他可单击项目聚集在一起太近,则用户可能会尝试点击错误的按钮,从而损害用户体验 (UX)。

虽然将可点击元素过于紧密地结合在一起被归类为移动可用性错误,但解决这个问题也可以提高网站的可访问性. 例如,有灵巧问题的人可能会欣赏交互式元素之间的一些额外空间。相比之下,有视觉相关问题的用户可能会发现与大而明确定义的按钮和链接交互更容易。

为什么 "可点击元素太接近" 错误可能会出现

各种因素可能导致 "可点击元素过于接近" 问题。有时,这仅仅是因为 Google 在渲染过程中无法请求必要的资源。如果是这样的话,那么你可以尝试使用移动友好型测试看看它是否通过。如果是这样,你也许可以忽略它。

此问题也可能由你的网站的设计. 例如,如果你尝试将太多交互式元素挤到单个网页上,则可能会看到此移动可用性错误。

可点击元件错误的另一个原因是移动响应能力你的网站的设计。你的网站应灵活且自动适应,以适应访问者的具体设备,以提供最好的 UX。但是,如果你的网站没有响应,则可能导致可用性问题。

更具体地说,如果你的网站没有响应,其部分可能会在特定屏幕上出现拉伸、缩小或扭曲。在屏幕较小的设备上,可移动元件可能会显得狭窄或失真。

确定此错误发生的一些标准和潜在原因可以帮助你更好地了解你的网站为什么遇到移动可用性问题。它还可以帮助你确定如何解决问题。

如何修复 "可点击元素太接近" 错误(3 种方法)

如果移动用户难以浏览你的网站,是什么阻止他们远离它?防止此问题对于尽快解决所有移动可用性问题至关重要。让我们来看看三种方法,你可以用来修复"可点击元素太接近在一起"的错误,并提供一个更好的UX给你的移动用户。

1. 使用可视化 CSS 样式编辑器

Visual CSS Style Editor 是一个前端样式插件,使你能够在没有任何编码的情况下编辑网站的 CSS 和主题文件。

此插件方便修改可应用目标的大小,例如使按钮变大。你还可以通过更改可点击元素之间的边距和间距在可点击元素之间创建更多空间。

首先安装并激活它在你的WordPress网站通过浏览到插件 > 添加新,搜索插件,然后单击 " 立即安装 > 激活 "。

安装好该插件后,转到”自定义“,点击”让我们开始吧!“按钮。可视自定义界面将加载并提示你选择触发移动可用性错误的页面。

选择自定义类型

你可以将更改应用到此特定页面或整个网站。如果许多页面显示可点击元素错误,你可能需要选择 Global。

进行选择,然后单击 "继续"。现在,你可以通过你的网页工作,选择每个可翻页的元素。将显示该元素的编辑选项面板。

大小位置设置还有助于解决"可点击元素太接近"错误。虽然没有必要,但如果你想直接编辑 CSS 代码,则可以通过左面板进行编辑。

然后,你可以转到导致移动可用性问题的下一个元素,并重复此过程。当你对更改感到满意时,请单击绿色 "保存" 按钮。

2. 确保所有可应用目标至少为 48px

不可能创建一个单一的静态设计,该设计看起来不错,在所有设备上都运行正常。相反,如果你的目标是通过使用设备独立像素 (dpi) 定义所有可扩展目标来创建灵活的布局,则最好这样做。使用 dpi 定义的元素可以根据用户的屏幕大小自动缩放到大小。

在移动设备上,建议的触摸目标最小为48×48 像素. 它相当于约 9 毫米,这足以为一般人的手指垫。

因此,如果你正在努力找出问题的根源,则可能有助于查找每个元素的 dpi。如果它低于推荐的触摸目标(如 24px),你可以增加填充,使其达到 48px。

要检查 WordPress 网站上一个可点击元素的 dpi 值,请在 Chrome 浏览器选项卡中打开它,然后导航到显示"可点击元素太接近"错误的页面。右键单击页面并选择 " 检查 "。

单击 " 检查 "将打开 Google Chrome 开发视图。沿着顶部,单击显示移动设备的图标,这将带你到切换设备工具栏屏幕。

在左侧预览面板中,你将看到网站的移动设备模拟。如果你悬停在上面并单击任何可应用的元素,则可以向右查看计算值:

如果需要,你可以直接调整元素的大小编辑你的 CSS和网站文件或使用插件。

3. 检查输入方法

如果你正在尝试修复 "可点击元素太接近" 错误,它可能会有所帮助检查输入方法. 它是指用户用于查看和与你的网站交互的方法或设备。更具体地说,你可以看到他们是否在使用智能手机、平板电脑或其他设备。

例如,触摸被认为是一种不精确的输入方法。正如我们刚刚讨论的,使用 CSS 来增加触摸目标的大小或添加额外的填充物可以使使用触摸设备与你的网站交互的访客更容易使用可调用的目标。

但是,确定用户的设备并不是一门精确的科学。此技术使用所谓的 "指点" 来检查用户的主要输入方法,该方法可以具有两个值之一:

  • 粗糙:设备的主要输入方法是触摸。
  • 精细:输入法是鼠标和触控板。

请注意,如果触摸是用户的主要输入方法,则这表明用户正在智能手机或平板电脑上查看你的网站。

但是,触摸屏的存在并不能保证有人在使用移动设备。他们可能正在使用支持触摸屏的大型笔记本电脑访问你的网站,或者他们可能已将蓝牙设备连接到智能手机。

如果指头返回粗值,则可以使用 CSS 调整可调用目标的大小。为此,你可以将以下文件放在你的 CSS 文件中:

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

调整好样式后,将页面重新提交给 Google 即可。

在大多数情况下,你的网站图将立即通过。然而,谷歌可能需要一些时间来爬行所有的网址在你的站点图中,取决于站点大小、流量和活动等因素。也不能保证谷歌会爬行你的网站图中的每一个 URL。