sr-only class 导致页面滚动

Question

我想让一些内容对屏幕阅读器可用，但在页面上不可见。 将其从页面上删除会导致屏幕阅读器不会宣布它，因此我使用了一种常见的 hacky 解决方法，即sr-only class，例如由 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的父级。 没有它，不可见的内容可能会出现在页面底部并导致浏览器添加滚动条。 我不喜欢必须添加 position：在sr-only class 之上的position: relative规则。 它很容易被遗忘或意外删除。 如果添加 class 是唯一需要的步骤，这将更容易，这似乎可以通过简单地将top: 0添加到这些规则。 但我对这种古老的智慧有点紧张。 有没有理由不经常这样做？ 我错过了top: 0的潜在问题吗？

Answer 1

简答

不，不要使用top: 0

更长的答案

首先，您在评论中链接的问题是使用一个非常损坏（据我所知很旧）的屏幕阅读器 class，我认为它已经更新（如果没有，那只会加强我对使用 Font Awesome 的看法。） .

您链接的屏幕阅读器 class 与我创建/使用的视觉隐藏文本 class相同（这只是表明我们两个人是否想出了同样的事情，它可能是正确的！）并且不应该导致描述的问题，因为它使用clip-path: inset(50%) 。

clip-path: inset(50%)有效地使元素 0px 高和 0px 宽，所以你不应该因为它而遇到任何溢出问题。

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

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

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

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

话虽如此，如果您确实设法将代码笔/小提琴等放在一起，以证明您使用我推荐的 class 或您的问题中的 class 描述的问题，那么请告诉我，因为这是我想要解决的问题！

最后的想法

在 您在评论中链接的错误报告中，不要按照最终消息的建议进行操作：

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

上述所有 3 个选项将使屏幕阅读器用户完全看不到文本（从可访问性树中删除元素），并完全打破仅使用屏幕阅读器 class 的观点。

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

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