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