View on GitHub

網頁親和性(Accessibility)

簡要概述 Bootstrap 創建親和性內容的特性和限制。

六角學院的 Bootstrap 5 課程上線囉，立即與萬人一同學習最專業、最深入的 Bootstrap 5 課程。

On this page

Bootstrap 提供了一個由現成風格、佈局工具和互動元件構成的易用框架，允許開發人員創建具有視覺吸引力，功能豐富且可以直接使用的網站和應用程序。

概述和限制

用 Bootstrap 創建任何項目的整體親和性很大部分上取決於作者的標記、額外的樣式及所包含的腳本。然而，用 Bootstrap 創建執行 WCAG 2.1 (A/AA/AAA)、Section 508，以及類似親和性標準網站和應用是完全可以的。

結構性標記

Bootstrap 的樣式和佈局可以應用於大量的標記結構上。本文主旨在向開發者提供最佳的示範演示 Bootstrap 本身以及展示適當的語義標記，包括處理潛在親和性之方式。

互動組件

Bootstrap 的互動元件 — 比如 modal dialogs，下拉式功能表和自訂工具提示，其設計目的是方便觸控式及滑鼠用戶。通過使用 WAI-ARIA 角色和屬性，使用輔助性技術 (比如螢幕閱讀器) 這些元件應同時具有可理解性和操作性。

由於 Bootstrap 的元件有意被設計為具有相當的通用性，因此作者可能需要加入進一步的 ARIA 角色和屬性以及 JavaScript 行為，以便更加準確地傳達其元件的精確性質和功能。在文件中通常會加以註明。

顏色對比

當前構成 Boostrap 預設的一些顏色組合 — 在整個框架中用於按鈕變化、警告變化、表單驗證指示等 — 可能會導致顏色對比度不足(低於推薦的 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 和 .sr-only-focusable 相比之下，Bootstrap 5’s .visually-hidden-focusable 是獨立的樣式，不得與 .visually-hidden 樣式一起使用。

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

減少動態

Bootstrap 加入對於 prefers-reduced-motion media feature 的支援性。允許用戶指定減少動態的選項的瀏覽器 / 環境中，Bootstrap 中的大多數 CSS 轉換效果 (例如，打開或關閉互動視窗時) 將被禁用，和有意義的動畫 (例如微調器) 將會變慢。

在支援 prefers-reduced-motion 的瀏覽器，並在用戶 未明確 表示他們希望減少 reduced motion 的情況下 (即在 prefers-reduced-motion: no-preference 狀況下), Bootstrap 可以使用 scroll-behavior 屬性實現平滑滾動。