Source

可訪問性

Bootstrap 用於創建可訪問內容的功能和限制的簡要概述。

Bootstrap 提供了一個易於使用的現成樣式、佈局工具和交互式組件框架，允許開發人員創建具有視覺吸引力、功能豐富且開箱即用的網站和應用程序。

概述和限制

使用 Bootstrap 構建的任何項目的整體可訪問性在很大程度上取決於作者的標記、附加樣式和它們包含的腳本。但是，只要這些已正確實施，完全可以使用 Bootstrap 創建滿足WCAG 2.0 (A/AA/AAA)、第 508 節和類似可訪問性標準和要求的網站和應用程序。

結構標記

Bootstrap 的樣式和佈局可以應用於各種標記結構。本文檔旨在為開發人員提供最佳實踐示例，以演示 Bootstrap 本身的使用並說明適當的語義標記，包括解決潛在可訪問性問題的方法。

交互式組件

Bootstrap 的交互式組件（例如模式對話框、下拉菜單和自定義工具提示）旨在為觸摸、鼠標和鍵盤用戶工作。通過使用相關的WAI - ARIA角色和屬性，這些組件也應該是可理解的，並且可以使用輔助技術（如屏幕閱讀器）進行操作。

因為 Bootstrap 的組件被特意設計為相當通用，所以作者可能需要包含更多的ARIA角色和屬性，以及 JavaScript 行為，以更準確地傳達其組件的精確性質和功能。這通常在文檔中註明。

顏色對比

當前構成 Bootstrap 的默認調色板的大多數顏色（在整個框架中用於按鈕變體、警報變體、表單驗證指示符等）在使用淺色背景。作者將需要手動修改/擴展這些默認顏色以確保足夠的顏色對比度。

視覺隱藏的內容

可以使用該類設置應該在視覺上隱藏但仍可供屏幕閱讀器等輔助技術訪問的內容.sr-only。這在額外的視覺信息或提示（例如通過使用顏色表示的含義）也需要傳達給非視覺用戶的情況下很有用。

<p class="text-danger">
  <span class="sr-only">Danger: </span>
  This action is not reversible
</p>

對於視覺上隱藏的交互控件，例如傳統的“跳過”鏈接，.sr-only可以與.sr-only-focusable類結合。這將確保控件在聚焦後變得可見（對於有視力的鍵盤用戶）。

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

其他資源