Source

Esteettömyys

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

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 kuitenkin nämä on toteutettu oikein, Bootstrapilla pitäisi olla täysin mahdollista luoda verkkosivustoja ja sovelluksia, jotka täyttävät WCAG 2.0 (A/AA/AAA), Section 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 komponenttien 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äytymistä, jotta osansa tarkka luonne ja toiminnallisuus voidaan ilmaista tarkemmin. Tämä on yleensä mainittu asiakirjoissa.

Värikontrasti

Useimmat värit, jotka tällä hetkellä muodostavat Bootstrapin oletuspaletin – joita käytetään kaikkialla kehyksessä esimerkiksi painikemuunnelmiin, hälytysmuunnelmiin ja lomakkeiden vahvistusilmaisimiin – johtavat riittämättömään värikontrastiin (alle WCAG 2.0:n suositellun värikontrastisuhteen 4,5:1 ), kun niitä käytetään vaalea tausta. Kirjoittajien on muokattava/laajennettava näitä oletusvärejä manuaalisesti riittävän värikontrastisuhteen varmistamiseksi.

Visuaalisesti piilotettu sisältö

Sisältöä, jonka tulee olla visuaalisesti piilotettu, mutta joka on edelleen aputekniikoiden, kuten näytönlukuohjelmien, käytettävissä, voidaan muotoilla .sr-onlyluokan 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="sr-only">Danger: </span>
  This action is not reversible
</p>

Visuaalisesti piilotettuja interaktiivisia ohjaimia, kuten perinteisiä ohituslinkkejä, .sr-onlyvoidaan yhdistää .sr-only-focusableluokkaan. Tämä varmistaa, että säädin tulee näkyviin, kun se on kohdistettu (näkeville näppäimistön käyttäjille).

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

Lisäresurssit