Großer fetter Text macht noch lange keine Überschrift

• Sind Überschriften auch wirklich Überschriften? .
• Überschriften für Inhalt und Navigation .

Fast alle Dokumente sind in irgendeiner Weise gegliedert. Während kurze Texte aus einer Überschrift und einigen wenigen Absätzen bestehen, werden längere Texte unter anderem mit weiteren Zwischenüberschriften versehen. Sowohl auf dem Papier als auch am Bildschirm fördert eine solche Gliederung die Orientierung beim Lesen.

Wer eine längere Arbeit z.B. während des Studiums verfasst hat, kennt auch weitere Gliederungszeichen, die den Überschriften zugeordnet werden, etwa ein System der Art:

Genauso wie eine schriftliche Arbeit sollte auch der Inhalt eines HTML-Dokuments gegliedert werden. Die numerischen Gliederungszeichen erscheinen dabei nicht zweckmäßig für das Web, weil die  automatische Nummerierung noch keine verbreitete Browser-Unterstützung findet. Vielmehr wird mit Schriftformatierung, z.B. Schriftgröße, die Gliederungsebene dargestellt. Auch kann im Sinne von  Bedingung 14.2 mit Grafiken gearbeitet werden, um die Hierarchiestufe einer Überschrift zu signalisieren.

Sind Überschriften auch wirklich Überschriften?

Meistens sind die Überschriften auf Webseiten optisch gut zu erkennen. Sobald aber die Formatierungen ausgeschaltet werden, z.B. weil die Seite nicht auf einem handelsüblichen Monitor, sondern auf einem anderen Endgerät betrachtet werden, erscheinen die Überschriften als einfache Absätze. Wenn nicht die Gliederung der Seite verloren geht, so sind doch zumindest die einzelnen Gliederungsebenen nicht mehr erkennbar.

Genauso geht es auch Nutzern von Screenreadern, die mit Sprachausgabe oder Braillezeile eine Seite lesen. Für Screenreader-Nutzer kommt noch die Erschwernis hinzu, dass ohne Überschriften eine Seite deutlich schwieriger zu navigieren ist, denn Überschriften helfen bei der Orientierung auf der Seite.

Damit ein Screenreader eine Überschriftennavigation erlaubt, muss das HTML-Dokument über Überschriftenelemente verfügen. HTML bietet Elemente für sechs Hierarchieebenen: H1 bis H6.

Die optisch dargestellten Überschriften in einem Webdokument sollten mit den sechs Überschriftenelementen in Verbindung mit CSS umgesetzt werden. Auch ist eine logische Hierarchie wichtig. So sollte auf eine Überschrift erster Ordnung (H1) keine Überschrift dritter Ordnung, sondern eine weitere H1 oder eine untergeordnete H2 folgen.

Überschriften für Inhalt und Navigation

Im Gegensatz zu Druckmedien, die in der Regel aus Inhalt und einem vorangestellten Inhaltsverzeichnis bestehen, wird auf Webseiten die Navigation gleich mit dem Inhalt geliefert. Fast alle Seiten bestehen aus Inhalt und mindestens einem Navigationsbereich mit Links zu anderen Seiten des gleichen Anbieters. Je nach Webauftritt können diese Bereiche sehr umfangreich werden.

Die Navigationsbereiche sind oft mit der Tastatur schwer zu navigieren, weil es an Strukturelementen fehlt. Überschriften sind als Navigationsmöglichkeit für Screenreader und anderen tastaturorientierten Anwendungen gut geeignet. Mit besonderen Tastenbefehlen wird eine Navigation über die Überschriftenstruktur einer Seite ermöglicht. Diese Art der Navigation über Strukturmerkmale eines Dokuments wird auch als "strukturelle Navigation" bezeichnet.

Ein Outline für die strukturelle Navigation innerhalb einer Seite wird schnell zur Herausforderung. Es geht um folgende drei Fragen:

1. Wie ist der Aufbau der Inhalte mit Überschriften festzulegen?
2. Wann ist eine strukturelle Navigation sinnvoll?
3. Wie sieht das Gesamtkonzept für die Überschriftenstruktur einer Seite aus?

Während die erste Frage relativ einfach zu beantworten ist, stößt man bei den anderen beiden Fragen auf Sachverhalte, die von Seitenumfang und Nutzerverhalten abhängig sind.

Dieser Beitrag wurde von  Jan Eric Hellbusch im Juni 2007 verfasst. Hellbusch ist Autor der beiden gleichnamigen Titel " Barrierefreies Webdesign". Mit "2bweb.de" bietet er  Schulung und Beratung für barrierefreies Internet.

nach oben

Über das CSS-Design

Lesen Sie,  warum ich mich an die Standards halte und warum das Layout mit  Cascading Style Sheets statt Tabellen oder Frames gestaltet wurde. Sollten Sie Probleme mit dem Layout haben, so finden Sie in der  Liste standardkonformer Browser Links zu entsprechenden Download-Seiten.

Suchen Sie was auf barrierefreies- webdesign.de?

Entspricht die Seite den W3C-Normen?

Die  Gesamtübersicht dieses Webauftrittes erreichen Sie jederzeit über das AccessKey-Pad mit Alt+6.

Der schnelle Seitenzugriff

Verwenden Sie  Tastenkürzel, etwa Alt mit der entsprechenden Zahl, um auf diesem Webauftritt zu navigieren.