?
This document uses PHP Chinese website manual Release
對(duì)創(chuàng)建可訪問內(nèi)容的 Bootstrap 功能和局限性的簡(jiǎn)要概述。
引導(dǎo)提供了一個(gè)易于使用的框架,現(xiàn)成的樣式,布局工具,和交互式組件,允許開發(fā)人員創(chuàng)建的網(wǎng)站和應(yīng)用程序是視覺上有吸引力,功能豐富,并可直接訪問。
概述和局限性
使用 Bootstrap 構(gòu)建的任何項(xiàng)目的整體可訪問性在很大程度上取決于作者的標(biāo)記,額外樣式以及他們包含的腳本。但是,如果這些已正確實(shí)施,則完全可以使用 Bootstrap 創(chuàng)建滿足WCAG 2.0(A / AA / AAA),第508節(jié)和類似輔助功能標(biāo)準(zhǔn)和要求的網(wǎng)站和應(yīng)用程序。
結(jié)構(gòu)標(biāo)記
引導(dǎo)的樣式和布局可以應(yīng)用于廣泛的標(biāo)記結(jié)構(gòu)。本文檔旨在為開發(fā)人員提供最佳實(shí)踐示例,以演示Bootstrap本身的使用,并說明適當(dāng)?shù)恼Z(yǔ)義標(biāo)記,包括解決潛在的可訪問性問題的方法。
交互組件
Bootstrap的交互式組件(例如模式對(duì)話框,下拉菜單和自定義工具提示)可用于觸摸,鼠標(biāo)和鍵盤用戶。通過使用相關(guān)的WAI-ARIA角色和屬性,使用輔助技術(shù)(如屏幕閱讀器)也可以理解和操作這些組件。
因?yàn)锽ootstrap的組件是故意設(shè)計(jì)成相當(dāng)通用的,因此作者可能需要進(jìn)一步包含ARIA角色和屬性以及JavaScript行為,以便更準(zhǔn)確地傳達(dá)組件的準(zhǔn)確性質(zhì)和功能。這通常在文檔中有說明。
色彩對(duì)比
大多數(shù)當(dāng)前構(gòu)成Bootstrap默認(rèn)調(diào)色板的顏色(在按鈕變化,警報(bào)變化,形式驗(yàn)證指示器等事件中用于整個(gè)框架)導(dǎo)致顏色對(duì)比度不足(低于建議的WCAG 2.0顏色對(duì)比度4.5:1)輕的背景。作者需要手動(dòng)修改/擴(kuò)展這些默認(rèn)顏色以確保足夠的色彩對(duì)比度。
視覺隱藏內(nèi)容
內(nèi)容應(yīng)該在視覺上隱藏,但仍然可以通過輔助技術(shù)(如屏幕閱讀器)訪問,可以使用.sr-only該類進(jìn)行設(shè)計(jì)。當(dāng)需要將其他視覺信息或線索(例如通過使用顏色表示的含義)也傳達(dá)給非可視用戶時(shí),這可能很有用。
<p class="text-danger"> <span class="sr-only">Danger: </span> This action is not reversible</p>
對(duì)于視覺隱藏的交互式控件,例如傳統(tǒng)的“跳過”鏈接,.sr-only可以與.sr-only-focusable課程相結(jié)合。這將確保一旦關(guān)注控件(對(duì)于有視力的鍵盤用戶),控件就會(huì)變得可見。
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>