Figma
OpenCodeDivider
Synonyme: Trenner, Separator, Window Splitter, Splitter, Horizonal rule, Trennlinie
Ähnliche Komponenten: –
Kurzbeschreibung
Ein Divider unterteilt Inhaltsblöcke visuell in verschiedene Gruppen und kann eine Hierarchie aufbauen.
Beispiele
Code anzeigen
<hr class="kern-divider" aria-hidden="true" />Beschreibung
Ein Divider ist eine einfache horizontale Linie. Er kann in voller Seitenbreite eingesetzt werden oder schmalere Inhaltsblöcke visuell unterteilen. Divider können Hierachie schaffen, um verschachtelte Beziehungen anzuzeigen.
Verwendungsregeln
Divider können größere Abschnitte mit unabhängigen Inhalten trennen. Sie sollen die Informationshierarchie auf der Seite unterstützen. Divider können auch in anderen Komponenten verwendet werden. Nutze die „Space“-Token für Abstände ober- und unterhalb des Dividers.
Dos und Don’ts
Nutze Divider nur in der vorgegebenen Farbe.
Weitere Hinweise
- Divider sollten zum Strukturieren von Elementen verwendet werden, wenn Elemente nicht mit Freiraum gruppiert werden können.
- Verwende Divider nur sparsam. Zu viele Trennlinien lassen eine Anwendung unübersichtlich erscheinen.
Barrierefreiheit
Die Barrierefreiheit unserer Komponenten wird nach der Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) geprüft, die auf der europäischen Norm EN 301 549 basiert. Diese legt Anforderungen an die Zugänglichkeit von Informations- und Kommunikationstechnologien (IKT) fest und orientiert sich an den WCAG 2.1. Die für Webinhalte relevanten Kriterien sind in Kapitel 9 der EN 301 549 beschrieben und übernehmen die Nummerierung der WCAG-Kriterien, ergänzt um eine führende 9 – z. B. wird aus WCAG 2.4.3 „Focus Order“ das Kriterium 9.2.4.3.
Da bereits an einer Aktualisierung der EN 301 549 gearbeitet wird, haben wir uns entschieden, alle dort referenzierten Kriterien schon jetzt anhand der WCAG 2.2 zu prüfen und zu dokumentieren. So stellen wir sicher, dass unser Design-System den kommenden europäischen Standards voraus ist und langfristig barrierefrei bleibt.
Bestanden
Folgendes ist bereits geprüft und erfüllt, vorausgesetzt die Komponente wird wie in den Code-Beispielen gezeigt verwendet:
WCAG 1.1.1
Dekorative Divider sind vor Screenreadern verborgen
WCAG 1.3.1
Divider sind programmatisch als Trennelement erkennbar
WCAG 1.4.1
Trennung wird nicht nur durch Farbe vermittelt
WCAG 1.4.6
Divider erfüllen das minimale Kontrastverhältnis von 3:1
WCAG 1.4.11
Divider heben sich mit mindestens 3:1 Kontrast vom Umfeld ab
Siehe auch: BFIT Handreichungen