复选框状态发生变化时如何防止页面跳转？答案

【问题标题】：How to prevent page jumps when checkbox's state changes?复选框状态发生变化时如何防止页面跳转？
【发布时间】：2015-01-10 07:47:53
【问题描述】：

当您向下滚动页面直到您只能看到label 的一小部分（浅绿色/浅蓝色垂直矩形）时，然后单击label 以更改复选框的状态。然后您会看到页面跳起来以显示整个label。

如何防止跳转发生？我知道在 input 上设置 CSS display: none 是可行的，但这也会对屏幕阅读器隐藏 input 并且不利于辅助功能。

【问题讨论】：

【解决方案1】：

检查这个。使用可见性，元素仍会在文档中。

How can I prevent the browser from scrolling on top of the page when clicking the checkbox?

【讨论】：

【解决方案2】：

完全理解您的顾虑，但我认为可以通过 display:none 来完成 - 借助 aria-label 或替代方法。

这有利于可访问性（以及 SEO，据我了解机器人逻辑）：

aria-label 属性用于定义一个标记当前元素的字符串。在文本标签不可见的情况下使用它屏幕。（如果有可见的文本标记元素，使用 aria-labelledby 代替。）

所以 - 你的小提琴（仅限 html）：

<div>
    <input  aria-label="test" id="test" type="checkbox" />
</div>

【讨论】：