负顶部与负面左侧用于视觉隐藏元素

Question

视觉上隐藏某些内容但允许屏幕阅读器查看的常规方法是left: -9999px。

为什么不top: -9999px？

从技术上讲，有些人可能会看到一些位于左侧的东西（例如巨大的屏幕，或者只是缩小到很远）。但浏览器永远不会让你看到身体的顶部。那么负面top更好吗？或者我错过了什么？

Answer 1

这site很好地解释了这一点：

  

有时建议使用left定位内容：0px;   上：-500px（或类似）。虽然这通过定位内容来工作   在页面顶部上方，如果隐藏元素包含链接或   表单元素，在接收键盘焦点时，浏览器尝试   滚动到元素 - 从而将浏览器滚动到顶部   页。这可能会导致视力正常的键盘用户感到困惑。通过   直接向左定位，浏览器不会滚动到   页面顶部。应该指出的是，因为链接和形式   元素提供功能，它们应该很少被隐藏   视力正常的用户。有视觉的用户将无法查看哪个元素   目前有焦点，因为它隐藏在屏幕外。

简而言之，通过将内容移动到页面顶部以外而不是超出左边缘来隐藏内容，可能会在导航过程中导致跳转。

Answer 2

有一种使用CSS剪辑属性隐藏内容的新方法。 CSS剪辑属性允许您使用top，right，bottom和left值指定绝对位置元素的尺寸，从而为元素创建一个盒子容器。通过将所有值设置为0px，您可以隐藏元素。

.hidden { 
  position: absolute;
  clip: rect(0px 0px 0px 0px);
}

但是，根据浏览器的不同，可能会有所不同。这种方法归功于Jeff Burnz。你可以阅读他的文章 - Using CSS clip as an Accessible Method of Hiding Content。