親和性

      簡(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)。

      額外資源

      返回頂部
      主站蜘蛛池模板: 国产精品一级香蕉一区| 在线观看免费视频一区| 好爽毛片一区二区三区四无码三飞| 末成年女A∨片一区二区| 亚洲AV无码一区二区乱子仑| 激情啪啪精品一区二区| 无码精品一区二区三区在线| 国产精品99无码一区二区| 精品不卡一区二区| 在线观看午夜亚洲一区| 国产成人av一区二区三区不卡| 亚欧免费视频一区二区三区| 99久久精品费精品国产一区二区| 国产伦精品一区二区三区精品| 亚洲欧洲精品一区二区三区| 无码精品人妻一区二区三区人妻斩 | 国产一区二区内射最近更新| 国产伦一区二区三区免费| 国内自拍视频一区二区三区| 亚洲AV无码一区二区三区DV | 亚洲.国产.欧美一区二区三区| 日韩精品无码视频一区二区蜜桃 | 人妻少妇一区二区三区| 一区二区福利视频| 国产日韩精品一区二区在线观看| 久久青青草原一区二区| 亚洲sm另类一区二区三区| 亚洲国产高清在线精品一区| 中文字幕一区二区精品区| 文中字幕一区二区三区视频播放| 日本精品高清一区二区| 国产成人精品视频一区二区不卡| 国产一区二区三区免费观看在线 | 日韩精品一区二区三区中文3d| 亚洲色无码专区一区| 91福利国产在线观一区二区| 国产一区二区成人| 国产成人精品无码一区二区老年人| 国产精品成人99一区无码| 无码精品久久一区二区三区 | 精品人妻系列无码一区二区三区 |