Esteettömyys

Lyhyt katsaus Bootstrapin ominaisuuksiin ja esteettömän sisällön luomisen rajoituksiin.

Tällä sivulla

Bootstrap tarjoaa valmiita tyylejä, asettelutyökaluja ja interaktiivisia komponentteja sisältävän helppokäyttöisen kehyksen, jonka avulla kehittäjät voivat luoda web-sivustoja ja sovelluksia, jotka ovat visuaalisesti houkuttelevia, toiminnallisesti monipuolisia ja helposti saatavilla.

Yleiskatsaus ja rajoitukset

Minkä tahansa Bootstrapilla rakennetun projektin yleinen käytettävyys riippuu suurelta osin tekijän merkinnöistä, lisätyylistä ja skriptistä. Jos nämä on kuitenkin toteutettu oikein, Bootstrapilla pitäisi olla täysin mahdollista luoda verkkosivustoja ja sovelluksia, jotka täyttävät WCAG 2.1 (A/AA/AAA), § 508 ja vastaavat saavutettavuusstandardit ja -vaatimukset.

Rakenteellinen merkintä

Bootstrapin tyyliä ja asettelua voidaan soveltaa monenlaisiin merkintärakenteisiin. Tämän dokumentaation tarkoituksena on tarjota kehittäjille esimerkkejä parhaista käytännöistä, jotka osoittavat itse Bootstrapin käytön ja havainnollistavat asianmukaisia semanttisia merkintöjä, mukaan lukien tapoja, joilla mahdollisia saavutettavuusongelmia voidaan käsitellä.

Interaktiiviset komponentit

Bootstrapin interaktiiviset komponentit, kuten modaaliset valintaikkunat, avattavat valikot ja mukautetut työkaluvihjeet, on suunniteltu toimimaan kosketuksen, hiiren ja näppäimistön käyttäjille. Asianmukaisten WAI - ARIA - roolien ja -attribuuttien käytön ansiosta näiden osien tulee myös olla ymmärrettäviä ja käytettäviksi aputekniikoilla (kuten näytönlukuohjelmilla).

Koska Bootstrapin komponentit on tarkoituksella suunniteltu melko yleisiksi, tekijöiden on ehkä sisällytettävä muita ARIA - rooleja ja -attribuutteja sekä JavaScript-käyttäytyminen, jotta osansa täsmällinen luonne ja toiminnallisuus voidaan ilmaista tarkemmin. Tämä on yleensä mainittu asiakirjoissa.

Värikontrasti

Jotkin Bootstrapin oletuspaletin tällä hetkellä muodostavat väriyhdistelmät – joita käytetään kaikkialla kehyksessä esimerkiksi painikemuunnelmiin, hälytysmuunnelmiin ja lomakkeiden vahvistusilmaisimiin – voivat johtaa riittämättömään värikontrastiin (alle suositeltua WCAG 2.1 -tekstin värikontrastisuhdetta 4,5:1 ja WCAG 2.1 ei-tekstin värikontrastisuhde 3:1 ), erityisesti käytettäessä vaaleaa taustaa vasten. Kirjoittajia kehotetaan testaamaan erityisiä värien käyttötarkoituksiaan ja tarvittaessa manuaalisesti muokkaamaan/laajentamaan näitä oletusvärejä riittävän värikontrastisuhteen varmistamiseksi.

Sisältöä, jonka tulee olla visuaalisesti piilotettu, mutta joka on edelleen aputekniikoiden, kuten näytönlukuohjelmien, käytettävissä, voidaan muotoilla .visually-hiddenluokan avulla. Tämä voi olla hyödyllistä tilanteissa, joissa visuaalista lisätietoa tai vihjeitä (kuten värin avulla ilmaistua merkitystä) on välitettävä myös muille kuin visuaalisille käyttäjille.

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

Käytä luokkaa visuaalisesti piilotetuille interaktiivisille säätimille, kuten perinteisille "ohita" .visually-hidden-focusable-linkeille. Tämä varmistaa, että säädin tulee näkyviin, kun se on kohdistettu (näkeville näppäimistön käyttäjille). Varo, verrattuna aiempien versioiden vastaaviin .sr-onlyja luokkiin, Bootstrap 5 on itsenäinen luokka, eikä sitä saa käyttää yhdessä luokan kanssa..sr-only-focusable.visually-hidden-focusable.visually-hidden

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

Vähentynyt liike

Bootstrap tukee prefers-reduced-motionmediaominaisuutta . Selaimissa/ympäristöissä, joissa käyttäjä voi määrittää haluamansa liikkeen vähentämisen, useimmat Bootstrapin CSS-siirtymätehosteet (esimerkiksi kun modaalinen valintaikkuna avataan tai suljetaan tai liukuva animaatio karuselleissa) poistetaan käytöstä, ja merkitykselliset animaatiot ( kuten spinners) hidastuu.

Selaimissa, jotka tukevat prefers-reduced-motion, ja joissa käyttäjä ei ole nimenomaisesti ilmoittanut haluavansa vähentää liikettä (eli missä prefers-reduced-motion: no-preference), Bootstrap mahdollistaa sujuvan vierityksen scroll-behaviorominaisuuden avulla.