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

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

Այս էջում

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

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

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

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

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

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

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

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

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

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

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

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

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

<a class="visually-hidden-focusable" href="#content">Skip to main content</a>

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

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

Բրաուզերների վրա, որոնք աջակցում են prefers-reduced-motion, և որտեղ օգտատերը հստակորեն չի ազդարարել, որ նախընտրում է նվազեցնել շարժումը (այսինքն, որտեղ prefers-reduced-motion: no-preference), Bootstrap-ը հնարավորություն է տալիս սահուն ոլորել՝ օգտագործելով scroll-behaviorհատկությունը: