Juurdepääsetavus
Lühiülevaade Bootstrapi funktsioonidest ja piirangutest juurdepääsetava sisu loomisel.
Bootstrap pakub lihtsalt kasutatavat valmisstiilide, paigutustööriistade ja interaktiivsete komponentide raamistikku, mis võimaldab arendajatel luua visuaalselt atraktiivseid, funktsionaalselt rikkalikke ja karbist väljas juurdepääsetavaid veebisaite ja rakendusi.
Ülevaade ja piirangud
Iga Bootstrapiga loodud projekti üldine juurdepääsetavus sõltub suuresti autori märgistustest, täiendavast stiilist ja skriptidest, mille nad on kaasanud. Kui aga need on õigesti rakendatud, peaks Bootstrapiga olema täiesti võimalik luua veebisaite ja rakendusi, mis vastavad WCAG 2.1 (A/AA/AAA), jaotisele 508 ja sarnastele juurdepääsetavuse standarditele ja nõuetele.
Struktuurne märgistus
Bootstrapi stiili ja paigutust saab rakendada paljudele märgistusstruktuuridele. Selle dokumentatsiooni eesmärk on pakkuda arendajatele parimate tavade näiteid, et demonstreerida Bootstrapi enda kasutamist ja illustreerida sobivat semantilist märgistust, sealhulgas viise, kuidas võimalikke juurdepääsetavuse probleeme lahendada.
Interaktiivsed komponendid
Bootstrapi interaktiivsed komponendid, nagu modaalsed dialoogid, rippmenüüd ja kohandatud tööriistavihjed, on loodud töötama puutetundliku, hiire ja klaviatuuri kasutajate jaoks. Asjakohaste WAI – ARIA rollide ja atribuutide kasutamise kaudu peaksid need komponendid olema arusaadavad ja kasutatavad abitehnoloogiate (nt ekraanilugejate) abil.
Kuna Bootstrapi komponendid on sihilikult kavandatud olema üsna üldised, võivad autorid oma komponendi täpse olemuse ja funktsionaalsuse täpsemaks edastamiseks lisada täiendavaid ARIA rolle ja atribuute ning JavaScripti käitumist. Tavaliselt on see dokumentides märgitud.
Värvi kontrast
Mõned värvikombinatsioonid, mis praegu moodustavad Bootstrapi vaikepaleti – mida kasutatakse kogu raamistikus selliste asjade jaoks nagu nuppude variatsioonid, hoiatuste variatsioonid, vormide kinnitamise indikaatorid – võivad põhjustada ebapiisava värvikontrastsuse (alla soovitatud WCAG 2.1 teksti värvikontrastsuse suhte 4,5:1 ja WCAG 2.1 mitteteksti värvi kontrastsuse suhe 3:1 ), eriti kui seda kasutatakse heledal taustal. Autoritel soovitatakse katsetada oma konkreetseid värvikasutusi ja vajaduse korral neid vaikevärve käsitsi muuta/laiendada, et tagada piisav värvikontrastsuse suhe.
Visuaalselt peidetud sisu
Sisu, mis peaks olema visuaalselt peidetud, kuid jääma abitehnoloogiatele (nt ekraanilugejatele) juurdepääsetavaks, saab .sr-only
klassi abil kujundada. See võib olla kasulik olukordades, kus täiendavat visuaalset teavet või näpunäiteid (nt värvi kasutamisega tähistatud tähendus) on vaja edastada ka mittevisuaalsetele kasutajatele.
<p class="text-danger">
<span class="sr-only">Danger: </span>
This action is not reversible
</p>
Visuaalselt peidetud interaktiivsete juhtelementide jaoks, nagu traditsioonilised vahelejätmise lingid, .sr-only
saab .sr-only-focusable
klassiga kombineerida. See tagab, et juhtnupp muutub pärast teravustamist nähtavaks (nägevatele klaviatuurikasutajatele).
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
Vähendatud liikumine
Bootstrap sisaldab prefers-reduced-motion
meediumifunktsiooni tuge . Brauserites/keskkondades, mis võimaldavad kasutajal määrata oma eelistuse vähendatud liikumisele, keelatakse enamus Bootstrapi CSS-i üleminekuefekte (näiteks modaalse dialoogi avamisel või sulgemisel või libiseva animatsiooni korral karussellides) ja sisukad animatsioonid ( nagu spinnerid) aeglustub.
Lisaressursid
- Veebisisu juurdepääsetavuse juhised (WCAG) 2.1
- Projekt A11Y
- MDN-i juurdepääsetavuse dokumentatsioon
- Tenon.io juurdepääsetavuse kontrollija
- Värvikontrastsuse analüsaator (CCA)
- Järjehoidja „HTML Codesniffer” juurdepääsetavuse probleemide tuvastamiseks
- Microsoft Accessibility Insights
- Deque Axe testimisriistad