Toeganklikheid

'n Kort oorsig van Bootstrap se kenmerke en beperkings vir die skep van toeganklike inhoud.

Op hierdie bladsy

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.

Inhoud wat visueel versteek moet word, maar toeganklik bly vir ondersteunende tegnologieë soos skermlesers, kan met behulp van die .visually-hiddenklas 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-focusableGebruik 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-onlyen .sr-only-focusableklasse in vorige weergawes, is Bootstrap 5's .visually-hidden-focusable'n selfstandige klas, en moet nie in kombinasie met die .visually-hiddenklas gebruik word nie.

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

Verminderde beweging

Bootstrap sluit ondersteuning vir die prefers-reduced-motionmediafunksie 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-behavioreiendom te gebruik.