Linien

Trennlinien sind zulässig, wenn inhaltlich oder funktional abgrenzbare größere Bereiche semantisch und auch optisch von einander getrennt dargestellt werden sollen. Dies schließt die rein dekorative Verwendung aus, stattdessen sollte bevorzugt Weißraum als trennendes Gestaltungsmittel eingesetzt werden.

Sollten Komponenten eigene, in allen Zusammenhängen einsetzbare horizontale, aber auch vertikale Trennlinien zwingend benötigen, dann müssen diese als CSS-Border der jeweiligen Komponente mitgegeben werden.

Screenreader geben das Vorkommen des <hr>-Elements als Abschnittstrennung aus. In durchgehenden Texten werden Trennlinien <hr> aber zum Verständnis der Struktur streng genommen nicht benötigt, wenn diese korrekt mit Überschriften ausgezeichnet wurde.

Trennlinien dienen oftmals nur rein gestalterischen Zwecken. Wenn sie aber als strukturierendes Element mit eigener Bedeutung eingesetzt werden, dann unterliegen sie auch den Kontrastanforderungen an Inhalte. In den überwiegenden Fällen genügt es aber, logische Bereiche über adäquaten Weißraum voneinander abzugrenzen, sodass Linien zu einem reinen Schmuckelement werden und von den Anforderungen ausgenommen sind.

Design über alle Breakpoints

Im Seitenrahmen können Trennlinien entweder über die volle Breite des Viewports verwendet werden, oder innerhalb einer Maske, um größere und stark eigenständige Bereiche von einander zu trennen.

Bilder werden für Trennlinien als reine HTML- & CSS-Elemente nicht benötigt.

Do’s and Dont’s