Nuclos barrierefreie Layouts: BITV 2.0/WCAG 2.1, vollständige Labels, Überschriften, Tastaturnavigation, Kontraste, visually-hidden. |
Sprache: Deutsch · English
Layouts im Web Client barrierearm gestalten – Labels, Struktur, Tastaturnavigation, Kontraste (BITV/WCAG).
Auf dieser Seite |
Nuclos bietet die Voraussetzungen für einen barrierefreien Web Client nach BITV 2.0 / EN 301 549 / WCAG 2.1. Diese Seite fasst die wichtigsten Techniken für barrierearme Layouts zusammen.
Je einfacher (möglichst lineare) das Layout, desto leichter die Bedienung. Für den Web Client ggf. ein separates Layout anlegen (Schlüssel |
for-Attribut auf das Eingabefeld – ohne Label erkennen Screenreader die Feldfunktion nicht.<h1>…<h6> (statische HTML-Komponente) statt nur optischer Panels.Alle Layoutelemente über Nächstes Feld oder Nächste Komponente verknüpfen (nur eines, eindeutige Namen). Der entstehende Graph muss ein geschlossener Kreis sein und alle Elemente müssen sichtbar sein. Auch inaktive Felder und Texte mit Links aufnehmen. Tab-Panels: erstes navigierbares Element in jedem Tab braucht denselben Namen (Dummy-Element).
Inhalte müssen bei 400 % Zoom (1280px) bzw. 320px ohne horizontales Scrollen erreichbar sein – einspaltige Anordnung empfohlen. Informationstragende Grafiken/Bedienelemente brauchen mindestens 3:1 Kontrast.
Für Hinweise an Hilfstechnologien gibt es eine mitgelieferte CSS-Klasse:
.visually-hidden {
position: absolute !important;
width: 1px !important; height: 1px !important;
padding: 0 !important; margin: -1px !important;
overflow: hidden !important; clip: rect(0,0,0,0) !important;
white-space: nowrap !important; border: 0 !important;
} |
Alt-Texte: informative Bilder brauchen einen Alt-Text, rein dekorative ein leeres |