Toeganklikheid
'n Kort oorsig van Bootstrap se kenmerke en beperkings vir die skep van toeganklike inhoud.
Bootstrap bied 'n maklik-om-te gebruik raamwerk van klaargemaakte style, uitlegnutsmiddels en interaktiewe komponente, wat ontwikkelaars in staat stel om webwerwe en toepassings te skep wat visueel aantreklik, funksioneel ryk en buite die boks toeganklik is.
Oorsig en beperkings
Die algehele toeganklikheid van enige projek wat met Bootstrap gebou is, hang grootliks af van die skrywer se opmaak, bykomende stilering en skrif wat hulle ingesluit het. Op voorwaarde dat dit egter korrek geïmplementeer is, behoort dit heeltemal moontlik te wees om webwerwe en toepassings met Bootstrap te skep wat voldoen aan WCAG 2.1 (A/AA/AAA), Artikel 508 , en soortgelyke toeganklikheidstandaarde en vereistes.
Strukturele opmaak
Bootstrap se stilering en uitleg kan op 'n wye reeks opmaakstrukture toegepas word. Hierdie dokumentasie het ten doel om ontwikkelaars van beste praktykvoorbeelde te voorsien om die gebruik van Bootstrap self te demonstreer en toepaslike semantiese opmaak te illustreer, insluitend maniere waarop potensiële toeganklikheidkwessies aangespreek kan word.
Interaktiewe komponente
Bootstrap se interaktiewe komponente—soos modale dialoë, aftrekkieslyste en pasgemaakte gereedskapwenke—is ontwerp om vir raak-, muis- en sleutelbordgebruikers te werk. Deur die gebruik van relevante WAI - ARIA - rolle en -kenmerke, moet hierdie komponente ook verstaanbaar en werkbaar wees met behulp van ondersteunende tegnologieë (soos skermlesers).
Omdat Bootstrap se komponente doelbewus ontwerp is om redelik generies te wees, sal skrywers dalk verdere ARIA - rolle en -kenmerke moet insluit, sowel as JavaScript-gedrag, om die presiese aard en funksionaliteit van hul komponent meer akkuraat oor te dra. Dit word gewoonlik in die dokumentasie opgemerk.
Kleur kontras
Sommige kombinasies van kleure wat tans Bootstrap se verstekpalet uitmaak—wat regdeur die raamwerk gebruik word vir dinge soos knoppievariasies, waarskuwingsvariasies, vormvalideringsaanwysers—kan lei tot onvoldoende kleurkontras (onder die aanbevole WCAG 2.1 tekskleurkontrasverhouding van 4.5:1 en die WCAG 2.1 nie-teks kleurkontrasverhouding van 3:1 ), veral wanneer dit teen 'n ligte agtergrond gebruik word. Skrywers word aangemoedig om hul spesifieke gebruike van kleur te toets en, waar nodig, hierdie verstekkleure met die hand te wysig/uit te brei om voldoende kleurkontrasverhoudings te verseker.
Visueel verborge inhoud
Inhoud wat visueel versteek moet word, maar toeganklik bly vir ondersteunende tegnologieë soos skermlesers, kan met behulp van die .visually-hidden
klas gestileer word. Dit kan nuttig wees in situasies waar addisionele visuele inligting of leidrade (soos betekenis aangedui deur die gebruik van kleur) ook aan nie-visuele gebruikers oorgedra moet word.
<p class="text-danger">
<span class="visually-hidden">Danger: </span>
This action is not reversible
</p>
.visually-hidden-focusable
Gebruik die klas vir visueel versteekte interaktiewe kontroles, soos tradisionele "skip"-skakels . Dit sal verseker dat die beheer sigbaar word sodra gefokus is (vir siende sleutelbordgebruikers). Pasop, in vergelyking met die ekwivalent .sr-only
en .sr-only-focusable
klasse in vorige weergawes, is Bootstrap 5's .visually-hidden-focusable
'n selfstandige klas, en moet nie in kombinasie met die .visually-hidden
klas gebruik word nie.
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
Verminderde beweging
Bootstrap sluit ondersteuning vir die prefers-reduced-motion
media-funksie in . In blaaiers/omgewings wat die gebruiker toelaat om hul voorkeur vir verminderde beweging te spesifiseer, sal die meeste CSS-oorgangseffekte in Bootstrap (byvoorbeeld wanneer 'n modale dialoog oop of toegemaak word, of die gly-animasie in karrousels) gedeaktiveer wees, en betekenisvolle animasies ( soos draaiers) sal vertraag word.
Op blaaiers wat ondersteun prefers-reduced-motion
, en waar die gebruiker nie uitdruklik aangedui het dat hulle verminderde beweging sou verkies nie (dws waar prefers-reduced-motion: no-preference
), maak Bootstrap gladde blaai moontlik deur die scroll-behavior
eiendom te gebruik.
Bykomende hulpbronne
- Webinhoudtoeganklikheidsriglyne (WCAG) 2.1
- Die A11Y-projek
- MDN toeganklikheid dokumentasie
- Tenon.io Toeganklikheidkontroler
- Kleurkontrasanaliseerder (CCA)
- "HTML Codesniffer" boekmerk vir die identifisering van toeganklikheid kwessies
- Microsoft Toeganklikheid Insigte
- Deque Axe-toetsgereedskap
- Inleiding tot webtoeganklikheid