Los Geht’s

Für viele Leute gehört das Lesen, oder doch immerhin das Durchblättern, einer Zeitung zum Alltag. Falls Sie zu diesen Leuten gehören, wissen Sie wahrscheinlich die Vorteile von Überschriften zu schätzen: Die Schlagzeilen sind jene Worte, die, in extra grosser Schrift und wahrscheinlich fett gedruckt, den Anfang eines Artikels markieren. Sie lesen sich die Schlagzeile durch und entscheiden dann, ob Sie den kleiner gedruckten, den ’normalen› Text, auch noch lesen möchten. Falls nicht, überfliegen Sie die Zeitung, um bei der nächsten Überschrift wieder genauer hinzuschauen. Überschriften geben Ihrer Lieblingszeitung die Struktur, die Sie wahrscheinlich so mögen. Sie teilen ein Dokument in Haupt- und Unterabschnitte ein und erleichtern so das rasche Auffinden von wichtigen Informationen.

Im Internet ist es genau so. Auch auf dem Online-Portal Ihrer Lieblingszeitung werden Sie auf eine Überschriftenstruktur stossen, die Ihnen hilft, sich auf der Seite zu orientieren.

Für blindeNutzer des Internets ist eine gute Überschriftenstruktur auf Webseiten wohl noch wichtiger als für sehende Personen; denn während sehende eine Bildschirmseite quasi mit einem Blick überfliegen und strukturieren können, lesen blinde Personen (resp. ihre Sprachausgaben und Brailledisplays) die Seite Zeilenweise.

Was ist das Problem?

Die neueren Screenreader-Versionen erkennen Überschriften auf Websites und bieten dem blinden User die Möglichkeit, sie anzuspringen. So wird auch ihm eine Möglichkeit gegeben, eine Seite zu überfliegen: Verspricht eine Überschrift einen uninteressanten Seitenabschnitt, wird einfach zur nächsten Überschrift gesprungen.

Die Frage ist aber nun: Was ist eine Überschrift?

der HTML-Code sieht für die Definition von Überschriften spezielle Tags vor. Text, der mit H1 Tags umgeben ist, wird als Hauptüberschrift gekennzeichnet. H2 ist entsprechend ein Untertitel von H1; h3 ist eine Überschrift auf dritter Ebene; man kann bis zu H6 als Tags gebrauchen.

Es sind denn auch diese Tags, die oft unlogisch eingesetzt werden oder die schlicht fehlen. Die häufigsten Gründe dafür sind

• 1) dass sich Überschriften FÜRS AUGE auch einfach definieren lassen, indem man einen Text gross schreibt und fett markiert. Warum Tags einsetzen, wenn man keinen Unterschied sieht?
• 2) dass die Standard-Darstellung der mit H-Tags ausgezeichneten Elemente oft nicht den wünschen des Webdesigners entspricht. Warum eine Hauptüberschrift mit H1 auszeichnen, wenn sie dann völlig unproportional gross auf der Seite prangt?

Die Antworten auf diese Gründe sind einfach: Ein Screenreader ist leider nicht schlau genug, grosse fette Buchstaben von sich aus als Überschrift zu erkennen, zu Mal dies oft auch keinen Sinn machen würde. Nur, was den Regeln entsprechend gekennzeichnet wird, kann richtig erkannt werden. Und was die Standard-Darstellung z.B. von H1-Überschriften angeht, so kann diese, durch hinzufügen einiger CSS-Zeilen, durchaus verändert und angepasst werden.

Was im Test steht

Im Rahmen unserer Webtests analysieren wir unter anderem auch die Überschriftenstruktur auf Webseiten und stellen uns dazu folgende Frage:

Sind Titel, Untertitel und ähnliches als Überschriften gekennzeichnet und in eine logische Struktur gebracht (Hauptüberschrift = Ebene 1, Unterüberschrift = Ebene 2 usw.)?

Wer diesen Punkt bestehen will, sollte grundsätzlich dafür sorgen, dass alle auf einer Website vorhandenen Überschriften mit entsprechenden Tags (H1 bis H6) gekennzeichnet sind. Im folgenden einige Klassiker, auf welche wir während den Tests immer wieder stossen:

Der Bandwurm im Web: «Keine Überschriften»

Würden Sie Ihre Lieblingszeitung noch mögen, wenn alle geschriebenen Elemente in ein und derselben Schriftart und -Grösse präsentiert würden? Oder wichtiger: Würden Sie dann noch gleich schnell die wichtigen Themen heraus suchen und durchlesen können?
Eines der meist angetroffenen Probleme in Zusammenhang mit Überschriften ist wirklich jenes, dass der Screenreader sie nicht erkennt. Da nun eine blinde Person auch keine Grafiken sieht, entwickeln sich solche Seiten schnell einmal zu mühsamen Online-Bandwürmern, durch deren Text man sich mühselig tasten muss.

Üblicherweise weist eine Seite mindestens einen Haupt-Titel auf. Diesem sollten Sie das Tag H1 vergeben. Seinen Untertiteln weisen Sie H2 zu und so weiter.

Stufen fehlen: Logik und Design

Wichtig ist, diese logische Struktur beizubehalten. Oft genug treffe ich Seiten, bei welchen auf eine H1 Überschrift ein Untertitel der Ebene 5 folgt. Von Logik kann hier wohl keine Rede mehr sein; und je unlogischer die Überschriftenstruktur einer Seite, desto schwieriger ist es einem blinden User, sich richtig zu orientieren.

Wann ist etwas keine Überschrift mehr

Es gibt Situationen, in denen es durchaus Sinn macht, einen gross und fett geschriebenen Text nicht als Überschrift zu kennzeichnen. So genannte Lead-Texte (auch oft zu finden bei News- und Zeitungs-Seiten) sind ein gutes Beispiel. Ein Text, welcher aus mehr als einer Zeile besteht, ist oft nicht mehr eine Überschrift und muss darum auch nicht entsprechend getagt werden. Verwenden Sie bitte auch keine H-Tags, wenn Sie Ihre Internet-Seite in extra groser schrift (z.B. für Sehbehinderte Personen) zugänglich machen möchten. Das H der H-Tags steht wirklich für Heading (Englisch für Überschrift) und ist nicht zur Formatierung von normalen Texten vorgesehen.

Gutes tun: Mit verborgenen Überschriften die Navigation erleichtern

Überschriften erleichtern also einmal mehr die Navigation, insbesondere für blinde Internet-User. Sie helfen, Seitenabschnitte schnell und effizient zu finden oder zu überspringen.

Überschriften können auch unsichtbar angebracht werden, also so, dass sie nur für Screenreader-User vorhanden sind. Durch das Anbringen solcher unsichtbaren Überschriften können Sie z.B. eine Spalte mit verschiedenen Navigationsoptionen in kleinere Gruppen («Hauptmenü», «Wichtigste Links», «Sprachwahl» etc) unterteilen und erleichtern so die Navigation noch einmal, ohne das Erscheinungsbild der Website zu trüben.
Sie finden eine Anleitung zu unsichtbaren Texten auf unserem Blog.

Die schlechten Beispiele

Wahrscheinlich haben Sie schon gemerkt, dass ich nicht wirklich auf Online-Ausgaben von Zeitungen stehe. Wenn Sie sich die fehlende Überschriftenstruktur (keine H-Tags) von 20 Minuten oder die falsch und unlogisch gesetzten Headings von Der Bund ansehen, werden Sie verstehen, warum. Auch die Seide von Radio DRS führt ein Dasein ohne Überschriften.

Die guten

Erstaunlicherweise sind viele auf Open Source basierende Seiten mit ganz brauchbaren Überschriften ausgestattet. Die WordPress Blog Software zeichnet, in der Standard-Installation, schon die meisten Überschriften richtig aus; folglich sind z.B. Unser Access For All Blog oder mein eigener Blog auf jaunscorner.com gute Beispiele. Die Google Suchmaschine zeichnet immerhin die Resultate mit H-Tags aus, so dass ein schnelles Springen von Resultat zu Resultat möglich ist. Besuchen Sie auch die Seite des Werkstätten-Netzwerks Zürich und schauen Sie sich im Quellcode nach den unsichtbaren Überschriften (markiert mit der ‹Class Hide›) um.

Ach ja, und falls Sie vorhin den Artikel in Wikipedia zu Bandwurmerkrankungen bei Hunden nicht gelesen haben, sollten Sie dies vielleicht nun tun, um auch dort insbesondere auf die H-Tags zu achten.

Fazit

H-Tags sind die offizielle Art, HTML-Überschriften richtig zu kennzeichnen. Alle auf einer Website vorhandenen Überschriften sollten H-Tags aufweisen, die in eine logische Struktur gebracht wurden (Hauptüberschrift = H1, Untertitel = H2 usw.). Das Layout von H-Tags kann durch CSS angepasst werden. Und H-Tags sind nicht zu gebrauchen, um Textpassagen hervorzuheben oder ganze Seite vergrösert darzustellen.

Fortsetzung: In The Name Of The Frame

Ich will Ihnen erzählen, wo Sie Rahmen ohne Bilder betrachten können. Wir sprechen über ‹das Dokument ohne Namen› und über ‹den Inhalt der Leere›. Bis es so weit ist, sind Sie herzlich eingeladen, Ihre Kommentare zu Posten.
… Aber ich muss nun erst mal meinen Hund entwurmen.