親和性
簡(jiǎn)要概述Bootstrap創(chuàng)建親和性內(nèi)容的特性和限制。
Bootstrap提供了一個(gè)易于使用的框架,包括現(xiàn)成的樣式、布局工具和交互組件,允許開(kāi)發(fā)人員創(chuàng)建具有視覺(jué)吸引力、功能豐富且可開(kāi)箱即用的網(wǎng)站和應(yīng)用程序。
概述和限制
使用Bootstrap構(gòu)建的任何項(xiàng)目的總體可訪問(wèn)性在很大程度上取決于作者的標(biāo)記、附加樣式和腳本。然而,用Bootstrap創(chuàng)建執(zhí)行WCAG 2.1(A/AA/AAA),Section 508,以及類(lèi)似標(biāo)準(zhǔn)網(wǎng)站和應(yīng)用是完全可以的。
結(jié)構(gòu)化標(biāo)記
Bootstrap的樣式和布局可以應(yīng)用于大量的標(biāo)記結(jié)構(gòu)上。本文主旨在向開(kāi)發(fā)者提供最佳的示范演示Bootstrap本身以及展示適當(dāng)?shù)恼Z(yǔ)義標(biāo)記,包括處理潛在親和性之方式。
交互式組件
Bootstrap的互動(dòng)元件—比如modal dialogs,下拉式功能表和自定義工具提示,其設(shè)計(jì)目的是方便觸控式及鼠標(biāo)用戶。通過(guò)使用WAI-ARIA角色和屬性,使用輔助性技術(shù)(比如屏幕閱讀器)這些元件應(yīng)同時(shí)具有可理解性和操作性。
由于Bootstrap的元件有意被設(shè)計(jì)為具有相當(dāng)?shù)耐ㄓ眯裕虼俗髡呖赡苄枰尤脒M(jìn)一步的ARIA角色和屬性以及JavaScript行為,以便更加準(zhǔn)確地傳達(dá)其元件的精確性質(zhì)和功能。在文件中通常會(huì)加以注明。
顏色對(duì)比度
當(dāng)前構(gòu)成Boostrap預(yù)設(shè)的一些顏色—在整個(gè)框架內(nèi)用于按鈕變化,警告變化,形式認(rèn)證指示等—在淺色背景是不足夠的顏色對(duì)比(如下為建議的WCAG 2.1顏色對(duì)比比例4.5:1和WCAG 2.1非顏色對(duì)比比例3:1),特別是在淺色背景下使用時(shí)。鼓勵(lì)作者們測(cè)試其特定的顏色用途,并在必要時(shí)手動(dòng)修改/擴(kuò)展這些預(yù)設(shè)顏色,以確保有足夠的顏色對(duì)比度。
視覺(jué)隱藏內(nèi)容
應(yīng)當(dāng)在視覺(jué)上被隱藏,但應(yīng)保持對(duì)屏幕閱讀器等輔助性的親和性內(nèi)容,可以使用.visually-hidden的樣式隱藏。在需要同時(shí)向非視覺(jué)使用者傳遞額外的視覺(jué)信息或提示(比如通過(guò)使用顏色表示的含義)的情形中,這是非常有用的。
<p class="text-danger">
<span class="visually-hidden">Danger: </span>
This action is not reversible
</p>
對(duì)于視覺(jué)上被隱藏的互動(dòng)控制,比如傳統(tǒng)的“略過(guò)”連接,使用.visually-hidden-focusable的樣式隱藏。這樣會(huì)確保互動(dòng)控制一旦被聚焦時(shí)就會(huì)變成可視的(對(duì)于視覺(jué)正常的鍵盤(pán)使用者來(lái)說(shuō))。注意,與過(guò)去的版本中類(lèi)似的.sr-only和.sr-only-focusable相比之下,Bootstrap 5’s.visually-hidden-focusable是獨(dú)立的樣式,不得與.visually-hidden樣式一起使用。
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
簡(jiǎn)化動(dòng)畫(huà)
Bootstrap加入對(duì)于prefers-reduced-motion media feature的支持性。允許用戶指定減少動(dòng)態(tài)的選項(xiàng)的瀏覽器/環(huán)境中,Bootstrap中的大多數(shù)CSS轉(zhuǎn)換效果(例如,打開(kāi)或關(guān)閉互動(dòng)視窗時(shí))將被禁用,和有意義的動(dòng)畫(huà)(例如微調(diào)器)將會(huì)變慢。
在支持prefers-reduced-motion的瀏覽器,并在用戶未明確表示他們希望減少reduced motion的情況下(即在prefers-reduced-motion: no-preference狀況下),Bootstrap可以使用scroll-behavior屬性實(shí)現(xiàn)平滑滾動(dòng)。