無障礙

對 BootstrapVue 可用性支援功能和限制的簡要說明。

概觀與限制

BootstrapVue 會自動加入適當的可訪問性標記，以便處理大部分的互動元件。但透過 Bootstrap 及 BootstrapVue 產生的專案的可訪問性取決於作者的加註、額外的樣式設定，以及他們包含的指令碼。不過，若正確執行這些步驟，就能完全使用 BootstrapVue 建立符合 WCAG 2.0 (A/AA/AAA)、第 508 節，以及類似的可訪問性標準與規範。

結構化標記

BootstrapVue 的客製化元件經過最佳化，以直接產生可訪問性/語義化的 HTML 標記。本文件希望能為開發人員提供範例，來示範如何使用 Bootstrap 本身，並說明適當的語義化標記，包括處理潛在可訪問性問題的方法。

大部分元件文件頁面都包含可訪問性部分（或部分），以說明範例及限制。

互動式元件

BootstrapVue 的互動式元件 — 例如模式對話視窗、下拉式功能表和客製化工具提示 — 設計成可支援觸控、滑鼠和鍵盤使用者。透過使用相關的 WAI-ARIA 角色與屬性，這些元件使用輔助技術 (例如螢幕閱讀程式)，也能理解和操作。

由於 BootstrapVue 的元件專門設計成相當通用，因此作者可能需要包含更多 ARIA 角色和屬性，以及 JavaScript 行為，才能更準確地傳達這些元件的精確本質和功能。這通常會記錄在文件中。

色彩對比

目前組成 Bootstrap V4 預設色票的色彩（在整個架構中用於按鈕變體、提醒變體、表單驗證指標等事物）大多會導致不足夠的色彩對比（低於建議的 WCAG 2.0 4.5:1 色彩對比率）與淺色背景對比時使用時。作者將需要手動調整/擴充預設色彩以確保有充足的色彩對比率。

請參閱主題部分以自訂 Bootstrap 的 SCSS。

應該視覺上隱藏，但可以存取輔助科技（例如螢幕朗讀程式）的內容可以用 .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>

減少動態效果

Bootstrap 支援 prefers-reduced-motion 媒體功能。在使用者可指定偏好為減少動態效果的瀏覽器/環境中，Bootstrap 內的大部分 CSS 轉換效果（例如開啟或關閉視窗對話方塊時，或輪播中的滑行動畫）會被停用。

如果您預期動畫和/或轉換會作用，但沒有，則可能會在作業系統控制面板中啟用減少動態效果（沒有動畫）設定。

測試應用程式的可及性

强烈建議在部署之前測試應用程式的可及性。請注意，有些國家甚至有法律要求所有網站都必須具備可及性。

在讓網路應用程式具備可及性時，只要考慮兩件主要的事情。

定義正確的鍵盤行為。BootstrapVue 為大部分元件提供鍵盤控制，但您應該確保自訂元件也可以透過鍵盤存取。
讓螢幕朗讀程式能夠理解您的應用程式。Bootstrap 在大多數情況下，會自動在我們元件上設定正確的 role 和 aria-* 屬性。您也應該確保所有自訂元件提供正確的角色和屬性（在可能的情況下使用有意義 HTML 元素和標記）。

測試應執行的步驟

嘗試只使用鍵盤，看看是否可以存取和控制所有互動式元件。確保控制項有焦點樣式，讓使用者知道他們位於哪個互動式元素上。請記得，鍵盤使用者無法觸發元素的 hover 狀態。
使用螢幕朗讀程式（搭配僅使用鍵盤）在應用程式中導覽並進行互動。有許多免費的螢幕朗讀程式可供各種作業系統和瀏覽器使用。請記得，螢幕朗讀程式使用者只能「聽到」他們所聽到的內容。
看看在放大瀏覽器的縮放等級（和/或字體大小）時，您的應用程式的外觀和運作方式如何。