Haben Sie sich jemals gefragt, warum einige Texte wie ein gemütlicher Spaziergang durch den Park wirken, während andere sich anfühlen, als würde man durch einen Dschungel irren? Der Unterschied liegt oft in der Gliederung des Textes. Menschen mit Beeinträchtigungen leiden unter schlechter Struktur besonders stark, denn visuelle Hinweise wie die Gestaltung und Gruppierung von Elementen fehlt. Bisher haben wir uns im Blog schon mit Texten in Einfacher und Leichter Sprache, mit der richtigen Schriftart und barrierefreien Farbkontrasten beschäftigt. Heute geht es um die Gliederung von Texten. Wie müssen Texte aufgebaut sein, um es den verschiedenen Assistenztechnologien und damit Menschen mit Einschränkungen leichter zu machen?
Warum die Gliederung barrierefreier Texte wichtig ist
Stellen Sie sich vor, Sie betreten eine riesige Bibliothek, in der die Bücher wahllos aufgestapelt sind. Sie würden wahrscheinlich verzweifelt den Kopf schütteln und das Weite suchen. Genauso verhält es sich mit einem unstrukturierten Text. Wenn Informationen wild durcheinander geworfen werden, verliert der Leser schnell das Interesse.
Dabei unterstützt ein sauber strukturierter Text auch die Barrierefreiheit Ihrer Website erheblich. Screenreader orientieren sich an der HTML-Struktur eines Textes. Das bedeutet, dass Überschriften, Absätze und Listen nicht nur optisch, sondern auch technisch korrekt ausgezeichnet sein müssen. Wenn Sie also eine Überschrift als solche kennzeichnen (z.B. mit <h2> oder <h3>), kann der Screenreader sie erkennen und vorlesen. Das erleichtert es den Nutzern, den Überblick zu behalten und schnell zu den relevanten Abschnitten zu navigieren. Das gelingt auch über Shortcodes, die Screenreader anbieten um auf der Seite zu navigieren.
Tipps und Tricks für eine barrierefreie Gliederung
Texte barrierefrei und damit auch semantisch richtig einzusetzen ist nicht schwierig. Überlegen Sie sich bei allem was Sie schreiben zunächst, was das ist, was Sie da vor sich haben (und nicht, wie es aussehen soll). Dann ist es auch nicht schwer, die richtigen Elemente zu finden und Screenreadern so wichtige Informationen über die Struktur Ihres Textes mitzugeben.
Aussagekräftige Überschriften zur Gliederung
Aussagekräftige Überschriften sind entscheidend, um den Inhalt eines Abschnitts zusammenzufassen. Sie sollten nicht nur den folgenden Text einleiten und einen Überblick geben, was den Leser erwartet. Verwendet dafür die richtigen HTML-Elemente wie <h1> für den Seitentitel, <h2> für Hauptabschnitte und <h3>, <h4> usw. für Unterabschnitte. Eine präzise Überschrift wie „Warum Barrierefreiheit wichtig ist“ statt „Einführung“ hilft allen Nutzern, den Inhalt zu verstehen und sich zurechtzufinden. Auch Suchmaschinen belohnen eine gut verständliche Überschrift.
Überschriften sollten außerdem hierarchisch korrekt eingesetzt werden. Stellen Sie sich Überschriften wie Matroschka-Puppen oder ineinander gestellte Schachteln vor. Kleinere Überschriften (mit höheren Zahlen) passen nur in die größeren. Eine h3 wird also immer als Teil der vorhergehenden h2 verstanden, auch wenn Sie das vielleicht nicht so meinten. Achten Sie also, unabhängig von der gewünschten Optik, auf eine korrekte Reihenfolge der Ebenen. Dabei sollten auch keine Ebenen übersprungen werden, da Screenreader dann keinen sauberen Überschriftenbaum mehr aufbauen können.
Listen und Aufzählungen
Listen sind eine gute Methode, um Informationen klar und strukturiert darzustellen. Sie helfen sowohl sehenden Nutzern als auch Nutzern von Screenreadern, zusammenhängende Inhalte zu erkennen. Verwenden Sie <ul> für ungeordnete Listen, um gleichwertige Punkte aufzuzählen. Für geordnete Listen wird <ol> eingesetzt, um eine Reihenfolge oder Priorität zu zeigen. Beispielsweise können Sie eine Schritt-für-Schritt-Anleitung in einer geordneten Liste darstellen, eine Liste von Eigenschaften aber ungeordnet. Screenreader lesen zu Beginn die Art und Anzahl der Listenpunkte vor und helfen so bei der Orientierung.
Hervorhebungen für wichtige Aussagen
Großer, fetter Text ist keine Überschrift und umgekehrt! Manche Texte möchte man hervorheben, weil sie wichtig sind. Dafür sollten keine Überschriften verwendet werden, auch wenn diese vielleicht die Optik mitbringen, die man sich wünscht. Die Elemente <strong> (starke Betonung) und <em> (leichte Betonung) sind dafür besser geeignet. Screenreader lesen diese Elemente dann auch deutlich betont vor. Umgekehrt sollten tatsächliche Überschriften nicht mit diesen Elementen ausgezeichnet werden, da damit keinerlei Struktur übermittelt wird.
Zitate
Zitate sind alle Inhalte, die Sie von anderen Personen oder Seiten übernehmen. Das richtige Element für Zitate ist <blockquote>, mit dem sie visuell und semantisch vom eigenen Inhalt abgegrenzt werden. Diese Tags setzen das Zitat in einen eigenen Block und können mit CSS gut angepasst werden, um sie auch optisch hervorzuheben. Kürzere Zitate innerhalb eines Satzes sollten mit <q>-Tags ausgezeichnet werden. Dies macht deutlich, dass es sich um ein direktes Zitat handelt und nicht um den Haupttext.
Gliederung von Texten – Fazit
Eine gute Gliederung ist das A und O eines jeden Textes. Sie hilft nicht nur dem Leser, den Inhalt besser zu verstehen und zu genießen, sondern ist auch ein wesentlicher Bestandteil der Barrierefreiheit. Indem wir unsere Texte klar und strukturiert gestalten, können wir sicherstellen, dass sie für alle zugänglich sind. Wichtiger ist immer, was man schreibt, und nicht, wie es aussehen soll.