Bootstrap5 可訪問性

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

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

概述和限制

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

結(jié)構(gòu)標(biāo)記

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

交互組件

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

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

顏色對(duì)比

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

視覺隱藏內(nèi)容

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

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

對(duì)于視覺上隱藏的交互式控件，例如傳統(tǒng)的“跳過”鏈接，請(qǐng)使用?.visually-hidden-focusable?類。這將確保控件在聚焦后變得可見（對(duì)于視力正常的鍵盤用戶）。請(qǐng)注意，與過去版本中的等效項(xiàng)?.sr-only?和?.sr-only-focusable?類相比，Bootstrap 5中的?.visually-hidden-focusable?是一個(gè)獨(dú)立的類，不得與?.visually-hidden?類結(jié)合使用。

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

    

減少運(yùn)動(dòng)

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

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

其他資源

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