BITV Reloaded – Anforderung 3
Bedingung 3.5: Strukturelemente für Überschriften (Prio. 1)
»Zur Darstellung der Struktur von mittels Markup-Sprachen geschaffener Dokumente sind Überschriften-Elemente zu verwenden.«
Was heißt das?
Sie kennen das aus Ihrer Textverarbeitung: man kann Überschriften entweder als großen, fetten, farbigen Text anlegen, oder man kann eine Formatvorlage benutzen, um eine Überschrift als Überschrift 1, Überschrift 2 oder Überschrift 3 zu definieren. Beides sieht auf dem Monitor und im Ausdruck gleich aus, nur bedeutet der erste Weg wesentlich mehr Arbeit. Zudem kann Ihre Textverarbeitung echte Überschriften in der Dokumentstruktur als solche ausgeben und ihnen damit die Navigation im Dokument vereinfachen.
Nichts anderes geschieht im Web, wenn sie Ihre Überschriften mit den dafür vorgesehenen Tags <h1>-<h4> auszeichnen. Nicht nur Screenreader und Lupenprogramme können nun den Aufbau einer Seite besser wiedergeben und es dem Benutzer ermöglichen, sich in dieser Struktur von Überschrift zu Überschrift zu bewegen. Auch immer mehr grafische Browser können Seiten auf diese Art zusammenfassen. Dazu ist es aber zwingend erforderlich, dass diese strukturierenden Elemente auch als solche im Quelltext ausgezeichnet und nicht nur ›ungefähr so aussehen.‹
Wie können Sie das testen?
Hier kommen die zuvor erwähnten Eingabehilfen im Internet Explorer zum Einsatz. Schalten Sie alle Angaben zu Schriftgrad und -art ab und lesen Sie Ihren Text. Wenn die Überschriften genau so aussehen wie Ihr Fließtext, bedeutet dies, das diese nicht korrekt ausgezeichnet sind. Denn auch ohne Angaben aus CSS werden Überschriften in grafischen Browsern entsprechend Ihrer Bedeutung dargestellt, d. h. <h1> sehr groß und fett, <h4> oder <h5> dagegen in der Größe von normalem Fließtext.
Alternativ können Sie auch einen der Browser zu Rate ziehen, die bereits die Navigation per Überschriften beherrschen und so ihren Nutzern die Navigation erleichtern. Mit einigen Kniffen können dies alle grafischen Browser, von Mozilla und Firefox über Opera bis hin zu Exoten wie iCab.
Eine empfehlenswerte Firefox-Erweiterung für diesen Test ist Document Map. Nach der Installation sollten Sie sich das entsprechende Icon in die Symbolleiste des Browsers legen. Per Klick öffnet sich die hierarchische Überschriftenstruktur der aktuellen Seite in der sog. Sidebar. Versuchen Sie nun, nur über das Springen von Überschrift zu Überschrift zu navigieren – dieses Verhalten entspricht den Möglichkeiten von assistiven Programmen, Überschriften aus dem Kontext losgelöst darzustellen. Wenn die wesentlichen Inhaltsbereiche eines Dokumentes über diese Überschriftenstruktur erreichbar sind, dann haben Sie diesen Test bestanden.
Dabei ist es vollkommen unerheblich, ob ein Dokument immer mit einer <h1> oder nur mit einer <h2> oder <h3> anfängt und sämtliche Hierarchieebenen immer und überall konsequent eingehalten werden (also grundsätzlich <h1> → <h2> → <h3> → …). Gerade in dynamisch erzeugten Seiten ist es oft unmöglich und letztendlich nicht hilfreich, diese strikte Ordnung immer herzustellen.
Der Kern dieser Bedingung 3.5 ist: wenn der Inhalt nach einer Überschrift verlangt, dann sollte diese entsprechend als Überschrift ausgezeichnet werden. Weitergehende Vorgaben zur Strukturierung Ihrer Inhalte finden Sie bei den Bedingungen 12.3 und 13.8.
Beispiele:
Bevor CSS starke Verbreitung fand, wurden Überschriften üblicherweise so ausgezeichnet:
<br><br><font size="7"><b><font face="Arial"><font color="#ff0000">Großer fetter roter Text, der nur so aussieht wie eine Überschrift</font></font></b><br></font><br>
Mit CSS und HTML sollte die wichtigste Überschrift Ihrer Seite nun so aussehen:
<h1>Wichtigste Überschrift</h1>
Die Formatierung über CSS bringt nun das gewünschte Aussehen:
h1 {font : bold 2em/150% "Helvetica Neue", sans-serif;color: #f00;}