当复选框的状态发生变化时，如何防止页面跳转？

Question

Example page

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

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

Answer 1

Totaly了解您的疑虑，但我认为可以使用display：none - 在aria-label或替代品的帮助下完成。

这对于可访问性（以及SEO，因为我理解机器人逻辑）也很有用：

  

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

src：https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

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

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

http://jsfiddle.net/fbogny68/

Answer 2

看到这个。使用可见性，该元素仍将在文档中。

  

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