Google Search Console "Clickable elements too close together" 使用图片代替复选框导致的问题

Question

我正在使用图像代替复选框，因为我需要隐藏 input["checkbox"] 元素，Google Search Console 将其标记为不适合移动设备，并表示“可点击元素 [

下面是一个说明代码如何工作的示例：

<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>

它在代码笔中：

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

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

Answer 1

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