sr-only 类导致页面滚动

Question

我想让一些内容对屏幕阅读器可用，但在页面上不可见。将其从页面上移除会导致屏幕阅读器不会宣布它，因此我使用了一种常见的 hacky 解决方法，sr-only 类，例如 Bootstrap 使用的。这是Kitty Giraudel 的版本：

.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

问题在于position: absolute 规则，它需要具有position: relative 的父级。没有它，不可见的内容可能会出现在页面底部并导致浏览器添加滚动条。我不喜欢必须在 sr-only 类之上添加 position: relative 规则。它很容易被遗忘或意外删除。如果添加类是唯一需要的步骤，这将更容易，只需将top: 0 添加到这些规则中即可。但我对这种古老的智慧有点紧张。有没有理由不经常这样做？我错过了top: 0 的潜在问题吗？

Answer 1

简答

不，不要使用top: 0

更长的答案

首先，您在 cmets 中链接的问题是使用一个非常损坏（据我所知是旧的）仅屏幕阅读器类，我认为它已经更新（如果没有，那只会加强我对使用字体的看法太棒了！?）。

screen reader class you linked 与visually hidden text class I created / use 相同（这只是表明如果我们两个人想出了同样的事情，它可能是正确的！）并且不应该导致所描述的问题，因为它使用了clip-path: inset(50%)。

clip-path: inset(50%) 有效地使元素的高度为 0px，宽度为 0px，因此您永远不会因此而遇到任何溢出问题。

此外，滚动条问题往往是由 margin: -1px 部分引起的（您注意到我们没有在我们的课程中使用它），但如果没有要测试的东西，我无法确认这里是这种情况。

至于添加top: 0 不要这样做 - 你确实是明智的，不要与旧智慧混为一谈。

您开始移动元素位置的那一刻，一些屏幕阅读器会尝试补偿定位（认为您是一个糟糕的开发人员并使用绝对定位来更改页面上的事物顺序而不是更改 DOM 顺序） ，导致奇怪的阅读顺序。

我已经使用我链接的课程 2 年了，没有看到任何意外的滚动条，所以你应该是安全的。

话虽如此，如果您确实设法将 codepen / fiddle 等放在一起，以证明您用 class I recommend 或您的问题中的课程描述的问题，那么请告诉我，因为我会这样做想解决！

最后的想法

在bug report you linked in the comments 中，不要按照最后的信息建议：

1. 调整元素大小，使其为 0xN 或 Nx0（例如“width: 0”或类似内容）。
2. 使元素“显示：无”。
3. 将元素包围在 0x0 div 中，这也是“位置：绝对”。

上述所有 3 个选项都会使文本对屏幕阅读器用户完全不可见（从可访问性树中删除元素）并完全打破使用仅屏幕阅读器类的意义。

选项 4 和 5 是可行的选项：

4. 使“viewport-router”成为一个包含块（例如“位置：相对”或类似的）。
5. 将“viewport-main”更改为“overflow-y: hidden”或类似的。