Last modified: February 9, 2011

In den letzten Monaten gab es wieder einige Artikel in Sachen Überschriften und deren strukturellen Einsatz. Über so etwas Kurzes und Harmloses wie Überschriften (Putzhuber, Maria: Pfiffige Überschriften, MAIN_blog) lässt sich dann tatsächlich eine Menge sagen.

So haben Überschriften eine ganz klar strukturierende Wirkung (Hellbusch, Jan Eric: Strukturelle Navigation, MAIN_blog) und deren strukturelle Reihenfolge sollte eingehalten werden. Bis hierher wird mir jeder folgen wollen. Mit dem Blick auf Barrierefreiheit wird es dann jedoch schon schwieriger, hier tauchen die meisten Widersprüche in Empfehlungen und Diskussionen auf.

Um mir diese Problembereiche etwas näher in der Praxis ansehen zu können, habe ich eine kleine Studie erarbeitet und mich in der großen, barrierefreien Welt der Agenturen, Institutionen und wichtigen Portalen umgesehen:

• Werden Überschriften verwendet?
• Wie sieht die strukturelle Reihenfolge der Überschriften aus?
• Werden für die strukturellen Bereiche Überschriften verwendet und welche Bereiche sind das?
• Welche Probleme und Auffälligkeiten gibt es?

Hinweis: Diese Ergebnisse sind nur EIN Teil einer Gesamtbetrachtung. Dies ist NICHT eine Studie über alle barrierefreien Agenturen. Bitte lesen Sie vorab auch die Einleitung zur gesamten Studie.

Update: Dieser Teil wurde noch weiter überarbeitet, vor allem die Verschachtelungsproblematik und der Einsatz von einer oder mehrerer H1-Überschriften wurde vertieft.

Im ersten Teil der Studie habe ich mir 31 Agenturen (ich beschränke mich im weiteren dann auf 30 Agenturen, weil eine Agentur keine Überschriften verwendet) angesehen, deren Schwerpunkt auf Barrierefreiheit liegt. Die Stichprobe wurde der BIK 95plus-Liste und dem Einkaufsführer 2007 des Barrierekompass entnommen (Stand: Mai 2008).[1. Folgende Agenturen habe ich ausgewählt: 52eins, A&B Face2Net, a.b.media, anatom5, aperto, babiel, blindwerk, BlueMars, blueonion, Dialog WebDesign, DIATOM, dyco MEDIA, enteraktiv, exozet, feld.wald.wiese, form4 , init , kombinat, namics, one4vision, OpenComp, permanent, Projekt 77, Christian Reuter, Sunbeam, Trendfish, two-seven.de, webfactory, WebMen, Wertewerk, WIENFLUSS]

Werden Überschriften verwendet?

Abbildung 1: Verwendung von Überschriften – Verteilung und Verwendung

Grundsätzlich hat sich die Verwendung von Überschriften in den Agenturen durchgesetzt, bis auf eine Agentur setzen alle Agenturen Überschriften mit H-Elementen ein. Interessant ist, dass sich eine eindeutige Zweiteilung in der Verwendung ergibt: Zum einen haben wir den eher klassischen Einsatz der Überschriften für den Inhaltsbereich. Hierzu rechne ich noch die Auszeichnung der Suche, denn sehr oft wird in diesem Einsatztyp diese mit einer Überschrift versehen. Zum anderen haben wir den übergreifenden Einsatz von Überschriften für den gesamten Bereich der Webseite – auch für die strukturellen Elemente wie Navigationen, Hilfsfunktionen wie Sprunglinks und weitere Inhaltsbereiche. Beide Einsatztypen sind fast gleich verteilt: der klassische Einsatztyp mit 16 und der übergreifende mit 14 Agenturen.[2. Die Einteilung in den klassischen und übergreifenden Typ ist rein funktional und nicht wertend gemeint. Beide Typen sind uneingeschränkt barrierefrei zugänglich.]

Abbildung 2: Verwendung von Überschriften – mehrere oder nur eine H1

Betrachtet man die Verwendung der Überschriften für die H1 genauer, stellt man fest, dass es eine eindeutige Tendenz zum Einsatz nur einer H1 auf der Webseite gibt (21 mal). Mehrere H1-Überschriften finden sich nur 9 mal. Sehr ausgeglichen ist dieser Einsatz hinsichtlich des Überschriftentyps. So setzt der klassische Typ am häufigsten nur eine H1 ein (11 mal) und nur 5 mal mehrfach. Ähnlich gelagert ist das beim übergreifenden Typ. Weit häufiger wird nur eine H1 eingesetzt (10 mal), nur 4 mal mehrmals.

Wie sieht die strukturelle Reihenfolge der Überschriften aus?

Abbildung 3: Verteilung der strukturellen Reihenfolge der Überschriften

Eine strukturelle Reihenfolge der Überschriften ist im wesentlichen auf den Webseiten der Agenturen vorhanden. Unterschiede lassen sich in zwei Bereichen feststellen: Zum einen gibt es einen Unterschied zwischen der Start- und der Folgeseite (Artikel) und zum anderen in Nutzung von tieferen Strukturen als der H4-Überschrift.

So gibt es Agenturen, die auf der Startseite keine Überschriften verwenden, auf den Folgeseiten jedoch schon. Generell ist auf den Folgeseiten eine tiefere Reihenfolge an Überschriften vorhanden, während der Einsatz nur bis zu H3-Überschriften (10 mal) zurückgeht, steigt der Einsatz bis zu H4 (5 mal)- und H5 (3 mal)-Überschriften. Auf der Startseite werden weitaus häufiger nur bis zu H2 (10 mal)- und H3 (13 mal)-Überschriften verwendet. Das war zu erwarten, da Startseiten meisthin als Portale genutzt werden und Folgeseiten in den Detailinformationen mehr Hierarchietiefe zulassen.

Generell wird nur eine Tiefe bis zur H5 (3 mal)-Überschrift verwendet, ein H6-Element war nicht zu finden. Auch wird überproportional mehr zu H2 (10 mal)- und H3 (13 mal)-Elementen gegriffen als zu tieferen Ebenen.

Werden für die strukturellen Bereiche Überschriften verwendet und welche Bereiche sind das?

Abbildung 4: Verteilung der Überschriften auf strukturelle Bereiche

Agenturen des übergreifenden Typs setzen auch Überschriften für die strukturellen Bereiche ausserhalb des Inhaltsbereichs ein, wenngleich es hier deutliche Häufigkeitsunterschiede gibt. Am häufigsten wird eine Überschrift für den Bereich der Hauptnavigation eingesetzt (15 mal). Ich subsumiere darunter Benennungen wie Navigation, Navigation Ebene 1 und Hauptmenü. Weitaus weniger wird eine Überschrift für Metanavigationen gesetzt (6 mal), darunter fallen dann Bereiche wie Servicenavigation, Servicemenü, Meta-Navigation.

Interessanterweise werden auch Hilfsoptionen häufiger mit einer Überschrift versehen (5 mal), etwa Drucken, PDF-Funktion, Styleswitcher, Schriftgrößen und andere Hilfen. Exoten mit Überschriften sind dann Überschriften für den Breadcrumb (1 mal), die Sprungnavigation (2 mal) und für den Anker zum Seitenanfang (1 mal). Die Suche wird in beiden Verwendungstypen häufiger mit einer Überschrift versehen (6 mal).

Es ist also eine deutliche Hierarchie in der Auszeichnung von strukturellen Bereichen zu erkennen: Die wichtigsten strukturellen Elemente wie Navigationen werden am häufigsten mit einer Überschrift versehen (21 mal). Dann folgen weitere inhaltliche und funktionelle Bereiche, die wichtig sind wie die Suche und Seitenoptionen (11 mal).

Welche Probleme und Auffälligkeiten gibt es?

Abbildung 5: Strukturelle Probleme und Auffälligkeiten bei Überschriften: Verteilung

Interessanterweise fehlt bei vielen Agenturen der Agenturname in den Überschriften (11 mal). Für eine verständliche Überschriftenstruktur würde man auch eine Überschrift, gemeinhin ein H1-Element, mit dem Namen der Agentur erwarten. In sehr geringem Masse (2 mal) wird für ein H-Element Inhalt verwendet, der keinen wirklichen Überschriftenstatus hat, etwa ein H3-Element für das Datum. Ebenso wird weitgehend vermieden eine Hierarchie nur aus H1-Elementen zu erstellen (3 mal).

Die Problematiken Verschachtelungsfehler und das Fehlen der ersten H1-Überschrift sind voneinander abhängig. Die häufigsten Probleme treten auf, weil die allererste H1-Überschrift in der Hierarchie fehlt (11 mal). Eine Erklärung dafür ist, dass sich vor dem eigentlichen Inhalt Navigationen befinden, die mit einer Überschrift ab dem H2-Element ausgezeichnet sind. Eher wenige Probleme treten auf, indem im Inhaltsbereich eine fehlerhafte Reihenfolge der H-Elemente vorliegt (3 mal).

Abbildung 6: Verschachtelungsprobleme bei Überschriften

Betrachtet man die Verschachtelungsfehler genauer, lässt sich feststellen, dass auf höchster Ebene für Strukturelemente wie Navigationen oder Sprunglinks oftmals die Hierarchieebenen fehlen (4 mal). So fehlt nicht nur die H1, es fehlen für diese Elemente auch noch weitere Hierarchieebenen wie die H2 (2 mal), die H3 (1 mal) oder die H4 (1 mal) . Die Strukturelemente rangieren dann unmittelbar darunter. Ein häufiger und auffälliger Schachtelungsfehler ist das Fehlen der H1 am Beginn des Überschriftenbaumes (6 mal). Dies tritt bei jenen Seiten auf, die nur eine H1-Überschrift nutzen. Die restlichen Fehler in der Verschachtelung (5 mal) sind klassisch, wo die eine oder andere Zwischenhierarchie schlicht fehlt.

Fazit

Grundsätzlich hat sich die Verwendung von Überschriften in den Agenturen durchgesetzt. Unterscheiden lassen sich zwei Arten, wie die Überschriften auf den Webseiten eingesetzt werden: die eher klassische Verwendung, die sich auf den Inhaltsbereich der Webseite beschränkt, und die übergreifende Verwendung, die versucht den gesamten Bereich der Webseite strukturell mit Überschriften zu kennzeichnen. Die H1 wird weitaus häufiger nur einmal auf der Webseite eingesetzt als mehrfach, es ist auch kein wesentlicher Unterschied zwischen den beiden Einsatztypen festzustellen. Bei beiden Typen wir viel häufiger nur eine H1-Überschrift eingesetzt.

Auf den Startseiten werden im Regelfall weniger tiefe Überschriften-Hierarchien verwendet, auf den Artikelseiten dann durchaus. Die H6-Überschrift wird nicht verwendet. Am häufigsten werden strukturelle Bereiche wie Navigationen und weitere inhaltliche und funktionelle Bereiche wie Suche, Drucken oder Styleswitcher mit Überschriften versehen.

Auffällig ist, dass die meisten Agenturen ihren Agenturnamen nicht als H1 auszeichnen, sie beginnen direkt mit dem ersten wichtigen Inhalt der Seite. Probleme in der Verschachtelungstiefe ergeben sich zum einen durch die strukturellen Bereiche wie Navigationen, die ohne entsprechende übergeordnete H-Überschriften mit einer Ebene ab H2 erst beginnen. Zum anderen fehlt schlicht die erste H1 im Hierarchiebaum, was die Hierarchie mit einem Schachtelungsfehler beginnen läßt. Betroffen sind davon Seiten, die nur eine H1 einsetzen. Der Rest sind ganz klassische Schachtelungsfehler, die im Inhaltsbereich auftreten.