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 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 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
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.
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 .visually-hidden
luokan 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-only
ja 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 sisältää tuen prefers-reduced-motion
mediaominaisuutta varten . 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-behavior
ominaisuuden avulla.
Lisäresurssit
- Web Content Accessibility Guidelines (WCAG) 2.1
- A11Y-projekti
- MDN:n saavutettavuusdokumentaatio
- Tenon.io esteettömyystarkistus
- Värikontrastianalysaattori (CCA)
- "HTML Codesniffer" -kirjanmerkki esteettömyysongelmien tunnistamiseen
- Microsoft Accessibility Insights
- Deque Axe -testaustyökalut
- Johdatus Webin saavutettavuuteen