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 的父级。没有它，不可见的内容可能会出现在页面底部并导致浏览器添加滚动条。我不喜欢必须在 position: relative 类的顶部添加 sr-only 规则。它很容易被遗忘或意外删除。如果添加类是唯一需要的步骤会更容易，这似乎可以通过简单地将 top: 0 添加到这些规则中。但我有点紧张，用这种古老的智慧来调整。是否有理由不采用这种方式？我是否遗漏了 top: 0 的潜在问题？

Answer 1

简答

不，不要使用top: 0

更长的答案

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

screen reader class you linked 与 visually hidden text class I created / use 相同（它只是表明如果我们两个人想出了相同的东西，它可能是正确的！）并且不应导致所描述的问题，因为它使用 { {1}}。

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

此外，滚动条问题往往是由 clip-path: inset(50%) 部分引起的（您注意到我们没有在我们的类中使用它），但没有可测试的内容，我无法确认这里的情况。< /p>

至于添加 margin: -1px 不要这样做 - 你确实明智，不要乱用旧智慧。

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

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

综上所述，如果您确实设法将代码笔/小提琴等组合在一起，以证明您使用 class I recommend 或问题中的课程描述的问题，那么请告诉我，因为这是我想解决！

最后的想法

在 bug report you linked in the comments 中，不要按照最后一条消息的建议去做：

<块引用>

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

上述所有 3 个选项都会使文本对屏幕阅读器用户完全不可见（从辅助功能树中删除元素），并完全打破了仅使用屏幕阅读器类的观点。

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

<块引用>

使“viewport-router”成为一个包含块（例如“position:relative”或类似的）。
将“viewport-main”更改为“overflow-y: hidden”或类似内容。

sr-only 类导致页面滚动

1 个答案:

简答

更长的答案

最后的想法