Juurdepääsetavus

Lühiülevaade Bootstrapi funktsioonidest ja piirangutest juurdepääsetava sisu loomisel.

Sellel lehel

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 puute-, hiire- ja klaviatuurikasutajatele. 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.

Sisu, mis peaks olema visuaalselt peidetud, kuid jääma abitehnoloogiatele (nt ekraanilugejatele) juurdepääsetavaks, saab .visually-hiddenklassi 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="visually-hidden">Danger: </span>
  This action is not reversible
</p>

Visuaalselt peidetud interaktiivsete juhtelementide (nt traditsiooniliste vahelejätmise linkide) jaoks kasutage .visually-hidden-focusableklassi. See tagab, et juhtnupp muutub pärast teravustamist nähtavaks (nägevatele klaviatuurikasutajatele). Olge ettevaatlik, võrreldes varasemate versioonide samaväärsete .sr-onlyja .sr-only-focusableklassidega on Bootstrap 5 .visually-hidden-focusableeraldiseisev klass ja seda ei tohi .visually-hiddenklassiga koos kasutada.

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

Vähendatud liikumine

Bootstrap sisaldab prefers-reduced-motionmeediumifunktsiooni 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.

Brauserites, mis toetavad prefers-reduced-motion, ja kus kasutaja ei ole selgesõnaliselt märku andnud, et eelistab vähendatud liikumist (st kus prefers-reduced-motion: no-preference), võimaldab Bootstrap scroll-behavioratribuuti kasutades sujuvat kerimist.