Irisgarritasuna

Bootstrap-en ezaugarri eta mugen ikuspegi laburra eduki eskuragarria sortzeko.

Orrialde honetan

Bootstrap-ek prest egindako estiloen, diseinu-tresnen eta osagai interaktiboen esparru erabilerraza eskaintzen du, garatzaileek bisualki erakargarriak, funtzionalki aberatsak eta eskuragarri dauden webguneak eta aplikazioak sortzeko aukera emanez.

Ikuspegi orokorra eta mugak

Bootstrap-ekin eraikitako edozein proiekturen irisgarritasun orokorra egilearen markaketaren, estilo osagarrien eta sartu dituzten scripten araberakoa da hein handi batean. Hala ere, hauek behar bezala inplementatu badira, guztiz posiblea izan beharko litzateke WCAG 2.1 (A/AA/AAA), 508. artikulua eta antzeko irisgarritasun estandarrak eta baldintzak betetzen dituzten Bootstrap-ekin webguneak eta aplikazioak sortzea.

Egiturazko markaketa

Bootstrap-en estiloa eta diseinua marka-egitura ugaritan aplika daitezke. Dokumentazio honek garatzaileei praktika onen adibideak eskaini nahi dizkie Bootstrap bera erabiltzen erakusteko eta markaketa semantiko egokia erakusteko, erabilerraztasun-arazo potentzialak konpontzeko moduak barne.

Osagai interaktiboak

Bootstrap-en osagai interaktiboak (adibidez, elkarrizketa modalak, goitibeherako menuak eta tresna-aholku pertsonalizatuak) ukipen, sagua eta teklatuaren erabiltzaileentzat funtzionatzeko diseinatuta daude. WAI - ARIA rol eta atributu garrantzitsuak erabiliz, osagai horiek ulergarriak eta funtzionagarriak izan behar dute teknologia laguntzaileak erabiliz (pantaila-irakurgailuak, esaterako).

Bootstrap-en osagaiak nahiko generikoak izateko diseinatuta daudenez, baliteke egileek ARIA rol eta atributu gehiago sartu behar izatea, baita JavaScript portaera ere, beren osagaiaren izaera eta funtzionaltasun zehatza zehatzago helarazteko. Hori dokumentazioan adierazi ohi da.

Kolore kontrastea

Gaur egun Bootstrap-en paleta lehenetsia osatzen duten kolore-konbinazio batzuek —esparru osoan erabiltzen dira, hala nola, botoien aldaerak, alerta aldaerak, inprimakiak baliozkotzeko adierazleak— kolore- kontraste nahikoa ez izatea ekar dezakete ( 4,5:1eko gomendatutako WCAG 2.1 testuaren kolore-kontraste-ratioaren azpitik). eta WCAG 2.1 testua ez den kolore-kontraste-erlazioa 3:1 ), batez ere atzeko plano argi baten aurka erabiltzen denean. Egileei kolorearen erabilera espezifikoak proba ditzatela gomendatzen zaie eta, beharrezkoa denean, eskuz aldatzea/zabaltzea kolore lehenetsiak kolore-kontraste-ratio egokiak bermatzeko.

Ikusmen ezkutatuta egon behar den edukia, baina laguntza-teknologietarako eskuragarria izaten jarraitzen du, hala nola pantaila-irakurgailuak, .visually-hiddenklasea erabiliz estiloa jar daiteke. Hau erabilgarria izan daiteke ikusizko informazio edo seinale osagarriak (adibidez, kolorearen erabileraren bidez adierazten den esanahia) erabiltzaile ez direnei ere helarazi behar zaizkien egoeretan.

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

Ikusmen ezkutatuta dauden kontrol interaktiboetarako, hala nola "saltatzeko" estek tradizionalak, erabili .visually-hidden-focusableklasea. Honek kontrola ikusgarri bihurtzen dela ziurtatuko du fokatuta dagoenean (teklatuaren erabiltzaile ikusgarrientzat). Kontuz, aurreko bertsioetako baliokidearekin .sr-onlyeta klaseekin alderatuta, Bootstrap 5- a klase autonomoa da, eta ez da klasearekin batera erabili behar..sr-only-focusable.visually-hidden-focusable.visually-hidden

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

Mugimendu murriztua

Bootstrap-ek prefers-reduced-motionmultimedia funtziorako euskarria dakar . Erabiltzaileak mugimendua murrizteko lehentasuna zehaztea ahalbidetzen duten arakatzaile/inguruneetan, Bootstrap-en CSS trantsizio-efektu gehienak (adibidez, elkarrizketa-koadroa irekitzen edo ixten denean edo karruseletan irristakorra den animazioa) desgaitu egingo dira eta animazio esanguratsuak ( hala nola, spinners) moteldu egingo da.

Onartzen duten arakatzaileetan prefers-reduced-motion, eta erabiltzaileak espresuki adierazi ez duen mugimendu murriztua nahiago duela (hau da, non prefers-reduced-motion: no-preference), Bootstrap-ek propietatea erabiliz korritze leuna ahalbidetzen du scroll-behavior.