Bootstrap 3 中的 sr-only 是什么？

Question

類sr-only用於什么？ 它重要還是我可以刪除它？ 沒有工作正常。

這是我的例子：

<div class="btn-group">
    <button type="button" class="btn btn-info btn-md">Departments</button>
    <button type="button" class="btn btn-info dropdown-toggle btn-md" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Sales</a></li>
        <li><a href="#">Technical</a></li>
        <li class="divider"></li>
        <li><a href="#">Show all</a></li>
    </ul>
</div>

Answer 1

根據bootstrap 的文檔，該類用於在呈現頁面的布局中隱藏僅供屏幕閱讀器使用的信息。

如果您沒有為每個輸入都包含一個標簽，屏幕閱讀器將無法處理您的表單。 對於這些內聯表單，您可以使用 .sr-only 類隱藏標簽。

這是使用的示例樣式：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

它重要還是我可以刪除它？ 沒有工作正常。

這很重要，不要刪除它。

出於可訪問性目的，您應該始終考慮屏幕閱讀器。 無論如何，類的使用都會隱藏元素，因此您不應該看到視覺差異。

如果您有興趣閱讀有關可訪問性的內容：

• 網絡無障礙倡議 (WAI)

• MDN 可訪問性文檔

Answer 2

正如 JoshC 所說，類.sr-only用於在視覺上隱藏僅用於屏幕閱讀器的信息。 但不僅是為了隱藏標簽。 您可能會考慮隱藏各種其他元素，例如“跳轉到主要內容”鏈接、具有替代文本的圖標等。

順便提一句。 如果您需要元素在聚焦時變得可見，您也可以使用.sr-only sr-only-focusable例如“跳到主要內容”

如果您想讓您的網站更易於訪問，我建議從這里開始：

• 可訪問性@Google - 網絡基礎
• 無障礙開發者指南（我個人最喜歡的）
• WebAIM 原則+ WebAIM WCAG 清單
• 可訪問性@ReactJS （很多好的資源和一般的東西）

為什么？

根據世界衛生組織的數據，有 2.85 億人有視力障礙。 因此，使網站易於訪問很重要。

重要提示：避免區別對待殘疾用戶。 一般來說，盡量避免為不同的用戶群體開發不同的內容。 而是嘗試使現有內容可訪問，以便它開箱即用，並且適用於所有未專門針對屏幕閱讀器的內容。 換句話說，不要試圖重新發明輪子。 否則，由此產生的可訪問性通常會比根本沒有開發的情況更糟。 我們開發人員不應假設這些用戶將如何使用我們的網站。 所以當你需要開發這樣的解決方案時要非常小心。 顯然，“跳過鏈接”是此類內容的一個很好的例子，如果它在聚焦時可見。 但也有很多不好的例子。 這將在屏幕閱讀器中隱藏地圖上的“縮放”按鈕，假設它與盲人用戶無關。 但令人驚訝的是，盲人用戶確實使用了縮放功能！ 他們喜歡像許多其他用戶一樣下載圖像（即使是高分辨率的），以便將它們發送給其他人或在其他環境中使用它們。 來源 - 閱讀更多 @ADG：不良 ARIA 實踐

Answer 3

我在導航欄示例中找到了這一點，並對其進行了簡化。

<ul class="nav">
  <li><a>Default</a></li>
  <li><a>Static top</a></li>
  <li><b><a>Fixed top <span class="sr-only">(current)</span></a></b></li>
</ul>

您會看到選擇了哪個（ sr-only部分被隱藏）：

• 默認
• 靜態頂部
• 固定頂

如果您使用屏幕閱讀器，您會聽到選擇了哪一個：

• 默認
• 靜態頂部
• 固定頂部（當前）

由於這項技術，盲人應該在您的網站上更輕松地導航。

Answer 4

.sr-only是專門用於屏幕閱讀器的類名。 您可以使用任何類名，但.sr-only非常常用。 如果您不關心在開發時考慮合規性，那么可以將其刪除。 如果刪除它不會以任何方式影響 UI，因為此類的 CSS 對桌面和移動設備瀏覽器不可見。

這里似乎缺少一些關於使用.sr-only來解釋其目的和用於屏幕閱讀器的信息。 首先，始終牢記受損用戶非常重要。 減值是 508 合規的目的： https : //www.section508.gov/ ，引導程序考慮到這一點很棒。 但是， .sr-only使用.sr-only並不是 508 合規性需要考慮的全部。 您可以使用顏色、字體大小、導航可訪問性、描述符、詠嘆調的使用等等。

但至於.sr-only - CSS 實際上是做什么的？ 用於.sr-only的 CSS 有幾種略有不同的變體。 我使用的少數之一如下：

.sr-only {
    position: absolute;
    margin: -1px 0 0 -1px;
    padding: 0;
    display: block;
    width: 1px;
    height: 1px;
    font-size: 1px;
    line-height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
    outline: 0;
    }

上面的 CSS 隱藏了用此類包裝的桌面和移動瀏覽器中的內容，但可以被 JAWS 之類的屏幕閱讀器看到： http : //www.freedomscientific.com/Products/Blindness/JAWS 。 示例標記如下：

<a href="#" target="_blank">
    Click to Open Site
    <span class="sr-only">This is an external link</span>
</a>

此外，如果 DOM 元素的寬度和高度為 0，則 DOM 看不到該元素。 這就是為什么上面的 CSS 使用width: 1px; height: 1px; width: 1px; height: 1px; . 通過使用display: none並將您的 CSS 設置為height: 0和width: 0 ，DOM 看不到該元素，因此存在問題。 上面的 CSS 使用width: 1px; height: 1px; width: 1px; height: 1px; 並不是讓桌面和移動瀏覽器看不到內容（沒有overflow: hidden ，您的內容仍會顯示在屏幕上），並且對屏幕閱讀器可見。 隱藏桌面和移動瀏覽器中的內容是通過添加從width: 1px和height: 1px前面提到的偏移量來完成的：

position: absolute;
margin: -1px 0 0 -1px; 
overflow: hidden;

最后，要很好地了解屏幕閱讀器看到的內容並將其傳遞給受損用戶，請關閉瀏覽器的頁面樣式。 對於 Firefox，您可以通過以下方式執行此操作：

View > Page Style > No Style

我希望我在這里提供的信息除了其他回復之外，對其他人也有進一步的用處。

Answer 5

確保對象僅向閱讀器和類似設備顯示（或應該顯示）。 它在與屬性 aria-hidden="true" 的其他元素的上下文中更有意義。

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

Glyphicon 將顯示在所有其他設備上，文字錯誤：在文本閱讀器上。

Answer 6

.sr-only類對除screen readers:器之外的所有設備隱藏一個元素screen readers:

跳轉到主要內容 結合 .sr-only 和 .sr-only-focusable 以在獲得焦點時再次顯示該元素

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

}