Alirebleco

Mallonga superrigardo de la funkcioj kaj limigoj de Bootstrap por la kreado de alirebla enhavo.

Sur ĉi tiu paĝo

Bootstrap provizas facile uzeblan kadron de pretaj stiloj, aranĝaj iloj kaj interagaj komponantoj, permesante al programistoj krei retejojn kaj aplikaĵojn, kiuj estas vide allogaj, funkcie riĉaj kaj alireblaj el la skatolo.

Superrigardo kaj limigoj

La ĝenerala alirebleco de iu ajn projekto konstruita kun Bootstrap dependas grandparte de la markado de la aŭtoro, kroma stilado kaj skribo, kiun ili inkludis. Tamen, kondiĉe ke ĉi tiuj estis efektivigitaj ĝuste, devus esti perfekte eble krei retejojn kaj aplikojn kun Bootstrap kiuj plenumas WCAG 2.1 (A/AA/AAA), Section 508 , kaj similajn alireblajn normojn kaj postulojn.

Struktura markado

La stilo kaj aranĝo de Bootstrap povas esti aplikitaj al larĝa gamo de markadaj strukturoj. Ĉi tiu dokumentaro celas provizi programistojn per plej bonaj praktikaj ekzemploj por pruvi la uzon de Bootstrap mem kaj ilustri taŭgan semantikan markadon, inkluzive de manieroj kiel eblaj zorgoj pri alirebleco povas esti traktitaj.

Interagaj komponantoj

La interagaj komponantoj de Bootstrap—kiel modalaj dialogoj, falmenuoj kaj kutimaj konsiletoj—estas dezajnitaj por funkcii por uzantoj de tuŝo, muso kaj klavaro. Per la uzo de koncernaj WAI - ARIA roloj kaj atributoj, ĉi tiuj komponantoj ankaŭ devus esti kompreneblaj kaj operacieblaj uzante helpajn teknologiojn (kiel ekranlegiloj).

Ĉar la komponentoj de Bootstrap estas intence dizajnitaj por esti sufiĉe senmarkaj, verkintoj eble bezonos inkludi pliajn ARIA- rolojn kaj atributojn, same kiel JavaScript-konduton, por pli precize transdoni la precizan naturon kaj funkciecon de sia komponento. Ĉi tio estas kutime notita en la dokumentado.

Kolora kontrasto

Iuj kombinaĵoj de koloroj, kiuj nuntempe konsistigas la defaŭltan paletron de Bootstrap—uzataj ĉie en la kadro por aferoj kiel ekzemple butonvarioj, atentigvarioj, formvalidigadindikiloj—povas konduki al nesufiĉa kolorkontrasto (sub la rekomendita WCAG 2.1 teksta kontrastoproporcio de 4.5:1). kaj la WCAG 2.1 ne-teksta kolorkontrastoproporcio de 3:1 ), precipe kiam uzata kontraŭ hela fono. Aŭtoroj estas instigitaj testi siajn specifajn uzojn de koloro kaj, kie necese, mane modifi/etendi ĉi tiujn defaŭltajn kolorojn por certigi taŭgajn kolorkontrastajn proporciojn.

Enhavo kiu devus esti vide kaŝita, sed resti alirebla por helpaj teknologioj kiel ekzemple ekranlegiloj, povas esti stilita uzante la .visually-hiddenklason. Tio povas esti utila en situacioj kie kromaj vidaj informoj aŭ signalvortoj (kiel ekzemple signifo indikita per la uzo de koloro) ankaŭ devas esti peritaj al nevidaj uzantoj.

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

Por videble kaŝitaj interagaj kontroloj, kiel tradiciaj "salti" ligiloj, uzu la .visually-hidden-focusableklason. Ĉi tio certigos, ke la kontrolo fariĝas videbla post kiam fokusita (por vidantaj klavaruzantoj). Atentu, kompare kun la ekvivalento .sr-onlykaj .sr-only-focusableklasoj en pasintaj versioj, Bootstrap 5 .visually-hidden-focusableestas memstara klaso, kaj ne devas esti uzata kombine kun la .visually-hiddenklaso.

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

Reduktita moviĝo

Bootstrap inkluzivas subtenon por la prefers-reduced-motionamaskomunikila funkcio . En retumiloj/medioj kiuj permesas al la uzanto specifi sian preferon por reduktita moviĝo, la plej multaj CSS-transiraj efikoj en Bootstrap (ekzemple, kiam modala dialogo estas malfermita aŭ fermita, aŭ la glita animacio en karuseloj) estos malŝaltitaj, kaj signifaj animacioj ( kiel ŝpiniloj) estos malrapidigitaj.

Ĉe retumiloj kiuj subtenas prefers-reduced-motion, kaj kie la uzanto ne eksplicite signalis ke ili preferus reduktitan moviĝon (t.e. kie prefers-reduced-motion: no-preference), Bootstrap ebligas glatan movadon uzante la scroll-behaviorposedaĵon.