Dieser Beitrag gehört zur Artikelserie Richtlinien für barrierefreie Webinhalte WCAG 2.0. Er soll die Erfolgskriterien, Bedeutung und Umsetzung der Richtlinie 2.4 Navigierbar darstellen sowie Website Beispiele aufzeigen.
„Stellen Sie Mittel zur Verfügung, um Benutzer dabei zu unterstützen zu navigieren, Inhalte zu finden und zu bestimmen, wo sie sich befinden.“
Erfolgskriterien der Richtlinie 2.4
- 2.4.1 Blöcke umgehen: Es gibt einen Mechanismus, um Inhaltsblöcke zu umgehen, die auf verschiedenen Webseiten wiederholt werden. (Stufe A)
- 2.4.2 Seite mit Titel versehen: Webseiten haben einen Titel, der Thema oder Zweck beschreibt. (Stufe A)
- 2.4.3 Fokus-Reihenfolge: Wenn eine Webseite der Reihe nach navigiert werden kann und die Reihenfolge der Navigation die Bedeutung oder Bedienung beeinflusst, erhalten fokussierbare Komponenten den Fokus in einer Reihenfolge, der Bedeutung und Bedienbarkeit aufrecht erhält. (Stufe A)
- 2.4.4 Linkzweck (im Kontext): Der Zweck jedes Links kann durch den Linktext allein oder durch den Linktext zusammen mit seinem durch Software bestimmten Link-Kontext bestimmt werden außer in Fällen, in denen der Zweck des Links mehrdeutig für Benutzer im Allgemeinen wäre. (Stufe A)
- 2.4.5 Verschiedene Methoden: Es gibt mehr als eine Methode, um eine Webseite innerhalb eines Satzes von Webseiten zu finden, außer die Webseite ist das Ergebnis oder ein Schritt innerhalb eines Prozesses. (Stufe AA)
- 2.4.6 Überschriften und Beschriftungen (Labels): Überschriften und Labels beschreiben ein Thema oder einen Zweck. (Stufe AA)
- 2.4.7 Fokus sichtbar: Jede durch Tastatur bedienbare Benutzerschnittstelle hat einen Bedienmodus, bei dem der Tastaturfokus sichtbar ist. (Stufe AA)
- 2.4.8 Position: Es gibt Informationen zu der Position des Benutzers innerhalb eines Satzes von Webseiten. (Stufe AAA)
- 2.4.9 Linkzweck (reiner Link): Es gibt einen Mechanismus, um den Zweck jedes Links durch den Linktext allein zu erkennen, außer der Linkzweck wäre mehrdeutig für Benutzer im Allgemeinen. (Stufe AAA)
- 2.4.10 Abschnittsüberschriften: Abschnittsüberschriften werden genutzt, um den Inhalt zu gliedern. (Stufe AAA)
Anmerkung 1: „Überschrift“ wird in seiner allgemeinen Bedeutung benutzt und beinhaltet Titel und andere Methoden, um verschiedenen Arten von Inhalt eine Überschrift hinzuzufügen.
Anmerkung 2: Dieses Erfolgskriterium behandelt Abschnitte innerhalb von Geschriebenem, nicht Bestandteile der Benutzerschnittstelle. Bestandteile der Benutzerschnittstelle werden unter Erfolgskriterium 4.1.2 behandelt.
Bedeutung der Richtlinie
Die Richtlinie soll es allen Benutzer ermöglichen leicht im Internet zu navigieren, sodass alle Inhalte gefunden werden können und für jeden zugänglich sind. Dabei überschneidet sich diese Richtlinie teilweise auch mit den Erfolgskriterien aus der Richtlinie 1.3 Anpassbar: Erstellen Sie Inhalte, die auf verschiedene Arten dargestellt werden können (z.B. einfacheres Layout), ohne dass Informationen oder Struktur verloren gehen.
Zudem sollte der Nutzer immer wissen, wo er sich gerade auf der Website befindet. Die Orientierung und Navigation auf einer Website ist unbedingt erforderlich und sollte immer gegeben sein. Dabei sollte auch darauf geachtet werden, dass die Seite mit einem Screenreader gelesen werden kann und ebenfalls mit diesem erfolgreich navigierbar sein sollte.
Damit der Benutzer zu jeder Zeit weiß, wo er sich auf der Website befindet und wie er weiter navigieren kann sollte bereits bei der Gestaltung der Website darauf geachtet werden, dass die Anzahl an Links auf einer Seite begrenzt ist und das diese visuell gekennzeichnet und unterscheidbar sind.
Umsetzung der Richtlinie
Damit eine Website von jedem Nutzer navigierbar ist, gibt es unterschiedliche Erfolgskriterien. Anhand deren Umsetzung lässt sich der Inhalt jeder Seite von jedem Benutzer finden und navigieren. Ein Erfolgskriterium ist 2.4.1 Blöcke umgehen. Häufig ist der Hauptinhalt einer Seite von mehreren Blöcken umgeben, was es dem Nutzer schwer macht einen Überblick über ihre Position zu behalten.
Das der Hauptinhalt von vielen Blöcken umgeben ist, ist z. B. auf Nachrichtenportalen häufig der Fall. Hier befindet sich der Hauptartikel in der Mitte der Seite und ist von vielen Blöcken und Werbung umgeben. Hier wäre es sinnvoll, wenn sich am Anfang der Seite ein Link befindet, der direkt zum Hauptartikel springt.
Vor allem für Benutzer von Screenreadern ist es hilfreich direkt auf den Hauptinhalt zu kommen ohne vorher etliche Navigationsinks zu hören und Nutzer die nur eine Tastatur benutzen, müssen nicht etliche Tastaturanschläge machen bevor sie zum Hauptinhalt kommen.
Ein weiteres Erfolgskriterium ist 2.4.2 Seite mit Title versehen. Jede Seite sollten einen Title haben der das Thema der Seite oder deren Zweck beschreibt, damit der Benutzer weiß, was er auf der Seite findet. Zudem weiß der Nutzer damit auf welcher Seite er sich befindet ohne den kompletten Inhalt dieser Seite lesen zu müssen. Das nächste Erfolgskriterium sagt aus, dass eine logische Reihenfolge eingehalten werden sollte, um die Navigation zu vereinfachen und übersichtlicher zu gestalten.
Ähnlich wie 2.4.2 sagt das Erfolgskriterium 2.4.4 aus, dass ein Linktext einen sinngemäßen Kontext haben solltem, damit der Nutzer weiß, wohin ihn dieser Link navigiert. So sollte „mehr“ niemals verlinkt sein, da der Benutzer nicht unbedingt weiß, über was er „mehr“ lesen sollte. Auch ein verlinktes Bild ohne alt-Attribut sollte nicht verlinkt sein, da ein Screenrader ein Bild-Link nicht ignoriert und das alt-Attribut dem Nutzer vorlesen würde. Ebenso sollten Überschriften und Beschriftungen (Labels) verwendet werden, die das Thema oder den Zweck beschreiben. Überschriften helfen den Benutzer, den Inhalt der Seite zu verstehen und zu erkennen, wie die Informationen auf der Seite angeordnet sind.
Beispiele zur Richtlinie
Im folgenden Beispiel ist sowohl das Bild verlinkt, als auch die Unterschrift unter dem Bild. Beide Links führen zur selben Seite. Allerdings wurde das Bild mit einem leeren alt-Attribut versehen, da sich unter dem Bild bereits ein Text befindet. Da ein Screenreader aber beide Links vorlesen würde, wüsste der Nutzer nicht, was er auf dem Bild finden würde und was der Linkkontext ist (siehe Code-Beispiel):
leeres alt-Attribut bei einem Bildlink
Ebenso ist es schwierig für de Nutzer zu verstehen, auf welche Seite er navigiert wird, wenn der Linktext lediglich mit „mehr“ beschrieben wird.
kein konformer Linktext
Links, die auf unterschiedliche Seiten verweisen, sollten zur Unterscheidung verschiedene Anchortexte besitzen. Gleiche oder zumindest ähnliche Anchortexte sollten genutzt werden bei Links, die auf dasselbe Linkziel verweisen.
Dieses sind nur einige Beispiele für die Richtlinie 2.4. Generell sollten alle Seiten gut navigierbar sein was auch aus Usabilitysicht sehr hilfreich ist. Viele Erfolgskriterien lassen sich bereits sehr einfach bei der Gestaltung der Website umsetzen, indem die Anzahl an Links auf einer Seite begrenzt wird, diese visuell gekennzeichnet und unterscheidbar sind und indem der Hauptinhalt als dieser ersichtlich wird.
Die Inhalte und Erfolgskriterien der Richtlinie 2.4 Unterscheidbar sind in der deutschen Übersetzung nachzulesen unter www.w3.org.
Der nächste Artikel beschäftigt sich mit der WCAG 2.0 Richtlinie 3.1 Lesbar.