Accessibilitéit

E kuerzen Iwwerbléck iwwer d'Features an d'Aschränkungen vun Bootstrap fir d'Schafung vun zougänglechen Inhalt.

Op dëser Säit

Bootstrap bitt en einfach ze benotzen Kader vu fäerdege Stiler, Layout-Tools an interaktive Komponenten, wat d'Entwéckler erlaabt Websäiten an Uwendungen ze kreéieren déi visuell attraktiv, funktionell räich an aus der Këscht zougänglech sinn.

Iwwersiicht an Aschränkungen

D'allgemeng Accessibilitéit vun all Projet gebaut mat Bootstrap hänkt zu engem groussen Deel vum Auteur d'Markup, zousätzlech Styling, a Skript se abegraff. Wéi och ëmmer, virausgesat datt dës korrekt ëmgesat goufen, sollt et perfekt méiglech sinn Websäiten an Uwendungen mat Bootstrap ze kreéieren déi WCAG 2.1 (A/AA/AAA), Section 508 an ähnlech Accessibilitéitsnormen an Ufuerderunge erfëllen.

Strukturell Markup

De Styling an de Layout vum Bootstrap kënnen op eng breet Palette vu Markupstrukturen applizéiert ginn. Dës Dokumentatioun zielt d'Entwéckler mat beschten Praxis Beispiller ze bidden fir d'Benotzung vu Bootstrap selwer ze demonstréieren an entspriechend semantesch Markup ze illustréieren, inklusiv Weeër wéi potenziell Accessibilitéitsprobleemer kënne behandelt ginn.

Interaktiv Komponenten

Bootstrap's interaktive Komponenten - wéi modal Dialoger, Dropdown-Menüen, a personaliséiert Tooltips - sinn entwéckelt fir Touch, Maus a Keyboard Benotzer ze schaffen. Duerch d'Benotzung vun relevante WAI - ARIA Rollen an Attributer, sollten dës Komponenten och verständlech an operabel sinn mat Hëllefstechnologien (wéi Écran Lieser).

Well d'Komponente vum Bootstrap bewosst entworf sinn zimlech generesch ze sinn, kënnen d'Auteuren eventuell weider ARIA Rollen an Attributer mussen enthalen, souwéi JavaScript Verhalen, fir méi präzis d'präzis Natur an d'Funktionalitéit vun hirer Komponent ze vermëttelen. Dëst ass normalerweis an der Dokumentatioun festgestallt.

Faarf Kontrast

E puer Kombinatioune vu Faarwen, déi am Moment dem Bootstrap seng Standardpalette ausmaachen - am ganze Kader benotzt fir Saache wéi Knäppervariatioune, Alarmvariatioune, Formvalidatiounsindikatoren - kënnen zu net genuch Faarfkontrast féieren (ënnert dem recommandéierte WCAG 2.1 Text Faarfkontrast Verhältnis vu 4.5:1 an de WCAG 2.1 Net-Text Faarfkontrast Verhältnis vun 3:1 ), besonnesch wann se géint e liichtem Hannergrond benotzt. Auteure ginn encouragéiert hir spezifesch Benotzung vu Faarf ze testen an, wann néideg, dës Standardfaarwen manuell z'änneren / ze verlängeren fir adäquat Faarfkontrastverhältnisser ze garantéieren.

Inhalt dee visuell verstoppt soll sinn, awer zougänglech bleift fir Hëllefstechnologien wéi Bildschirm Lieser, ka mat der .visually-hiddenKlass styléiert ginn. Dëst kann nëtzlech sinn a Situatiounen, wou zousätzlech visuell Informatioun oder Hiweiser (wéi d'Bedeitung, déi duerch d'Benotzung vu Faarf bezeechent gëtt) och un net-visuelle Benotzer vermëttelt musse ginn.

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

Fir visuell verstoppt interaktiv Kontrollen, wéi traditionell "Sprangen" Linken, benotzt d' .visually-hidden-focusableKlass. Dëst wäert suergen datt d'Kontroll siichtbar gëtt eemol fokusséiert (fir gesinn Keyboard Benotzer). Opgepasst, am Verglach zum Äquivalent .sr-onlya .sr-only-focusableKlassen a fréiere Versiounen, Bootstrap 5's .visually-hidden-focusableass eng standalone Klass, a däerf net a Kombinatioun mat der .visually-hiddenKlass benotzt ginn.

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

Reduzéiert Bewegung

Bootstrap enthält Ënnerstëtzung fir d' prefers-reduced-motionMedien Feature . A Browser / Ëmfeld, déi de Benotzer erlaben hir Präferenz fir reduzéierter Bewegung ze spezifizéieren, ginn déi meescht CSS Iwwergangseffekter am Bootstrap (zum Beispill wann e modalen Dialog op oder zougemaach ass, oder d'Rutschanimatioun a Karussell) ausgeschalt, a sënnvoll Animatiounen ( wéi Spinner) wäerte verlangsamt ginn.

Op Browser déi ënnerstëtzen prefers-reduced-motion, a wou de Benotzer net explizit signaliséiert huet datt se reduzéiert Bewegung léiwer maachen (dh wou prefers-reduced-motion: no-preference), erméiglecht Bootstrap glat Scrollen mat der scroll-behaviorImmobilie.