Barrierefreiheit

Ein kurzer Überblick über die Funktionen und Einschränkungen von Bootstrap für die Erstellung barrierefreier Inhalte.

Auf dieser Seite

Bootstrap bietet ein benutzerfreundliches Framework aus vorgefertigten Stilen, Layout-Tools und interaktiven Komponenten, mit denen Entwickler Websites und Anwendungen erstellen können, die optisch ansprechend, funktionsreich und sofort zugänglich sind.

Übersicht und Einschränkungen

Die allgemeine Zugänglichkeit eines Projekts, das mit Bootstrap erstellt wurde, hängt zum großen Teil vom Markup des Autors, zusätzlichen Stilen und Skripten ab, die sie hinzugefügt haben. Sofern diese jedoch korrekt implementiert wurden, sollte es durchaus möglich sein, Websites und Anwendungen mit Bootstrap zu erstellen, die WCAG 2.1 (A/AA/AAA), Abschnitt 508 und ähnliche Zugänglichkeitsstandards und -anforderungen erfüllen.

Strukturelles Markup

Das Styling und Layout von Bootstrap kann auf eine Vielzahl von Markup-Strukturen angewendet werden. Diese Dokumentation zielt darauf ab, Entwicklern Best-Practice-Beispiele zur Verfügung zu stellen, um die Verwendung von Bootstrap selbst zu demonstrieren und geeignetes semantisches Markup zu veranschaulichen, einschließlich Möglichkeiten, wie potenzielle Bedenken hinsichtlich der Barrierefreiheit angegangen werden können.

Interaktive Komponenten

Die interaktiven Komponenten von Bootstrap – wie modale Dialoge, Dropdown-Menüs und benutzerdefinierte QuickInfos – sind so konzipiert, dass sie für Benutzer mit Berührung, Maus und Tastatur funktionieren. Durch die Verwendung relevanter WAI - ARIA -Rollen und -Attribute sollen diese Komponenten auch mit unterstützenden Technologien (z. B. Screenreadern) verständlich und bedienbar sein.

Da die Komponenten von Bootstrap absichtlich ziemlich generisch gestaltet sind, müssen Autoren möglicherweise weitere ARIA - Rollen und -Attribute sowie JavaScript-Verhalten einbeziehen, um die genaue Art und Funktionalität ihrer Komponente genauer zu vermitteln. Dies ist in der Regel in der Dokumentation vermerkt.

Farbkontrast

Einige Farbkombinationen, die derzeit die Standardpalette von Bootstrap bilden – die im gesamten Framework für Dinge wie Schaltflächenvariationen, Warnungsvariationen, Formularvalidierungsindikatoren verwendet werden – können zu einem unzureichenden Farbkontrast führen (unter dem empfohlenen WCAG 2.1-Textfarbkontrastverhältnis von 4,5:1). und das WCAG 2.1 Nicht-Text-Farbkontrastverhältnis von 3:1 ), insbesondere wenn es vor einem hellen Hintergrund verwendet wird. Autoren werden ermutigt, ihre spezifische Verwendung von Farben zu testen und diese Standardfarben bei Bedarf manuell zu ändern/erweitern, um angemessene Farbkontrastverhältnisse sicherzustellen.

Inhalte, die visuell ausgeblendet werden sollen, aber für Hilfstechnologien wie Screenreader zugänglich bleiben, können mithilfe der .visually-hiddenKlasse gestaltet werden. Dies kann in Situationen nützlich sein, in denen zusätzliche visuelle Informationen oder Hinweise (z. B. durch die Verwendung von Farbe gekennzeichnete Bedeutung) auch nicht visuellen Benutzern übermittelt werden müssen.

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

Verwenden Sie die Klasse für visuell verborgene interaktive Steuerelemente, wie z. B. herkömmliche „Skip“-Links .visually-hidden-focusable. Dadurch wird sichergestellt, dass das Steuerelement sichtbar wird, sobald es fokussiert ist (für sehende Tastaturbenutzer). Achtung, im Vergleich zu den Äquivalenten .sr-onlyund .sr-only-focusableKlassen in früheren Versionen ist Bootstrap 5 .visually-hidden-focusableeine eigenständige Klasse und darf nicht in Kombination mit der .visually-hiddenKlasse verwendet werden.

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

Reduzierte Bewegung

Bootstrap enthält Unterstützung für die prefers-reduced-motionMedienfunktion . In Browsern/Umgebungen, in denen der Benutzer seine Präferenz für reduzierte Bewegung angeben kann, werden die meisten CSS-Übergangseffekte in Bootstrap (z. B. wenn ein modales Dialogfeld geöffnet oder geschlossen wird oder die Gleitanimation in Karussells) deaktiviert und sinnvolle Animationen ( wie Spinner) werden verlangsamt.

Bei Browsern, die unterstützen prefers-reduced-motionund bei denen der Benutzer nicht explizit signalisiert hat, dass er eine reduzierte Bewegung bevorzugen würde (dh wo prefers-reduced-motion: no-preference), ermöglicht Bootstrap unter Verwendung der scroll-behaviorEigenschaft ein reibungsloses Scrollen.