H1 oder H2 - oder doch H3?Der direkte Zugriff
Die Navigation ausschließlich mit der Tastatur innerhalb einer einzelnen Seite ist nicht immer ganz einfach. Während Mausnutzer den Mauszeiger auf dem Bildschirm hin und her schieben können, bleibt den Tastaturnutzern oft nur die ![[intern]](../../lib/img/intern.gif){kind=small}
Tabulatorentaste und die Pfeiltasten sowie gelegentlich auch ![[extern, deutsch]](../../lib/img/de.gif)
Tastaturkürzel.
Umso wichtiger wird die Berücksichtigung einer strukturellen Navigation. Strukturelle Navigation ist die Navigation ausschließlich mit der Tastatur innerhalb einer Seite. Als Grundlage für die Navigation werden dabei Strukturmerkmale der Seite selbst, etwa Überschriften, Tabellen oder Listen, verwendet.
Auf dieser Seite geht es nicht um den Aufbau eines Artikels oder anderer Inhalte. Vielmehr geht es um die wiederkehrenden Navigationsbereiche einer Seite, die meist auf allen Seiten eines Webauftrittes zu finden sind. Klassisch wären das die Kopfleiste, eine oder zwei Navigationsspalten und eine Fußleiste.
Reine Tastaturnutzer, die die einzelnen Bereiche einer Seite ansteuern möchten, benötigen Strukturmerkmale, die angesteuert werden können. Einige Browser wie z.B. ![[extern, englisch]](../../lib/img/en.gif)
Opera bieten besondere Navigationsmöglichkeiten über die vorhandenen Überschriften. Anstatt mit dem Mausrad zu scrollen, kann die Betätigung der Tasten S zur nächsten und W zur vorherigen Überschrift betätigt werden.
Für Nutzer eines Screenreaders kann die Seitennavigation ebenso zu einer schwierigen Angelegenheit werden, da das Lesen mit Sprachausgabe und Braillezeile abhängig von Strukturen im Quellcode ist. Auch Screenreader bieten Navigationsmöglichkeiten über Überschriftenhierarchien, welche sogar das gezielte Ansteuern einzelner Überschriftenebenen erlauben.
Eine strukturelle Navigation über die einzelnen Seitenbereiche mittels Überschriftenelementen erscheint insbesondere für umfangreiche Seiten sinnvoll. Auch in der BITV findet man gleich zwei Checkpunkte, die eine strukturelle Navigation implizieren:
Bedingung 13.6 wird die Benennung von Linklisten gefordert. Zugleich sollen die Linklisten durch diese Benennung umgangen werden können. Hiervon profitieren alle Tastaturnutzer, sofern hierfür Überschriften eingesetzt werden. Bedingung 13.8 wird die Bereitstellung von aussagekräftigen Informationen am Anfang von Informationsblöcken empfohlen, die eine Differenzierung dieser Blöcke ermöglichen. Diese inhaltliche Anforderung dient vor allem Screenreadernutzern.In der BITV wird zwar nicht gefordert, dass diese zusätzlichen Texte Überschriften zu sein haben, aber Überschriften sind die praktikabelste Lösung. Wer sich die Barrierefreiheit zertifizieren lassen möchte, sollte auch ein passendes Konzept für die strukturelle Navigation vorweisen.
Aus den BITV-Anforderungen lässt sich ableiten, dass
Die meisten Webauftritte sehen keine besondere Überschrift für Navigationsleisten vor. Auch andere Bereiche werden nicht mit Texten wie "Ich bin der Inhalt" versehen. Dies ist am Bildschirm auch nicht erforderlich. Denn durch die Positionierung und andere gestalterische Maßnahmen ist in der Regel offensichtlich, welche Spalten und Kästen welchen Inhalt haben.
Die für die Barrierefreiheit erforderlichen Bezeichnungen können so gestaltet werden, dass sie am Bildschirm versteckt, aber in Sprachausgaben und auf Braillezeilen ausgegeben werden. Denn sie dienen auch Screenreadern. Zu berücksichtigen ist aber auch, dass sehende Tastatur-User die Überschriftennavigation nutzen können.
Um Texte unsichtbar zu stellen, sollten die folgenden CSS-Eigenschaften verwendet werden:
.unsichtbar {
position:absolute;
left:-1000px;
top:-1000px;
width:0;
height:0;
overflow:hidden;
display:inline;
}
Damit kann ein beliebiger Text außerhalb des Fensterbereichs geschoben werden. Zu vermeiden ist die Verwendung der CSS-Eigenschaft display:none;. Elemente mit dieser Eigenschaft werden von Screenreadern nicht ausgegeben.
Wenn jetzt klar ist, dass Überschriften für die strukturelle Navigation eingesetzt werden sollen, dann stellt sich die Frage, wo zusätzliche Überschriften berücksichtigt werden können. Die Überschriften dienen dazu, einzelne Bereiche anzusteuern und diese Bereiche zu identifizieren. Das heißt, es ist nicht erforderlich, für jeden Informationsschnipsel eine Überschrift einzusetzen, sondern es geht primär um die verschiedenen (großflächigen) Bereiche eines Layouts.
Folgende Kriterien sollten für die außerinhaltlichen Bereiche beachtet werden:
Eine zusätzliche Überschrift ist nicht erforderlich.
Wenn alle potenziellen Überschriften umrissen sind, sollte nach Redundanzen geschaut werden. Beispielsweise, wenn eine Navigationsleiste in zwei kleinere Blöcke unterteilt ist und beide Blöcke eine Überschrift besitzen. Dann ist eine vorangestellte Überschrift "Hauptnavigation" überflüssig.
H1 oder H2 - oder doch H3?Bei der Bestimmung der Überschriftenelemente ist vor allem eines zu beachten: Die Überschriftenelemente für die strukturelle Navigation sollten einheitlich sein. Hier geht es nicht um die Strukturierung von Inhalten, sondern um die Erreichung von Seitenbereichen mit der Tastatur. Es geht nicht um visuelle Präsentation, sondern um eine leicht zu lernende Methode, sich durch die Seite zu bewegen.
H1 ungeeignet istDer Einsatz einer strukturellen Navigation kann endlose Diskussionen über Semantik auslösen, was hier vermieden werden soll! Die folgenden Punkte sollen die Streitpunkte lediglich verdeutlichen:
H1 als direkter Weg zum Inhalt festgelegt wird, dann kann H1 nicht für die Navigation verwendet werden. Anstatt dem Nutzer den direkten Weg zum Inhalt zu erlauben, würden einige "Zwischenstopps" über verschiedene andere Stationen gemacht werden müssen. Eine Ausnahme wäre gegeben, wenn im Quellcode der Inhalt vor allen anderen Navigations- und Informationsbereichen stünde.H1 pro Seite zu verwenden. Wenn diese realisiert wird, soll das Logo bzw. ein Slogan im Kopfbereich die H1 bilden? Dann müssten Inhalt und andere Informationsblöcke im Sinne einer ordentlichen Hierarchie mit H2 eingeläutet werden. Der Name des Webauftritts, z.B. Logo und/oder Slogan, kann als H1 dienen. H1 für ein solches Seitenbranding ist legitim, jedoch nicht unumstritten.Da in diesem Beitrag die strukturelle Navigation im Vordergrund steht, muss aufgrund des ersten Punktes Abstand von der H1 genommen werden. Die allermeisten Layouts würden den direkten Zugang zum Inhalt erschweren.
H2 bis H6Es sollten also die Überschriftenelemente H2 bis H6 in Betracht gezogen werden. Auch hier sollten die verwendeten Überschriftenelemente im Inhaltsbereich berücksichtigt werden. Gewöhnlich haben Inhalte mehrere Gliederungsebenen, aber selten werden mehr als drei oder vier für die Gliederung eines Webdokuments benötigt.
Im Prinzip ist es nachrangig, welches Überschriftenelement tatsächlich für die Navigationsbereiche eingesetzt werden soll. Ob H2 oder H6 verwendet wird, eine schlüssige und übergreifende Begründung für den Einsatz wird immer anfällig für Kritik sein. Letztlich wird immer eines der beiden folgenden Argumente greifen:
H2 bis H6) steht vor der H1, weshalb die Hierarchie unlogisch ist.H2 ist und es in der Navigation mit einer H4 oder H6 weitergeht.Glücklich sei derjenige, dessen Navigationsbereiche alle hinter dem Inhalt sind. Dann ist die Verwendung einer H2 noch relativ gut zu begründen und die Aktivierung der Option "Show Outlines" beim W3C-Validator gibt keine Warnungen aus.
Der Vorschlag zur Güte ist die Verwendung von H6 für die strukturelle Navigation. Das sollte natürlich begründet werden:
H6 wird im Inhalt so gut wie nicht gebraucht. Es besteht kaum eine Verwechselungsgefahr zwischen inhaltlichen Überschriften und Überschriften, die ausschließlich der strukturellen Navigation dienen.Wichtig ist aber, dass die Überschriftenebenen in den Navigationsbereichen einheitlich eingesetzt werden. Wer sich für ein anderes Überschriftenelement entscheidet, kann diese Entscheidung sicher auch gut begründen!
Der Nachteil von H6-Elementen ist, dass sie bei ausgeschaltetem CSS kaum lesbar sind. Das ist vor allem dann problematisch, wenn es sich um sichtbare, anstatt unsichtbare Überschriften handelt.
Eingangs wurde darauf hingewiesen, dass die strukturelle Navigation auch sehenden Tastaturnutzern dienen soll. Dies ist natürlich nur in solchen Browsern wichtig, die eine Navigation über die Überschriften erlauben. Beispielsweise wenn der Fokus auf eine per CSS versteckte Überschrift gelegt wird, so sollte der Nutzer einen Hinweis bekommen, dass der Fokus dort ist und die nachfolgende Linkliste bedient werden kann.
Hierzu gibt es zwei Beispiele in der Demonstrationsdatei.
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}
