Bootstrap 3 的 `sr-only` 類別如何增強螢幕閱讀器的輔助功能？

螢幕閱讀器幫助：揭示sr-only 在Bootstrap 3 中的作用

在Bootstrap 3 中，sr-only 類起著至關重要的作用在網路可訪問性中的作用。它僅為螢幕閱讀器隱藏訊息，確保輔助科技使用者可以有效地導航和理解網頁。

根據 Bootstrap 的文檔，僅限 sr 的元素在視覺渲染中隱藏，並且在佈局中不佔用任何空間。這允許開發人員為螢幕閱讀器提供標籤和其他資訊文本，而不會弄亂用戶介面。

考慮以下範例：

<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>

在此範例中，僅 sr 類span 元素在視覺視圖中隱藏文字「Toggle Dropdown」。但是，輔助技術會大聲朗讀此文本，告知使用者按鈕的功能。

維護 sr-only 類別以實現可訪問性至關重要。刪除它可能會妨礙螢幕閱讀器功能並使您的網站包容性降低。

該類別應用CSS 樣式來隱藏元素，包括：

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

如果您優先考慮可訪問性，請考慮以下資源Web Accessibility Initiative (WAI) 和MDN Accessibility 文檔，以增強殘障人士的使用者體驗。

以上是Bootstrap 3 的 `sr-only` 類別如何增強螢幕閱讀器的輔助功能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！