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”或類似的。