Überschriftenstruktur für Barrierefreiheit

Datum der Veröffentlichung

Dieser Blogartikel wirft einen Blick auf Überschriften in HTML. Warum sollten sie korrekt ausgezeichnet werden, wie geht das und welche Auswirkungen haben sie auf Nutzende von Hilfstechnologien?

Struktur

Blinde Menschen nutzen die Überschriften eines Dokuments als eine Art Inhaltsverzeichnis. Wie im Screencast am Ende des Artikels zu sehen ist, lässt sich eine Liste von Überschriften nebst ihrer entsprechenden Überschriftenebene einblenden. Richtig eingesetzt lässt sich so eine inhaltliche Gliederung bereits erkennen.

Überschriften in Artikeln

Es gibt die Überschriftenebenen nummeriert von eins bis sechs, wobei die Zahl die Hierarchieebene angibt. So ist die Überschriftenebene eins zu verwenden, um den Hauptinhalt kenntlich zu machen. Als Beispiel dient auf dieser Seite die Hauptüberschrift des Artikels. Die nächste Überschriftenebene sollte eine der zweiten Ebene sein. Hier ist ein logischer Aufbau zur Vermittlung von Beziehungen zwischen Inhalten essentiell. Welche Ebene die nächste Überschrift haben soll, ergibt sich aus dem Inhalt. Wird der Inhalt, der mit der Überschrift der Ebene zwei eingeleitet wird weiter untergliedert, so ist eine Überschrift der Ebene drei zu verwenden. Handelt es sich aber um einen neuen Punkt, der inhaltlich nicht als Unterpunkt zu sehen ist, dann ist erneut die Überschrift der Ebene zwei zu verwenden.

Image
Screenshot: Header in JAWS

Screenshot: Liste der Überschriftn in JAWS

Überschriften außerhalb von Artikeln

Außerhalb von Artikeln gibt es keine so klaren Regeln. Mit “außerhalb von Artikeln” ist alles gemeint, das nicht dem Hauptinhalt zugeschrieben werden kann. Beispielsweise eine Newsletteranmeldung, eine Liste der neuesten Artikel etc.

In der Praxis wird für diese Seitenbereiche häufig die Überschrift der Ebene zwei verwendet. Ein interessanterer Ansatz, den ich beim Recherchieren für diesen Artikel gefunden habe, ist, dass dafür die Überschrift der Ebene sechs verwendet werden sollte. Die Begründung hierfür ist, dass diese Überschriftenebene in der Regel nicht oder zumindest sehr selten in Artikeln vorzufinden sein dürfte. So gäbe es eine klare Abgrenzung zwischen der inhaltlichen und der strukturellen Ebene.

Was jetzt wo?

Angenommen, die Überschriftenebenen eins bis vier werden in der Regel für die inhaltliche Gliederung verwendet. Und die Überschriften der Ebene sechs werden für Strukturelemente auf der Seite verwendet, dann ist Nutzenden von Screenreadern klar, dass und wie sie direkt zum Hauptinhalt der Seite springen können. Aber auch, wie sie zu Strukturelementen gelangen.

Wie wichtig ist das?

In der (zum Veröffentlichungszeitpunkt dieses Artikels) aktuellsten Version der “Screen Reader User Survey” von WebAIM gaben 86,1 Prozent der Teilnehmenden an, dass eine gute Überschriftenstruktur für sie wichtig sei. 68,8 % gaben an, dass sie Informationen mittels der Überschriftenstruktur auffinden.

Anhand dieser Zahlen lässt sich die Wichtigkeit einer schlüssigen Überschriftenstruktur deutlich ablesen und es zeigt sich, dass sie ein absolutes Must-have ist.

Sonderfall Rubrum

Eine Besonderheit ist die im Journalismus häufige Rubrikenüberschrift vor der eigentlichen Überschrift, auch Rubrum genannt. Sie gehört eigentlich nicht zur Überschrift, liefert aber oft den notwendigen Kontext.

Hier scheint es aus Nutzersicht so, dass es keinen einheitlichen Umgang gibt, auf den man sich einigen konnte. Somit ist nicht initial klar, welche Überschriften mit welchem Text in welchem Zusammenhang stehen.

Theoretisch gäbe es die Möglichkeit, alle Informationen in einer Überschrift zusammenzufassen und diese einfach unterschiedlich aussehen zu lassen. Bei dieser Möglichkeit erhält man zwar sämtliche Informationen, allerdings geht die Synchronizität des Aufbaus der Seite im Vergleich mit sehenden Usern verloren. Außerdem wird den Nutzenden die Wahl abgenommen, ob die Rubrik, in der ein Artikel veröffentlicht wurde, wichtig ist.

Die bestmögliche Auszeichnung des Rubrum ist, eine Überschriftenebene dafür zu nutzen. Beispielsweise in der Artikelübersicht die Artikelüberschriften als Überschriften der Ebene drei und die Rubren als Überschriften der Ebene vier auszuzeichnen. Damit obliegt es den Nutzenden, ob und zu welchem Zeitpunkt diese Informationen wahrgenommen werden. Ebenfalls ist so ein promptes Nachschlagen möglich, wenn schnell herausgefunden werden soll, um welche Rubrik es sich bei einem Artikel handelt.

Zusammengefasst

  • Überschriftenebenen sollten immer semantisch korrekt angewandt werden. Die Logik hierfür gibt der Inhalt vor. Wenn das nicht das gewünschte optische Ergebnis bringt, lässt sich dies durchs Webdesign anpassen.

  • Für Nutzende von Hilfstechnologien ergibt sich durch eine logische Überschriftenstruktur eine Art Inhaltsverzeichnis, welches eine schnelle Orientierung und die Auffindbarkeit von Informationen sicherstellt.

  • Die Überschrift der Ebene eins ist nur einmal einzusetzen und markiert die Überschrift des Inhalts.

  • Überschriftenebenen sollen nicht übergangen werden. Auf eine Überschrift der Ebene eins kann logisch keine Überschrift der Ebene vier kommen.

  • Eine Überschrift, die nicht zum Inhalt gehört, sollte von dieser klar getrennt sein. Beispielsweise kann dies eine Überschriftenebene sein, die sich nahezu nie in Fließtexten finden wird, da diese nicht so weit gegliedert sind, dass sie die Überschriftenebene sechs beinhalten.

Die Praxis

In folgendem Screencast ist zu sehen, wie sich eine Überschriftenstruktur auswirkt.

Screencast: Überschriftenstruktur mit Screenreader

Profile picture for user dennis.westphal

Dennis Westphal

Dennis ist IT-Berater bei der Gesellschaft zur Entwicklung von Dingen. Sein Gebiet ist die Barrierefreiheit. Hilfreich dabei: Dennis ist seit Geburt blind. Seine Screencasts erstellt er mit Open-Source-Software.

Kommentare