Source

Մատչելիություն

Bootstrap-ի առանձնահատկությունների և մատչելի բովանդակության ստեղծման սահմանափակումների համառոտ ակնարկ:

Bootstrap-ն ապահովում է պատրաստի ոճերի, դասավորության գործիքների և ինտերակտիվ բաղադրիչների հեշտ օգտագործման շրջանակ, որը թույլ է տալիս ծրագրավորողներին ստեղծել տեսողականորեն գրավիչ, ֆունկցիոնալ առումով հարուստ և հասանելի վեբ կայքեր և հավելվածներ:

Ընդհանուր ակնարկ և սահմանափակումներ

Bootstrap-ով կառուցված ցանկացած նախագծի ընդհանուր հասանելիությունը մեծ մասամբ կախված է հեղինակի նշագրումից, լրացուցիչ ոճավորումից և նրանց կողմից ներառված սցենարներից: Այնուամենայնիվ, պայմանով, որ դրանք ճիշտ են իրականացվել, պետք է լիովին հնարավոր լինի ստեղծել վեբկայքեր և հավելվածներ Bootstrap-ով, որոնք համապատասխանում են WCAG 2.0 (A/AA/AAA), Բաժին 508 -ին և հասանելիության նմանատիպ չափանիշներին և պահանջներին:

Կառուցվածքային նշում

Bootstrap-ի ոճավորումը և դասավորությունը կարող են կիրառվել նշագծման կառույցների լայն շրջանակի համար: Այս փաստաթուղթը նպատակ ունի ծրագրավորողներին տրամադրել լավագույն փորձի օրինակներ՝ ցույց տալու համար Bootstrap-ի օգտագործումը և ցույց տալու համապատասխան իմաստային նշագրումը, ներառյալ այն ուղիները, որոնցով հնարավոր է մատչելիության հետ կապված խնդիրները լուծել:

Ինտերակտիվ բաղադրիչներ

Bootstrap-ի ինտերակտիվ բաղադրիչները, ինչպիսիք են մոդալ երկխոսությունները, բացվող ընտրացանկերը և հատուկ գործիքների հուշումները, նախագծված են աշխատելու հպման, մկնիկի և ստեղնաշարի օգտագործողների համար: Համապատասխան WAI - ARIA դերերի և ատրիբուտների օգտագործման միջոցով այս բաղադրիչները պետք է նաև հասկանալի և գործունակ լինեն՝ օգտագործելով օժանդակ տեխնոլոգիաներ (օրինակ՝ էկրանի ընթերցիչներ):

Քանի որ Bootstrap-ի բաղադրիչները միտումնավոր նախագծված են բավականին ընդհանուր լինելու համար, հնարավոր է, որ հեղինակներին անհրաժեշտ լինի ներառել ARIA- ի հետագա դերերն ու ատրիբուտները, ինչպես նաև JavaScript-ի վարքագիծը, որպեսզի ավելի ճշգրիտ կերպով փոխանցեն իրենց բաղադրիչի ճշգրիտ բնույթն ու ֆունկցիոնալությունը: Սա սովորաբար նշվում է փաստաթղթերում:

Գույնի հակադրություն

Գույների մեծ մասը, որոնք ներկայումս կազմում են Bootstrap-ի լռելյայն գունապնակը, որոնք օգտագործվում են շրջանակում այնպիսի բաների համար, ինչպիսիք են կոճակների տատանումները, ազդանշանային տատանումները, ձևի վավերացման ցուցիչները, հանգեցնում են գունային անբավարար հակադրության (առաջարկվող WCAG 2.0 գունային հակադրության հարաբերակցությունից ցածր՝ 4,5:1 ), երբ օգտագործվում են դեմ : թեթև ֆոն: Հեղինակները պետք է ձեռքով փոփոխեն/ընդլայնեն այս լռելյայն գույները՝ գունային հակադրության համապատասխան հարաբերակցություններ ապահովելու համար:

Տեսողականորեն թաքնված բովանդակություն

Բովանդակությունը, որը պետք է տեսողականորեն թաքցվի, բայց հասանելի մնա օժանդակ տեխնոլոգիաների համար, ինչպիսիք են էկրանի ընթերցողները, կարող են ոճավորվել .sr-onlyդասի միջոցով: Սա կարող է օգտակար լինել այն իրավիճակներում, երբ լրացուցիչ տեսողական տեղեկատվությունը կամ ազդանշանները (օրինակ՝ գույնի օգտագործման իմաստով) պետք է փոխանցվեն նաև ոչ տեսողական օգտատերերին:

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

Տեսողականորեն թաքնված ինտերակտիվ կառավարման համար, ինչպիսիք են ավանդական «բաց թողնել» հղումները, .sr-onlyկարող են համակցվել .sr-only-focusableդասի հետ: Սա կապահովի, որ կառավարումը տեսանելի դառնա կենտրոնանալուց հետո (տեսողությամբ ստեղնաշար օգտագործողների համար):

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

Նվազեցված շարժում

Bootstrap-ը ներառում է prefers-reduced-motionմեդիա ֆունկցիայի աջակցություն : Բրաուզերներում/միջավայրերում, որոնք թույլ են տալիս օգտատիրոջը նշել իրենց նախապատվությունը կրճատված շարժման համար, Bootstrap-ում CSS-ի անցումային էֆեկտների մեծ մասը (օրինակ, երբ մոդալ երկխոսությունը բացվում կամ փակվում է) կանջատվեն: Ներկայումս աջակցությունը սահմանափակված է Safari-ով macOS-ում և iOS-ում:

Լրացուցիչ ռեսուրսներ