Barrierefreiheit
Ein kurzer Überblick über die Funktionen und Einschränkungen von Bootstrap für die Erstellung barrierefreier Inhalte.
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.
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.0 (A/AA/AAA), Abschnitt 508 und ähnliche Zugänglichkeitsstandards und -anforderungen erfüllen.
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.
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.
Die meisten Farben, die derzeit die Standardpalette von Bootstrap bilden – die im gesamten Framework für Dinge wie Schaltflächenvariationen, Warnungsvariationen, Formularvalidierungsindikatoren verwendet werden – führen zu einem unzureichenden Farbkontrast (unterhalb des empfohlenen WCAG 2.0-Farbkontrastverhältnisses von 4,5:1 ), wenn sie dagegen verwendet werden einen hellen Hintergrund. Autoren müssen diese Standardfarben manuell ä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 .sr-onlyKlasse 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="sr-only">Danger: </span>
This action is not reversible
</p>Für visuell versteckte interaktive Steuerelemente, wie z. B. traditionelle „Skip“-Links, .sr-onlykönnen sie mit der .sr-only-focusableKlasse kombiniert werden. Dadurch wird sichergestellt, dass das Steuerelement sichtbar wird, sobald es fokussiert ist (für sehende Tastaturbenutzer).
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>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) deaktiviert. Derzeit ist die Unterstützung auf Safari unter macOS und iOS beschränkt.