使用图像代替复选框导致的 Google Search Console“可点击元素太靠近”问题答案

【问题标题】：Google Search Console "Clickable elements too close together" issue caused by using images in place of checkboxes使用图像代替复选框导致的 Google Search Console“可点击元素太靠近”问题
【发布时间】：2020-11-02 17:32:27
【问题描述】：

我使用图像代替复选框，并且因为我需要隐藏 input["checkbox"] 元素，Google Search Console 将其标记为不适合移动设备，并说“可点击元素 [are] 太靠近了” .

这是一个显示代码如何工作的示例：

<style>
    input[type=checkbox] {
        display: none;
    }
    img{
        border: 5px solid transparent;
    }
    input[type=checkbox]:checked+img {
        border-color: #000;
    }
</style>
<label>
    <input type="checkbox">
    <img src="https://picsum.photos/200">
</label>

它在 codepen 中：

https://codepen.io/evan-appleby/pen/xxOjBag

当我取消隐藏复选框时，Google 会删除问题，但如果我随后使用图像上的负边距覆盖复选框，则不会。我可以做些什么来解决这个问题，而无需完全删除图像？

【问题讨论】：

标签： html css mobile google-search-console

【解决方案1】：

问题的前提不正确。 Google 不会将网站标记为“可点击元素靠得太近”以使用图像代替复选框。您可以通过转到Google's Mobility-Friendly Test site 并提交上面的代码块来确认。

【讨论】：