Der direkte Zugriff
Wie beim Lesen von Druckerzeugnissen verschaffen sich Leser auch im Web zuerst einen Überblick über den Inhalt einer Seite, bevor sie mit dem Lesen beginnen. Zumindest haben ![[extern, englisch]](../../lib/img/en.gif)
Untersuchungen zur Gebrauchstauglichkeit herausgefunden, dass es wichtig ist, aussagekräftige Zwischenüberschriften zu verwenden, um die ![[extern, deutsch]](../../lib/img/de.gif)
Konversionsrate zu verbessern. Obwohl diese Erkenntnis über das Leseverhalten sicher nicht neu ist, so spielt die Gliederung einer Webseite eine größere Rolle als z.B. in der Zeitung. Während die tägliche Zeitung immer wieder nach dem gleichen Muster gegliedert ist, sind viele Webauftritte oft sehr unterschiedlich aufgebaut. Dies ist mit einem gewissen Lernaufwand verbunden, wenn Internetseiten regelmäßig relauncht oder über eine Suchmaschine gefunden werden.
Der allgemeine Zweck der Gliederung eines Inhalts ist es, dem Leser einen Überblick über eben diesen zu geben. Auch soll ihm beispielsweise ein Einstieg dort ermöglicht werden, wo die subjektiv relevanten Informationen zu finden sind. Dieser Aspekt wird insbesondere dann bedeutsam, wenn Nutzer den Inhalt nicht auf einen Blick erfassen können, entweder weil sie blind sind oder nur langsam lesen können.
Die Gliederung eines HTML-Dokuments ist ein Aspekt der Barrierefreiheit. Nach ![[intern]](../../lib/img/intern.gif){kind=small}
Bedingung 12.3 sind große Informationsblöcke mit Strukturelementen in leicht überschaubare Gruppen zu gliedern. Die Verwendung von Überschriften stellt neben kürzeren Absätzen oder die angemessene Verwendung von Listen eine von vielen Möglichkeiten dar, sich Inhalte leichter zu erschließen.
Nach der Bedingung 3.5 sind Überschriftenelemente zur Darstellung der Struktur eines Dokuments zu verwenden. HTML bietet hierfür die sechs Elemente H1 bis H6.
Für Besucher, die den Bildschirm zum Erfassen von Webinhalten benutzen, spielt es normalerweise keine Rolle, ob eine Überschrift mit einem der sechs Überschriftenelemente ausgezeichnet ist oder nicht. Die Hierarchiestufe der Überschrift wird meist mittels Formatierungen (Schriftgröße, Farbe usw.) deutlich.
Für Screenreadernutzer ist die Überschriftenstruktur mit HTML-Elementen wichtig. Screenreader bieten hierfür spezielle Navigationsmöglichkeiten. So kann man beispielsweise von einem Überschriftenelement zu einem anderen springen. Auch kann anhand der Überschriften einer Seite ein Inhaltsverzeichnis erzeugt werden.
Es werden alle vorhandenen Überschriften einer Seite in einem eigenen Dialogfenster angezeigt. Mit den Pfeiltasten kann eine Überschrift ausgewählt werden.
Die Navigation über die Überschriften ist auch in einigen Browsern möglich. Auch der W3C-Validator zeigt die Überschriftenstruktur an, indem bei den Optionen "Show Outline" aktiviert wird.
Eine hierarchische Gliederung des Inhalts sollte vorgenommen werden. Generell sollte jeder Inhalt mit einer H1 beginnen. Im Inhaltsbereich sollten die nachfolgenden Überschriften aufeinander aufbauen, d.h. eine H2 folgt auf H1 und eine H3 auf H2. Wenn möglich, sollte man es vermeiden, eine Überschriftenebene zu überspringen, also z.B. direkt von der zweiten auf die vierte Ordnung überzugehen.
Würden in einem Buch die Abschnitte wie folgt nummeriert:
2.7 Strukturelemente in HTML
2.7.1 Datentabellen
2.7.2.1 Überschriften-Elemente
2.7.2.2 Aufzählungen
2.7.3 Hervorhebung und Betonung
2.7.4 Strukturelemente in Formularen,
wäre die Verwunderung beim Leser vermutlich groß, da bei Kapitel 2.7.2.1 eine Bedeutungsebene (2.7.2 Blockelemente) scheinbar fehlt. Ähnlich muss es einem blinden Besucher ergehen, der sich von Überschrift zu Überschrift auf einer Webseite bewegt und die Überschrift der entsprechenden Ordnung nicht finden kann.
Mit Skripten können Inhalte dynamisch in eine Seite geladen werden, z.B. von anderen Webauftritten. Hier entsteht das Problem, dass die inkludierten Inhalte und Teilinhalte Überschriftenelemente enthalten können, die hierarchisch nicht zur aktuellen Stelle auf der Seite passen. Dadurch entstehen unlogische Hierarchien.
Interessanterweise steht nirgends in der BITV, dass Überschriften hierarchisch aufgebaut werden sollen. Der Kern der Bedingung 3.5 lautet: wenn ein Text zur Darstellung der Struktur (= Überschrift) verwendet wird, dann sollte auch eines der sechs Überschriftenelemente verwendet werden.
Die indifferente Verwendung der Bedeutungsebenen könnte akzeptiert werden. Zwei Gründe sprechen aber für die Berücksichtigung von einer strengen Überschriftenhierarchie:
Die Auszeichnung einer Überschrift erster Ordnung wird in HTML folgendermaßen vorgenommen:
<h1>Alles über Überschriften</h1>
Unser kleines Beispiel auf der Vorseite:
1. Einleitung
2. Überschriften auf Webseiten
2.1 Überschriften im Inhalt
2.2 Überschriften auf anderen Seitenbereichen
3. Zusammenfassung
könnte in HTML wie folgt aussehen:
<h1>Einleitung</h1>
<h1>Überschriften auf Webseiten</h1>
<h2>Überschriften im Inhalt</h2>
<h2>Überschriften auf anderen Seitenbereichen</h2>
<h1>Zusammenfassung</h1>
Obwohl diese Struktur logisch aufgebaut ist, gibt es einige Verbesserungsmöglichkeiten.
Die Verwendung mehrerer Überschriften der Ebene 1 kann Sinn machen, wenn auf einer Seite verschiedene Themen angesprochen werden, die wenig oder gar nichts miteinander zu tun haben. Nachrichtenportale wären ein Beispiel dafür. In unserem Beispiel handelt es sich aber offenbar um einen zusammenhängenden Text, welcher prinzipiell mit einer einzigen H1-Überschrift auskommt.
Das Beispiel könnte um eine Hauptüberschrift (H1) ergänzt werden. Dabei würden die anderen Überschriften um eine Ebene nach unten rutschen:
<h1>Alles über Überschriften</h1>
<h2>Einleitung</h2>
<h2>Überschriften auf Webseiten</h2>
<h3>Überschriften im Inhalt</h3>
<h3>Überschriften auf anderen Seitenbereichen</h3>
<h2>Zusammenfassung</h2>
Es ist semantisch sinnvoll, die Hauptüberschrift einer Seite mit H1 auszuzeichnen. Durch die Verwendung eines einzigen Überschriftenelements H1 wird außerdem sichergestellt, dass es keine Missverständnisse über das Hauptthema der Seite gibt. Die Frage, ob weitere Seiteninhalte, wie z.B. das Logo, ebenfalls eine H1 benötigt, wird im nächsten Abschnitt beantwortet.
Webseiten enthalten nicht nur Artikel oder andere eindeutig strukturierbare Inhalte. Ob ein interaktives Spiel oder ein Portal, eine Sitemap oder eine Anwendung, es gibt zahlreiche Beispiele, bei denen eine eindeutige Überschriftenstruktur nicht gegeben ist.
Konzepter müssen für derartige Seiten insbesondere die Aspekte der Navigation mittels Überschriftenelemente im nächsten Abschnitt beachten und ein Outline der Überschriften für solche Seiten entwickeln. Im Folgenden soll das obige Beispiel nur leicht ergänzt werden, um die grundlegenden Möglichkeiten zu skizzieren.
Für die Bildschirmdarstellung kann mit Hilfe von CSS eine beliebige Formatierung der Überschriftenelemente vorgenommen werden.
Grafiken können ergänzend zur Formatierung eingesetzt werden, um die Bedeutungsebene klarer darzustellen (Quelle: http://www.csszengarden.com/?cssfile=/188/188.css&page=1).
Die Überschriften können z.B. auch vorangestellte Symbole erhalten, um die Bedeutungsebene visuell hervorzuheben. Dies erreicht man, indem entweder die Überschrift mit CSS als Liste definiert und das Aufzählungszeichen mit einer Grafik ersetzt wird, oder indem die Überschrift eine Hintergrundgrafik erhält.
Durch den Einsatz von Klassen können Überschriften gleicher Ordnung auch ein unterschiedliches Aussehen bekommen. Wenn in unserem obigen Beispiel die erste Überschrift der Ebene 2 anders aussehen soll als die weiteren H2-Elemente, können die H2-Zwischenüberschriften durch Zuweisung einer Klasse andere Eigenschaften erhalten.
<h1>Alles über Überschriften</h1>
<h2>Einleitung</h2>
<h2 class="zwischenueberschrift">Überschriften auf Webseiten</h2>
<h2 class="zwischenueberschrift">Zusammenfassung</h2>
Auch sind andere Konstrukte möglich, etwa wenn "zwischendrin" Inhalte berücksichtigt werden sollen, die nicht zum eigentlichen Inhalt gehören:
<h1>Alles über Überschriften</h1>
<h2>Einleitung</h2>
<div id="box">
<h2>Werbung</h2>
</div>
<h2 class="zwischenueberschrift">Überschriften auf Webseiten</h2>
<h2 class="zwischenueberschrift">Zusammenfassung</h2>
Wie diese Outlines mit CSS gestaltet werden können, kann in der Demonstrationsdatei nachvollzogen werden.
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.
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.
Die ![[intern]](../../lib/img/intern_hellblau.gif){kind=small}
Gesamtübersicht dieses Webauftrittes erreichen Sie jederzeit über das AccessKey-Pad mit Alt+6.
Verwenden Sie Tastenkürzel, etwa Alt mit der entsprechenden Zahl, um auf diesem Webauftritt zu navigieren.
![[intern]](../../lib/img/intern_dunkelblau.gif){kind=small}
