Trennlinien - Grenzen zwischen Bereichen einer Seite
[Materialsammlung]

Bedeutung von Trennlinien

Trennlinien sind horizontale Linien zwischen Seitenbereichen. Sie unterstützen die visuelle Strukturierung von Seitenelementen.

Für Sehbehinderte, die einen Screen Reader benützen, muss die Abgrenzung zwischen Seitenbereichen semantisch erfolgen. Wenn dies gegeben ist, wird die visuelle Trennung zweckmäßigerweise für den Screen Reader verborgen.

Die semantische Trennung von Seitenbereichen korrekt umzusetzen, ist eine Hauptaufgabe des Barrierefreien Web Designs. Grafische Trennlinien optimal einzusetzen, ist Inhalt dieses Artikels.

HTML Trennlinien

HTML sieht für horizontale Trennlinien das <hr>-Tag vor. Die Darstellung kann etwa folgendermaßen aussehen:

CSS Formatierung des <hr>-Elements

Das visuelle Erscheinungsbild des <hr>-Elements kann mit Stylesheets festgelegt werden. Auf diese Weise können nicht nur Farbe und Größe einer Trennlinie festgelegt werden, sondern auch der vertikale Abstand zu benachbarten Seitenelementen.

Der Code in der CSS-Datei kann etwa folgendermaßen aussehen:

hr {
  background-color: darkgreen;
  border: none;
  height: .2ex;
  margin-bottom: 1.0ex;
}

Screen Reader-Verhalten bei <hr>-Elementen

Screen Reader sagen in der Standardkonfiguration das Vorkommen des <-hr>-Elements an. Dadurch gibt der Screen Reader semantisch wieder, dass visuell eine Abschnittstrennung vorkommt. In einem Text, der semantisch korrekt mit HTML – Elementen, etwa für Überschriften, gekennzeichnet ist, werden HTML Trennlinien zum semantischen Verständnis eigentlich nicht benötigt.

Visuelle Trennlinien können daher in diesem Fall mittels aria-hidden="true" für den Screen Reader verborgen werden.

Visuelle Trennlinien mit CSS realisieren

In einem semantisch gut strukturierten Text sind HTML-Trennlinien überflüssig. Für die visuelle Wahrnehmung der Seitenstruktur können Trennlinien jedoch hilfreich sein. In diesem Fall ist es zweckmäßig, eine rein visuelle Trennlinie mittels Stylesheets vorzusehen.

Beispiel 1: Trennlinie vor Überschriften

Mit folgendem Eintrag in die CSS-Datei wird oberhalb jeder Überschrift der Ebene 2 eine dunkelrote Linie angezeigt.

h2 {
  border-top: solid 1px darkred;
}

Beispiel 2: Trennlinie hinter <div>-Bereichen

Mit folgendem Eintrag in die CSS-Datei wird unterhalb jedes <div;-Bereichs mit der CSS-Klasse section eine dunkelrote Linie eingeblendet.

.section {
  border-bottom: solid 1px darkred;
}

ARIA role="separator"

Bedeutung des separator-Attributs

Auch die ARIA stellen mit dem Rollenattribut Separator eine Möglichkeit zur Kennzeichnung von Trennelementen zur Verfügung. Mit Stand April 2018 kann ich auf Grund der mangelhaften Umsetzung in Screen Readern und der überwiegend zu bevorzugenden Techniken mittels HTML und CSS die Verwendung dieses Attributs nicht empfehlen. In HTML sollte daher für schlichte Trennlinien weiterhin das HR-Element eingesetzt werden.

Vorgesehen sind zwei Arten von ARIA Separatoren:

Statischer ARIA Separator

Das Attribut kann zunächst für ein statisches Strukturelement verwendet werden, das nur eine visuelle Grenze repräsentiert. Typischerweise repräsentiert ein solches Element eine Grenze zwischen Elementen eines Untermenüs oder zwischen Seitensektionen.

Typischerweise könne ein fixierter Separator für ein Element zum Ein- oder Ausblenden von Inhalten verwendet werden (Accordion). Ich würde sagen, dass für diese Funktionalitäten präziser und effektiver ein Button verwendet wird, der möglicherweise auch in einer Überschrift eingebettet sein sollte.

Dynamischer ARIA Separator

Das role="separator"-Attribut kann laut Spezifikation auch für ein fokussierbares, interactives Element verwendet werden, das etwa auch verschoben werden kann. Mir ist bislang noch kein alltägliches Szenario untergekommen, bei dem diese Funktionalitäten nötig wären oder nicht durch andere Technologien besser realisiert werden könnten. Meine Überlegungen beziehen sich jedoch hauptsächlich auf Webdokumente und nicht Webanwendungen.

Als Möglichkeit wird angegeben, einen fokussierbaren Separator zur Realisierung eines verschiebbaren Trennelements zu realisieren. Eine Möglichkeit, die wohl nur selten und dann bei Anwendungen von Nutzen sein kann.

Ein fokussierbarer Separator muss den Wert von aria-valuenow auf eine Zahl setzen, welche die aktuelle Position wiedergibt und den Wert bei einer Änderung aktualisieren. Daneben sollte der Wert für aria-valuemin festgelegt sein, sofern er nicht dem Standardwert 0 entspricht, und für aria-valuemax, sofern er nicht dem Standardwert 100 entspricht.

In Anwendungen, die mehr als einen fokussierbaren Separator enthalten, sollte jeder Separator eine individuelle Bezeichnung (accessible name) erhalten. Dadurch wird die Verständlichkeit nicht nur für den Typ des Elements, sondern für dessen Bedeutung im inhaltlichen Kontext verbessert.

Links zum separator-Attribut

• WAI ARIA role="separator" Spezifikation
• WAI ARIA Authoring Practices 1.1: Window Splitter

Zeichenketten als visuelle Trennlinien

Gelegentlich wird als Trennlinien eine Zeile mit Einzelzeichen aus Bindestrichen (---), Unterstrichen (___) oder Sternchen (***) als Trennlinie verwendet. Dies führt bei der Verwendung von Screen Readern zu einer äußerst ärgerlichen akustischen Wiedergabe, insbesondere, wenn sich zwischen den einzelnen Zeichen auch noch Leerzeichen befinden.

Screen Reader reduzieren meist in der Standardkonfiguration eine Kette von gleichen Zeichen bei der Wiedergabe auf drei Wiedergaben. Wenn also eine Reihe von Einzelzeichen in einer Zeichenkette zur visuellen Trennung von Seitenbereichen verwendet wird, sollten zumindest zwischen den einzelnen Zeichen keine Leerzeichen verwendet werden.

Wer über einen Screen Reader verfügt kann das Verhalten in folgenden Beispielen testen:

Im ersten Beispiel verkündet der Screen Reader drei Mal Bindestrich. Im zweiten Beispiel mit den Leerzeichen zwischen den Bindestrichen hingegen gleich zehn Mal.

Auf Webseiten müssen Zeichenketten als Trennlinien daher unbedingt vermieden werden. In E-Mail Vorlagen, etwa für Signaturen, werden sie trotzdem solange bleiben, als E-Mail Clients HTML und CSS nicht weithin unterstützen.

Auf jeden Fall dürfen zwischen den Einzelzeichen keine Leerzeichen gesetzt werden, um bei der Nutzung von Screen Readern nicht zu nerven und zu stören. Man weiß ja nie, ob sich hinter einer langen Wiederholung von Bindestrichen nicht doch eine relevante Info im aktuellen Element befindet.

Best Practise

Eine mit HTML-Elementen gut strukturierte und mit CSS elegant formatierte Webseite braucht eigentlich keine <hr>-Elemente. In einem Projekt bin ich jedoch auf eine Überlegung gestoßen, die ich hier kurz dokumentiere.

Wenn Trennlinien nur mit CSS realisiert sind, geht der visuelle Effekt verloren, wenn im Browser CSS deaktiviert ist. Um bei deaktiviertem CSS trotzdem visuell eine Trennlinie anzuzeigen, wird folgender Code verwendet:

<hr style="display: none" aria-hidden="true" />

1. Die CSS-Anweisung display: none verbirgt die Trennlinie, solange CSS aktiviert ist und zeigt sie nur an, wenn CSS deaktiviert ist.
2. Mit aria-hidden kann ein HTML-Element für den Screen Reader verborgen werden. Semantisch gut strukturierte Dateien kommen ganz ohne <hr> aus.