Tagonklikheid
In koart oersjoch fan Bootstrap's funksjes en beheiningen foar it meitsjen fan tagonklike ynhâld.
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.
Visueel ferburgen ynhâld
Ynhâld dy't visueel ferburgen wêze moat, mar tagonklik bliuwt foar assistinte technologyen lykas skermlêzers, kin wurde styleare mei de .visually-hidden
klasse. 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-focusable
klasse. 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-only
en .sr-only-focusable
klassen yn eardere ferzjes, Bootstrap 5's .visually-hidden-focusable
is in standalone klasse, en moat net brûkt wurde yn kombinaasje mei de .visually-hidden
klasse.
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
Fermindere beweging
Bootstrap omfettet stipe foar de prefers-reduced-motion
mediafunksje . 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-behavior
eigendom.
Oanfoljende middels
- Rjochtlinen foar tagonklikens foar webynhâld (WCAG) 2.1
- It A11Y-projekt
- MDN tagonklikens dokumintaasje
- Tenon.io Accessibility Checker
- Kleurkontrastanalysator (CCA)
- Blêdwizer "HTML Codesniffer" foar it identifisearjen fan tagonklikheidsproblemen
- Microsoft Accessibility Insights
- Deque Axe test ark
- Yntroduksje ta Web Tagonklikheid