Bootstrap5 可訪問性

Bootstrap 在創(chuàng)建可訪問內(nèi)容方面的功能和限制的簡要概述。

Bootstrap 提供了一個易于使用的現(xiàn)成樣式、布局工具和交互式組件框架，允許開發(fā)人員創(chuàng)建視覺上吸引人、功能豐富且開箱即用的網(wǎng)站和應(yīng)用程序。

概述和限制

使用 Bootstrap 構(gòu)建的任何項目的整體可訪問性在很大程度上取決于作者的標記、附加樣式和它們包含的腳本。但是，如果這些已正確實施，則完全可以使用 Bootstrap 創(chuàng)建滿足 WCAG 2.1 (A/AA/AAA), Section 508,和類似可訪問性標準和要求的網(wǎng)站和應(yīng)用程序。

結(jié)構(gòu)標記

Bootstrap 的樣式和布局可以應(yīng)用于廣泛的標記結(jié)構(gòu)。本文檔旨在為開發(fā)人員提供最佳實踐示例，以演示 Bootstrap 本身的使用并說明適當?shù)恼Z義標記，包括解決潛在可訪問性問題的方法。

交互組件

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

由于 Bootstrap 的組件被有意設(shè)計為相當通用，作者可能需要包含更多ARIA角色和屬性，以及 JavaScript 行為，以更準確地傳達其組件的確切性質(zhì)和功能。這通常在文檔中注明。

顏色對比

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

視覺隱藏內(nèi)容

應(yīng)該在視覺上隱藏但仍可通過屏幕閱讀器等輔助技術(shù)訪問的內(nèi)容可以使用.?visually-hidden?類進行樣式設(shè)置。這在需要向非視覺用戶傳達額外視覺信息或提示（例如通過使用顏色表示的含義）的情況下非常有用。

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

對于視覺上隱藏的交互式控件，例如傳統(tǒng)的“跳過”鏈接，請使用?.visually-hidden-focusable?類。這將確?？丶诰劢购笞兊每梢姡▽τ谝暳φ５逆I盤用戶）。請注意，與過去版本中的等效項?.sr-only?和?.sr-only-focusable?類相比，Bootstrap 5中的?.visually-hidden-focusable?是一個獨立的類，不得與?.visually-hidden?類結(jié)合使用。

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

    

減少運動

Bootstrap 包括對prefers-reduced-motion媒體功能的支持。在允許用戶指定他們對減少運動的偏好的瀏覽器/環(huán)境中，Bootstrap 中的大多數(shù) CSS 過渡效果（例如，當打開或關(guān)閉模態(tài)對話框時，或輪播中的滑動動畫時）將被禁用，并且有意義的動畫（例如微調(diào)器）將被減慢。

在支持?prefers-reduced-motion?的瀏覽器上，如果用戶沒有明確表示他們喜歡簡化運動（即?prefers-reduced-motion:no-preference?），則Bootstrap可以使用?scroll-behavior?屬性實現(xiàn)平滑滾動。

其他資源

• Web 內(nèi)容可訪問性指南 (WCAG) 2.1
• A11Y 項目
• MDN 可訪問性文檔
• Tenon.io 可訪問性檢查器
• 色彩對比分析儀 (CCA)
• 用于識別可訪問性問題的“HTML Codesniffer”書簽
• 微軟無障礙洞察
• 軸測試工具
• Web 可訪問性簡介