可訪問性

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

在本頁面

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

概述和限制

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

結構標記

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

交互式組件

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

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

顏色對比

目前構成 Bootstrap 的默認調色板的一些顏色組合（在整個框架中用於按鈕變體、警報變體、表單驗證指示器等）可能會導致顏色對比度不足（低於WCAG 2.1 推薦的 4.5:1 文本顏色對比度 WCAG 2.1 非文本顏色對比度為 3:1），尤其是在淺色背景下使用時。鼓勵作者測試他們對顏色的特定用途，並在必要時手動修改/擴展這些默認顏色以確保足夠的顏色對比度。

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

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

對於視覺隱藏的交互式控件，例如傳統的“跳過”鏈接，請使用.visually-hidden-focusable該類。這將確保控件在聚焦後變得可見（對於有視力的鍵盤用戶）。請注意，與過去版本中的等效類.sr-only和類相比，Bootstrap 5是一個獨立類，不能與該類組合使用。.sr-only-focusable.visually-hidden-focusable.visually-hidden

<a class="visually-hidden-focusable" href="#content">Skip to main content</a>

減少運動

Bootstrap 包括對prefers-reduced-motion媒體功能的支持。在允許用戶指定減少運動偏好的瀏覽器/環境中，Bootstrap 中的大多數 CSS 過渡效果（例如，當打開或關閉模態對話框時，或輪播中的滑動動畫時）將被禁用，並且有意義的動畫 (例如微調器）將減慢速度。

在支持的瀏覽器上prefers-reduced-motion，並且用戶沒有明確表示他們更喜歡減少運動（即 where prefers-reduced-motion: no-preference），Bootstrap 可以使用該scroll-behavior屬性實現平滑滾動。