Access-for-all-Blog

Überschriften (englisch Headings) werden in HTML verwendet um Titel und deren Hierarchiestufen semantisch korrekt auszuzeichen. Wie René im Beitrag Webtest 1×1: Von Überschriften und Headings sehr gut ausführt, sind gerade für blinde Internetuser diese Überschriften eine unentbehrliche Hilfe um die Struktur eines Textes zu verstehen. Ein Screenreader (Bildschirmleseprogramm) interpretiert diese Metainformation, die mit dem HTML-Tag Heading (h1 bis h6) ausgezeichnet wird, und liest diese dem Anwender vor, so dass er weiss, dass es sich um eine Überschrift einer bestimmten Hierarchiestufe handelt. In diesem Beitrag möchte ich genauer darauf eingehen, wie Überschriften für die Strukturieren der gesamten Website eingesetzt werden können.

Überschriften können nicht nur verwendet werden, um den Inhalt zu strukturieren, sondern um die gesamte Website in Bereiche zu unterteilen. So lassen sich viel einfach z.B. Global- und Hauptnavigation auch für blinde User unterscheiden. Was visuell häufig mit einem horizontalen und einem vertikalen Navigationselement dargestellt wird kann so mit einem unsichtbaren Heading auch für Screenreader erkennbar gemacht werden.

Welche Überschriften sollen für die Unterteilung der Website verwendet werden?

Es gibt hier nicht ein eindeutige Lösung. Es kommt natürlich immer auf den Aufbau der Site an. Wir empfehlen in der Regel drei Überschriften der Ebene 1 (h1) zu verwenden um die gesamte Site zu strukturieren. Das erste h1 steht an Anfang der Website (nach den Sprunglinks) und wird als Navigation bezeichnet. Innerhalb dieses Bereichs gibt es wiederum verschiedene h2 (z.B. “Sprachwahl”, “Bereichsnavigation” oder “Hauptnavigation”). Das zweite h1 ist der jeweilige Haupttitel des Inhalts, welcher wieder mit h2, h3 usw. unterteilt ist. Das dritte und letzte h2 ist meist die rechte Kontextspalte welche je nach Site mit “Weitere Informationen” bezeichnet werden kann. Wir empfehlen darin am Schluss auch die Fusszeile mit einem h2 auszuzeichnen.

Auf diese Art und Weise können blinde User die einzelnen Bereich direkt mit den Tasten 1 (springt von h1 zu h1), 2 (springt von h2 zu h2) usw. ansteuern (gilt für den Screenreader JAWS).

Die Struktur der Überschriften einer Website könnte etwa so aussehen:



- Inhalt [unsichtbarer Sprunglink]
- Navigation [unsichtbarer Sprunglink]

<h1>Navigation - Bundesamt für Accessibility</h1>


<h2>Sprachwahl und Suche</h2> [unsichtbar]
- deutsch
- französich
Suchen
<h2>Bereichsnavigation</h2> [unsichtbar]
- Accessibility
- Über uns
- Dienstleistungen
<h2>Bereich Accessibility</h2> [unsichtbar]
- HTML
- PDF

<h1>Barrierefreies Webdesign</h1>

Inhalt

<h1>Weitere Informationen</h1> [unsichtbar]


<h2>Links</h2>
- Link
- Link
<h2>Fusszeile</h2> [unscihtbar]
Impressum
Copyright

Wie Elemente auf einer Website unsichtbar dargestellt werden, können Sie im Blog-Beitrag über unsichtbare Elemente lesen.

Dieser Eintrag wurde publiziert am 09.11.07 um 19:43 in Accessibility. Sie können Antworten durch den RSS 2.0 Feed nachverfolgen. Sie können hier antworten, oder trackback von Ihrer eignen Seite.