Tagonklikheid

In koart oersjoch fan Bootstrap's funksjes en beheiningen foar it meitsjen fan tagonklike ynhâld.

Op dizze side

Bootstrap biedt in maklik te brûken ramt fan klearmakke stilen, layout-ark en ynteraktive komponinten, wêrtroch ûntwikkelders websiden en applikaasjes kinne meitsje dy't visueel oansprekkend, funksjoneel ryk en tagonklik binne bûten it fak.

Oersjoch en beheinings

De algemiene tagonklikens fan elk projekt boud mei Bootstrap hinget foar in grut part ôf fan 'e markup fan' e auteur, ekstra styling en skript dat se hawwe opnommen. Lykwols, op betingst dat dizze goed binne ymplementearre, soe it perfoarst mooglik wêze moatte om websiden en applikaasjes te meitsjen mei Bootstrap dy't foldogge oan WCAG 2.1 (A / AA / AAA), Seksje 508 , en ferlykbere tagonklikensnoarmen en easken.

Struktureel markearring

De styl en yndieling fan Bootstrap kinne wurde tapast op in breed skala oan markupstruktueren. Dizze dokumintaasje hat as doel ûntwikkelders foarbylden fan bêste praktyk te jaan om it gebrûk fan Bootstrap sels te demonstrearjen en passende semantyske markearring te yllustrearjen, ynklusyf manieren wêrop mooglike problemen mei tagonklikens kinne wurde oanpakt.

Ynteraktive komponinten

De ynteraktive komponinten fan Bootstrap - lykas modale dialoochfinsters, dellûkmenu's en oanpaste tooltips - binne ûntworpen om te wurkjen foar brûkers fan touch, mûs en toetseboerd. Troch it brûken fan relevante WAI - ARIA rollen en attributen, moatte dizze komponinten ek begryplik en operearje wurde mei helpende technologyen (lykas skermlêzers).

Om't de komponinten fan Bootstrap mei opsetsin ûntworpen binne om frij generyk te wêzen, moatte auteurs mooglik fierdere ARIA- rollen en attributen opnimme, lykas JavaScript-gedrach, om de krekte aard en funksjonaliteit fan har komponint krekter oer te bringen. Dit wurdt normaal opmurken yn 'e dokumintaasje.

Kleur kontrast

Guon kombinaasjes fan kleuren dy't op it stuit it standertpalet fan Bootstrap foarmje - brûkt yn it heule ramt foar dingen lykas knopfariaasjes, warskôgingsfariaasjes, yndikatoaren foar formuliervalidaasje - kinne liede ta ûnfoldwaande kleurkontrast (ûnder de oanrikkemandearre WCAG 2.1 tekstkleurkontrastferhâlding fan 4.5:1 en de WCAG 2.1 non-tekst kleurkontrastferhâlding fan 3: 1 ), benammen as brûkt tsjin in ljochte eftergrûn. Auteurs wurde oanmoedige om har spesifike gebrûk fan kleur te testen en, wêr nedich, dizze standertkleuren manuell te wizigjen / útwreidzje om te soargjen foar adekwate kleurkontrastferhâldingen.

Ynhâld dy't visueel ferburgen wêze moat, mar tagonklik bliuwt foar assistinte technologyen lykas skermlêzers, kin wurde styleare mei de .visually-hiddenklasse. Dit kin nuttich wêze yn situaasjes dêr't ekstra fisuele ynformaasje of oanwizings (lykas betsjutting oanjûn troch it brûken fan kleur) ek moatte wurde oerbrocht oan net-fisuele brûkers.

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

Foar visueel ferburgen ynteraktive kontrôles, lykas tradisjonele "skip" keppelings, brûk de .visually-hidden-focusableklasse. Dit sil derfoar soargje dat de kontrôle sichtber wurdt as ienris rjochte is (foar sichtbere toetseboerdbrûkers). Sjoch út, fergelike mei it ekwivalint .sr-onlyen .sr-only-focusableklassen yn eardere ferzjes, Bootstrap 5's .visually-hidden-focusableis in standalone klasse, en moat net brûkt wurde yn kombinaasje mei de .visually-hiddenklasse.

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

Fermindere beweging

Bootstrap omfettet stipe foar de prefers-reduced-motionmediafunksje . Yn browsers/omjouwings wêrmei't de brûker har foarkar foar fermindere beweging kin opjaan, sille de measte CSS-oergongseffekten yn Bootstrap (bygelyks as in modaal dialoochfinster iepene of sluten wurdt, of de glidende animaasje yn karrousels) útskeakele wurde, en sinfolle animaasjes ( lykas spinners) wurde fertrage.

Op browsers dy't stypje prefers-reduced-motion, en wêr't de brûker net eksplisyt hat oanjûn dat se leaver fermindere beweging wolle (dus wêr prefers-reduced-motion: no-preference), makket Bootstrap soepel rôlje mooglik mei it scroll-behavioreigendom.