Navigation und Service

Einfach teilhaben (Link zur Startseite)


Navigation und Orientierung im Internetauftritt

Begründung

Die im Web verfügbare Datenmenge wächst kontinuierlich an. Sogenannte Web 2.0-Angebote ermöglichen allen Nutzerinnen und Nutzern, Inhalte zu erzeugen und das Web mitzugestalten. Dazu wird häufig bereits ein mobiles Endgerät eingesetzt. Unterschiedlichste Bildschirmgrößen, ungünstige Lichtverhältnisse bei der mobilen Nutzung und die auf der anderen Seite unüberschaubare verfügbare Datenmenge verdeutlichen, wie wichtig ein gut gestaltetes Navigationskonzept ist.

Eine gute Orientierung und nachvollziehbare Navigationsmechanismen im Webangebot sind die Voraussetzung für ein schnelles Auffinden von gesuchten Inhalten. Für Menschen mit Behinderungen ist das Auffinden der Inhalte häufig schwieriger als für andere Nutzerinnen und Nutzer des Angebots: Sie können Inhalte zum Beispiel nur akustisch, und dadurch nacheinander wahrnehmen oder können durch eine eingeschränkte Motorik die Navigationselemente nicht oder nicht optimal bedienen.

Werden bei der Gestaltung eines Webangebots einige Grundsätze beachtet, bietet dies allen Nutzerinnen und Nutzern des Angebots Vorteile beim Auffinden der gesuchten Inhalte. Wichtigste Voraussetzung für eine gezielte Navigation und das erfolgreiche Auffinden von Inhalten ist es den aktuellen Standort innerhalb des Angebots zu kennen, um die Navigationsmöglichkeiten in einen sinnvollen Kontext setzen zu können.

Für Nutzerinnen und Nutzer, die mit einer akustischen Ausgabe durch das Angebot navigieren und für alle, die die Maus nicht bedienen können, sind einige zusätzliche Bedingungen zu berücksichtigen. Für Menschen mit Lernschwierigkeiten ist eine nachvollziehbare und in der allgemein üblichen Weise gestaltete Navigation ebenfalls eine wichtige Voraussetzung für die Orientierung in einem Angebot. Dies kommt auch allen anderen zugute, wie Ergebnisse der Usability-Forschung belegen: Einmal von den Nutzern in Webangeboten erlernte Navigationskonzepte werden auf andere Angebote übertragen. Ein solches Navigationskonzept entspricht auch den Anforderungen älterer Nutzerinnen und Nutzer und sollte daher auch mit Blick auf den demografischen Wandel berücksichtigt werden.

Außerdem sollte bei der Gestaltung der Navigation darauf geachtet werden, dass diese mit weniger fein ausgeführten Bewegungen bedienbar ist, die durch die Nutzung einer Kopfmaus, einer Augensteuerung oder manuell motorischen Einschränkungen entstehen können. Dies wird auch älteren oder ungeübten Computernutzerinnen und -nutzer oder Nutzerinnen und Nutzern von mobilen Endgeräten entgegen kommen. Grundsätzlich sollten Inhalte immer auf mehreren Wegen erreichbar sein, damit entsprechend der eigenen Fähigkeiten und Situationen sowie Umgebungen, in denen sich eine Nutzerin oder ein Nutzer befindet, ein Weg flexibel ausgewählt werden kann. So kann ein "universelles Design" ohne spezielle Anpassungen oder Sonderlösungen für das Navigationskonzept erreicht werden, das von vielen Menschen nutzbar ist.

Das Ziel ist, dass die Nutzerinnen und Nutzer unabhängig vom genutzten Ausgabegerät immer wissen, wo sie sich gerade im Internetauftritt befinden. Sie sollten möglichst direkt erkennen können, wie sie ohne Umwege zu den gesuchten Inhalten gelangen können.

Weiterführende Informationen und Quellenangaben:

Anleitung

Bevor über ein konkretes Navigationskonzept für ein Webangebot entschieden wird, müssen zunächst die Inhalte gut strukturiert werden. Dies muss nicht immer hierarchisch erfolgen, sondern kann zum Beispiel auch über die Zuordnung von Schlagworten realisiert werden. Wichtig ist nur, dass ein Konzept für die Organisation der Inhalte vorhanden ist und dieses konsequent verfolgt wird. Wächst ein Angebot ohne ein solches Konzept, helfen auch technisch gut realisierte Navigationsmechanismen nicht weiter, um Inhalte schnell und einfach aufzufinden.

Liegt ein entsprechendes Konzept vor, sollten die Begriffe, die in der Navigation verwendet werden, gut überlegt und ausgewählt werden. Häufig werden für die Navigationsbegriffe bereits Fachbegriffe und Abkürzungen verwendet, die Nutzerinnen und Nutzern, die das Angebot erstmalig besuchen, nicht kennen werden. Dies ist daher zu vermeiden, genauso wie fremdsprachliche Begriffe aus Gründen der Usability eher vorsichtig eingesetzt werden sollten. Menschen mit Lernschwierigkeiten werden hierdurch zusätzlich ausgegrenzt. Die in Navigationsmenüs verwendeten Linktexte sollten also möglichst aussagekräftig sein, wie in BITV-Bedingung "2.4.4 Zweck eines Links (im Kontext)" und in Priorität II in BITV-Bedingung "2.4.9 Zweck eines Links" etwas verschärft gefordert. Dabei sollte der Navigationsbegriff ohne einen erläuternden Text (in HTML durch das title-Attribut) auskommen. Diese werden blinden Nutzerinnen und Nutzern je nach Einstellung des verwendeten "Screenreaders" möglicherweise nicht vorgelesen, Sehbehinderte haben Schwierigkeiten, die als "Tooltip" angezeigten Texte wahrzunehmen, da diese sehr klein dargestellt werden. Die meisten Browser stellen inzwischen zwar auch lange Tooltips dar und achten darauf, dass diese nicht seitlich außerhalb des sichtbaren Bereichs heraus laufen, trotzdem können dabei andere Inhalte verdeckt werden. Außerdem sind Tooltips nur über die Maus zugänglich. Tooltips sollten daher nicht so lang gewählt werden, da es sonst wie in dieser Abbildung dargestellt störend wirkt:

Screenshot eines Textes mit einem sehr langen mehrzeiligen Tooltip Screenshot eines Textes mit einem sehr langen mehrzeiligen Tooltip

Sind diese grundsätzlichen inhaltlichen Fragen zum Konzept geklärt, muss dies grafisch und technisch umgesetzt werden. Durch die Umsetzung müssen die Nutzerinnen und Nutzer dabei unterstützt werden, die drei für die Navigation und Orientierung zentralen Fragen zu beantworten:

  • Wo bin ich?
  • Wo war ich?
  • Wohin kann ich gehen?

Welche Techniken eingesetzt werden können, um ein inklusives Webangebot zu gestalten, wird im Folgenden anhand dieser drei Fragen dargestellt.

Wo bin ich?

Aussagekräftige Seitentitel

Die erste Information, die zur Orientierung im Webangebot genutzt werden kann, ist der Titel der aktuellen Seite (vgl. BITV-Bedingung 2.4.2). Der Seitentitel wird in der Kopfzeile des Browserfensters bzw. als Tab-Beschriftung angezeigt. Blinden und Sehbehinderten wird der Seitentitel als erste Information durch den Screenreader vorgelesen.

Der Seitentitel sollte immer aus zwei Teilen aufgebaut sein: einem gleichbleibenden Teil, der kurz das Angebot bezeichnet, und einem speziellen Teil, der die aktuell angezeigten Inhalte des Angebots beschreibt. Die Reihenfolge ist dabei beliebig. Ist der allgemeine Teil zu lang, kann es sinnvoll sein, diesen ans Ende zu stellen, damit die wesentliche Information zu Beginn wahrgenommen werden kann. Ziel ist es, möglichst kurze und aussagekräftige Titel zu formulieren. Neben Internetseiten, gilt diese Anforderung auch für andere im Angebot eingebundene Dokumentenformate (zum Beispiel PDF- und Office-Dokumente). In der folgenden Abbildung sind die drei aufgerufenen Seiten, durch die kurzen, aussagekräftig gewählten Titel gut unterscheidbar und zusätzlich ist erkennbar, welche Seiten zum gleichen Angebot gehören:

Screenshot mehrerer Seiten verschiedener Angebote, die über den auf den Tabs dargestellten Titeln unterscheidbar sind Screenshot mehrerer Seiten verschiedener Angebote, die über den auf den Tabs dargestellten Titeln unterscheidbar sind

Eindeutiger Pfad zur aktuellen Seite

Eine zentrale Hilfe für die Orientierung innerhalb eines Webauftritts, die etwas genauer als der eher kurz gehaltene Seitentitel, Auskunft über den aktuellen Standort innerhalb des Angebots gibt, ist der sogenannte "breadcrumb trail". Der Name ist angelehnt an das Märchen "Hänsel und Gretel", die die Brotkrumen zur Markierung des Wegs genutzt haben.

Der "Brotkrumenpfad" gibt also den Pfad von der Startseite zur aktuellen Seite wieder (vgl. BITV-Bedingung 2.4.8). Dabei kann sowohl der individuell gegangene Weg, als auch die Position innerhalb der Hierarchie des Webangebots angegeben werden. Wichtig dabei ist nur, dass es für die Nutzerinnen und Nutzer möglichst gut nachvollziehbar ist.

Screenshot eines breadcrumb trails auf der einfach-teilhaben-Seite, der als Liste realisiert ist, wie in der Darstellung ohne CSS zu sehen ist Screenshot eines breadcrumb trails auf der einfach-teilhaben-Seite, der als Liste realisiert ist, wie in der Darstellung ohne CSS zu sehen ist

Der "breadcrumb trail" muss technisch so realisiert sein, dass jeweils direkt zu den darüber gelegenen Ebenen, die auf dem Pfad liegen, navigiert werden kann. Die aktuelle Seite kann im "breadcrumb trail" vorkommen ohne verlinkt zu sein, oder auch weggelassen werden, wenn diese Information auch über den Seitentitel verfügbar ist.

In HTML sollte der Pfad zum Beispiel als Liste realisiert werden, da die einzelnen Links so gut voneinander getrennt sind, eine Liste für Screenreader-Nutzerinnen und -Nutzer leicht überspringbar und die Anzahl der Listenelemente, die den einzelnen Zwischenstationen entspricht, direkt zu Beginn verfügbar ist. Andere Umsetzungen sind aber ebenfalls denkbar, solange die übrigen Anforderungen und Bedingungen der BITV eingehalten werden, wie zum Beispiel ausreichender Kontrast, skalierbare ausreichend große Schrift und Tastaturbedienbarkeit. Die Position des "breadcrumb trail" sollte möglichst nah an den Inhalten liegen, da er hier eher wahrgenommen wird.

Ein "breadcrumb trail" ist jedoch nur eine Möglichkeit den aktuellen Standort im Angebot zu verdeutlichen und so die BITV-Bedingung 2.4.8 zu erfüllen. Um möglichst flexibel auf die unterschiedlichsten Bedienungsgewohnheiten der Nutzerinnen und Nutzer einzugehen, sollten auch die anderen Möglichkeiten genutzt werden, die im Folgenden kurz erläutert werden.

Schnelle Übersicht über alle Seiten des Angebots

Eine sogenannte "Sitemap", also eine strukturierte Übersicht über alle Seiten des Angebots, bietet einen schnellen Zugriff auf einzelne Seitenbereiche. Ist die Sitemap von allen Seiten des Angebots aus erreichbar, kann so schnell ermittelt werden, wo innerhalb der Struktur des Angebots, die gerade betrachtete Seite liegt.

Übersichtliche Navigationsmechanismen

Besitzt das Webangebot Navigationsleisten, sollte die aktuelle Position auch hier hervorgehoben werden. Also zum einen der ausgewählte Bereich in der Hauptnavigation, und falls vorhanden, der unter diesem Punkt hervorgehobene Bereich der Bereichsnavigation. Die Hervorhebung sollte sich nicht alleine auf ein sensorisches Merkmal, also zum Beispiel nur auf Farbe, verlassen (siehe "Nicht auf Farbe verlassen" in Abschnitt 2.2.1). Der aktuell gewählte Navigationspunkt sollte auch nicht auswählbar sein, also in HTML nicht als Link realisiert sein, wie in dem folgenden Screenshot dargestellt:.

Screenshot einer über die Navigationsleiste markierten Position im Webangebot mit und ohne CSS zur Darstellung der dahinter liegenden Listenstruktur Screenshot einer über die Navigationsleiste markierten Position im Webangebot mit und ohne CSS zur Darstellung der dahinter liegenden Listenstruktur

Zusätzliche Metadaten für zusammenhängende Seiten

Umfangreiche Inhalte werden aus Gründen der Usability, also der Gebrauchstauglichkeit, gerne auf mehrere Internetseiten aufgeteilt. Die Inhalte gehören in diesem Fall direkt zusammen, und sind in der Regel linear verknüpft. Ein Beispiel hierfür wäre eine online in HTML verfügbare Broschüre, ein Handbuch oder Bericht. Für diese Art von Zusammenstellung im Web sind spezielle HTML-Elemente für die "Metadaten" vorgesehen, die diese Beziehung der Internetseiten untereinander regeln. Für das Vor- und Zurück-Blättern ist vorgesehen:

<link rel="Next" href="abschnitt3.html" title="3. Hintergrund der 
Studie" />
<link rel="Prev" href="abschnitt1.html" title="1. Einleitung" />

Das Inhaltsverzeichnis und ein Index für die zusammenhängenden Dokumente können folgendermaßen von allen Einzelseiten aus verlinkt werden:

<link rel="Contents" href="inhalt.html" title="Inhaltsverzeichnis"  />
<link rel="Index" href="index.html" title="Index" />

Das erste Dokument einer Zusammenstellung kann mit dem rel-Wert "Start" angegeben werden. Der Nachteil des link-Elements ist die unzureichende und inkonsistente Unterstützung durch Browser und assistive Technologien. Nur wenige Browser bieten diese Navigationsmöglichkeiten in einer Extra-Navigationsleiste an. Diese wird bei Bedarf angezeigt, sobald eine Seite diese Möglichkeit nutzt oder kann ständig über die Browsereinstellungen eingeblendet werden. Aufgrund der unzureichenden Unterstützung sollte bei einer Dokumentenzusammenstellung zusätzlich der Seitentitel entsprechend aufgebaut sein. Auch ein Inhaltsverzeichnis, das immer zu Beginn aller zur Zusammenstellung gehörenden Dokumente sichtbar ist, hilft bei der Orientierung im Gesamtdokument. Im folgenden Screenshot ist die zusätzliche Navigationsleiste im Opera-Browser dargestellt:

Screenshot der zusätzlichen Navigationsleiste im Opera für die imhplus.de-Seite zur Nutzung der angegebenen LINK-Elemente Screenshot der zusätzlichen Navigationsleiste im Opera für die imhplus.de-Seite zur Nutzung der angegebenen LINK-Elemente

Weiterführende Informationen und Quellen:

Wo war ich?

Diese Informationen werden überwiegend durch den verwendeten Browser verwaltet. Über die "Zurück"-Schaltfläche der Navigationsleiste, bieten alle grafischen Browser die Möglichkeit, zu der vorhergehenden Seite oder bereits zuvor besuchten Seiten zu gehen. Diese Funktion steht standardmäßig zur Verfügung. Lediglich beim Einsatz von Skripten oder dynamischen Seiten muss geprüft werden, ob diese Funktion durch den Browser unterstützt wird oder ggf. manuell innerhalb der Seite angeboten werden muss. Zum Beispiel innerhalb eines Bestellprozesses ist es möglich, dass eine spezielle "zurück"-Schaltfläche innerhalb der Seite angeboten wird, um den Verlust von Daten zu verhindern.

Um dem Nutzer einen optimalen schnellen Überblick über die bereits besuchten Seiten zu bieten, sollten besuchte Links im Fließtext farblich anders gekennzeichnet werden. Hier bieten sich die in der Voreinstellung des Browsers verwendeten Standardfarben an. Werden andere Farben gewählt, sollten diese gut unterscheidbar sein.

Auch die Sitemap eines Angebots ist ein guter Ort, an dem auf einen Blick die bereits besuchten Seiten gekennzeichnet werden können. Wird eine Listendarstellung gewählt, kann hier für besuchte Links zum Beispiel ein anderes Aufzählungszeichen verwendet werden.

Weiterführende Informationen und Quellen:

Wohin kann ich gehen?

Um den Nutzerinnen und Nutzern ein schnelles Auffinden der gesuchten Inhalte zu ermöglichen, sollten möglichst mehrere Wege dorthin führen. Dies kann dadurch erreicht werden, dass neben der klassischen Navigation über Navigationsleisten, auch eine Suchfunktion, die bereits erwähnte Sitemap, Links zu ähnlichen Dokumenten oder die ebenfalls bereits erwähnte Navigation in Dokumentenzusammenstellungen angeboten werden. Eine Ausnahme bieten hier Zwischenschritte in einem mehrschrittigen Prozess, wie einer Bestellung. Diese Seiten können meist nur auf einem Weg erreicht werden.

Die einfachste Möglichkeit die Inhalte des Webangebots miteinander zu vernetzen, sind die Verweise im Fließtext. Wird die Hypertext-Struktur optimal genutzt, finden die Nutzerinnen und Nutzer des Angebots eine angemessene Anzahl Links innerhalb des Inhalts, um zu verwandten Themen zu navigieren, und so die gesuchten Informationen zusammenzutragen.

Einige Nutzerinnen und Nutzer bevorzugen den Weg über eine Suchfunktion. Insbesondere Nutzer, die sehr genau wissen, welche Inhalte sie suchen, werden diesen Weg gehen. Ein weiterer Vorteil für die Nutzerinnen und Nutzer ist, dass sie die Struktur des Webangebots nicht verstehen und nachvollziehen müssen. Eine Suche sollte möglichst nicht daran scheitern, dass ein Begriff falsch geschrieben wird oder eine andere Form des gesuchten Begriffs verwendet wird. Die Eingabe der Suchbegriffe sollte an zentraler Stelle auf jeder Seite über ein Textfeld möglich sein. Dieses kleine Formular muss selbstverständlich barrierefrei gestaltet sein (siehe 2.7.1 Formulare). Da viele Nutzerinnen und Nutzer nicht über die interne Suche des Angebots, sondern über allgemeine Suchmaschinen gehen, ist eine Suchmaschinenoptimierung, die die Barrierefreiheit nicht einschränkt, empfehlenswert. Die Suchergebnisse müssen übersichtlich präsentiert werden. Bei langen Listen ist auf eine gute Struktur der Ergebnisse zu achten, die für viele eine Navigationshilfe darstellt. Im folgenden werden einige Beispiele hierzu vorgestellt:

Übersichtliche, gut strukturierte Darstellung der Ergebnisse der Suche im Angebot "Agentur barrierefrei NRW":

Ergebnisse sind als Liste sortiert für jeden Seitenbereich (hier Artikel) einzeln dargestellt und enthalten eine kurze Information zur gefundenen Seite sowie der Trefferanzahl zu Beginn Ergebnisse sind als Liste sortiert für jeden Seitenbereich (hier Artikel) einzeln dargestellt und enthalten eine kurze Information zur gefundenen Seite sowie der Trefferanzahl zu Beginn

Verständliche Darstellung der Suchergebnisse im Angebot der Stadtbibliothek Bremen:

Verkürzte Darstellung der Ergebnisse in Listenform Verkürzte Darstellung der Ergebnisse in Listenform

Eine nützliche Hilfe, um die gesuchten Inhalte im Angebot zu finden, ist das Aufzeigen ähnlicher Artikel im Angebot. Diese Zuordnung geschieht in der Regel über Schlagworte. Diese Zuordnung der Daten untereinander kann durch die Autoren der Seite erfolgen oder möglicherweise auch automatisch realisiert sein. Unabhängig davon gibt es verschiedene Möglichkeiten diese Beziehungen zwischen den Inhalten darzustellen. Die einfachste Lösung wäre die Anzeige als Linkliste am Ende des Artikels oder in einer zusätzlichen Spalte, je nach Design der Website. Wichtig ist, dass hierbei die Linearisierbarkeit und damit die Nutzerinnen und Nutzer einer Sprachausgabe berücksichtigt werden, denen diese Informationen möglichst dicht an dem gerade aufgerufenen Inhalt zur Verfügung stehen sollte. Eine weitere Darstellungsform wären sogenannte "Tagclouds". Eine Tagcloud enthält verwandte Themen in unterschiedlicher Gewichtung visuell als "Begriffswolke" dargestellt. Da die Tagclouds häufig alphabetisch sortiert sind, stehen die am Besten zum aktuellen Artikel passenden oder am häufigsten aufgerufenen Seiten nicht zu Beginn. Wie diese Struktur visuell und strukturell über den HTML-Code vermittelt werden kann, ist in der folgenden Abbildung am Beispiel des Angebots "Einfach für Alle" der Aktion Mensch zu sehen:

Screenshot einer Tagcloud auf der Webseite www.einfach-fuer-alle.de mit unterschiedlich groß dargestellten Begriffen in einer schmalen Spalte Screenshot einer Tagcloud auf der Webseite www.einfach-fuer-alle.de mit unterschiedlich groß dargestellten Begriffen in einer schmalen Spalte

Und der dazugehörige Quellcode der Tagcloud:

Screenshot des Quelltextes der Tagcloud auf der Webseite www.einfach-fuer-alle.de mit geschachtelten strong-Elementen in einer Listenstruktur Screenshot des Quelltextes der Tagcloud auf der Webseite www.einfach-fuer-alle.de mit geschachtelten strong-Elementen in einer Listenstruktur

Hierbei sollte darauf geachtet werden, dass die Gewichtung der Begriffe nicht nur visuell verfügbar ist. Um die geräteunabhängige Nutzung sicherzustellen, werden häufig geschachtelte strong-Elemente genutzt. Das strong-Element betont wichtige Inhalte. Ist diese Schachtelung zu tief, ist allerdings fragwürdig, ob per Sprachausgabe ein Unterschied in der Betonung noch wahrnehmbar ist. Gelegentlich sind auch animierte "Tagclouds" zu finden. Die Begriffe sind in diesem Fall für sehbehinderte Nutzerinnen und Nutzer, aber auch für Menschen mit Lernschwierigkeiten aufgrund der Bewegung der Begriffe nur schwer lesbar. Eine Bedienung und gezielte Auswahl von Begriffen per Kopfmaus oder Augensteuerung ist kaum möglich. Wird eine animierte "Tagcloud" eingesetzt, müssen auf jeden Fall die Anforderungen und Bedingungen der Wahrnehmbarkeit und Bedienbarkeit erfüllt werden. Insbesondere muss ausreichend Zeit zum Lesen gegeben sein (s. "Bewegungen, Blinken und Aktualisierung" in Abschnitt "2.4.2 Zeitgesteuerte Inhalte - Anleitung") und die Bedienung per Tastatur möglich sein (s. 2.4.1 Tastaturbedienbarkeit).

Unabhängig davon an welcher Stelle Verweise genutzt werden, ist es wichtig, dass diese eindeutig formuliert sind. Einige Browser und Hilfsmittel bieten die Möglichkeit über sogenannte "Linklisten" zu navigieren, die alle Verweise einer Seite (aus der Navigationsleiste, dem Fließtext im Inhalt, der Fußzeile usw.) in linearer Reihenfolge enthalten. Gerade Nutzerinnen und Nutzer eines Screenreaders nutzen diese Möglichkeit gerne, um sich einen schnellen Überblick über das Angebot zu verschaffen. Auch das Navigieren von Link zu Link per Tabulatortaste ist eine häufige Navigationsstrategie. Ist ein Linkziel zum Beispiel über ein Bild und einen Text neben oder unter dem Bild erreichbar, muss dies zu einem Link zusammengefasst werden, damit sofort klar ist, dass beide das gleiche Linkziel haben.

<a href="kontakt.html">
  <img src="kontakt.gif" alt="" />
  Kontakt
</a> 

Dateiformate oder Besonderheiten wie Größenangaben bei umfangreichen Dokumenten sollten im Linktext angegeben werden.

<a href="broschuere.pdf">
 Broschüre mit Veranstaltungsdetails
 <img src="pdf.png" alt="im PDF-Format"/>
</a>

In Artikeln werden am Ende einer kurzen Einleitung häufig "mehr"-Links oder "Weiterlesen"-Links angeboten. Empfehlungen aus der Usability-Forschung raten hiervon ab. Die Nutzerinnen und Nutzer lesen Seiten häufig quer und die in irgendeiner Form anders als der Fließtext formatierten Links fallen dabei besonders ins Auge und sollten daher kurz, aber aussagekräftig formuliert sein. In HTML gibt es die Möglichkeit einen Linktext durch das title-Attribut näher zu erläutern. Dieses Attribut wird aber nur unzureichend durch Benutzeragenten unterstützt und sollte daher, wenn es eingesetzt wird höchstens ergänzende Informationen enthalten, die für die Entscheidung dem Link zu folgen nicht wesentlich sind.

In Priorität I der BITV ist es ausreichend, wenn der Linktext im Kontext eindeutig ist. Dies hängt damit zusammen, dass in vielen Hilfsmitteln, zum Beispiel in Screenreadern Informationen zum Kontext schnell abrufbar sind und Lupen-Nutzerinnen und -Nutzer, die Informationen in der unmittelbaren Umgebung des Links bei der Entscheidung einem Link zu folgen, einbeziehen können. Eine Internetadresse ist zwar eindeutig, aber nicht beschreibend und daher nicht ausreichend.

Also statt:

<p>
 Weitere Informationen finden Sie 
 unter <a href="http://www.bmas.de/">http://www.bmas.de</a>
</p>

Besser:

<p>
 Weitere Informationen finden Sie im 
 <a href="http://www.bmas.de/">Webangebot des Bundesministeriums 
 für Arbeit und Soziales (BMAS)</a>
</p>

Die benötigten Informationen aus dem Kontext sollten möglichst vor dem Link stehen und nicht dahinter, da die Navigation durch die Inhalte bei der Sprachausgabe sequentiell erfolgt. Zum Kontext eines Links zählt dabei:

  • wenn der Link im Fließtext steht:

    • der Satz, in dem der Link enthalten ist
    • der Absatz, in dem der Link enthalten ist
  • wenn der Link in einer Liste enthalten ist:

    • der Text des Listenelements, in dem der Link enthalten ist
    • der Text des übergeordneten Listenelements, zu dem Listenelement, das den Link enthält
  • wenn der Link in einer Tabelle steht:

    • der Text der Tabellenzelle, in der der Link enthalten ist
    • der Text der Tabellenzelle, in der der Link enthalten ist, zusammen mit den zugeordneten Zeilen- und Spaltenüberschriften
  • die Überschrift vor dem Link

Zum Beispiel bedeutet dies, dass dieser Link im Fließtext in einem neuen Absatz nicht für alle Nutzerinnen und Nutzer eindeutig ist:

<p>
 Weitere Informationen haben wir im Webangebot des 
 Bundesministeriums für Arbeit und Soziales (BMAS) 
 für Sie zusammengestellt.
</p>
<p>
 Sie finden diese Informationen 
 <a href="arbeit.html">hier</a>.
</p>

Insbesondere "Mehr"-Links, die in einem neuen Absatz stehen, sind nicht eindeutig.

Ein Beispiel für Listen, die Links enthalten, die die Forderung erfüllen, ist im Folgenden dargestellt:

<ul>
 <li>Publikation ... des Ministeriums
  <ul>
   <li>im <a href="broschuere.pdf">PDF-Format (Größe:...)</a></li>
   <li>im <a href="broschuere.odt">Office-Format (Größe: ...)</a></li>
  </ul>
 </li>
 ...
</ul> 

Die in Priorität II der BITV geforderte Eindeutigkeit der Linkziele ist daher in jedem Fall für alle Linktexte zu empfehlen. Da die Navigation zu den übergeordneten Listenelementen für Nutzerinnen und Nutzer eines Screenreaders sehr aufwendig sein kann, besteht auch die Möglichkeit die Informationen noch einmal zusätzlich direkt an der Stelle des Links unsichtbar einzufügen. Lediglich Nutzerinnen und Nutzern einer Sprachausgabe wird dieser Text so vorgelesen und erspart diesen den gesamten Kontext eines Links zu erforschen. Der erläuternde Text wird per CSS versteckt (vgl. Technikdokument "C7: Using CSS to hide a portion of the link text"):

a span { 
 height: 1px; 
 width: 1px; 
 position: absolute; 
 overflow: hidden; 
 top: -10px; 
} 

Und im HTML-Quellcode entsprechend gekennzeichnet:

<dl>
 <dt>Handbuch Inklusion</dt>
   <dd><a href="handbuch.html">
       <span>Handbuch Inklusion </span>HTML</a></dd>
   <dd><a href="handbuch.pdf">
       <span>Handbuch Inklusion </span>PDF</a></dd>
 </dt>
...
</dl>

Diese Anwendung ist jedoch nur in seltenen Fällen zu empfehlen und ist nicht als Ersatz für das title-Attribut anzusehen. Ziel ist es immer den eigentlichen Linktext für alle Nutzerinnen und Nutzer, also auch Menschen mit Lernschwierigkeiten, Nutzerinnen und Nutzer einer Lupensoftware usw. barrierefrei zu gestalten.

Für blinde Menschen und Menschen mit motorischen Einschränkungen, können Tastaturkurzbefehle, sogenannte "Accesskeys" nützlich sein. Insbesondere bei der Gestaltung von Intranets bietet sich dies an, da hier die Nutzergruppe und eingesetzten Benutzeragenten besser bekannt sind. Problematisch beim Einsatz sind die häufig auftretenden Konflikte mit bereits vergebenen Tastaturkurzbefehlen (im Browser, in den eingesetzten Hilfsmitteln usw.). Daher ist für den Fall, dass diese eingesetzt werden sollen, eine einheitliche, bereits weit verbreitete Lösung zu empfehlen (vgl. "Navigieren mit Shortcuts" im Webangebot "Barrierefreies Webdesign".

Wird mit einer Schnellnavigation in Form von Auswahllisten für häufig nachgefragte Themen gearbeitet, müssen diese die Anforderungen an barrierefreie Formulare erfüllen (vgl. "2.7.1 Formulare").

Neben der technischen Zugänglichkeit ist, wie bereits erwähnt, eine verständliche und nachvollziehbare Navigation für die Nutzerinnen und Nutzer besonders wichtig. Einige Punkte zu diesem Thema werden daher in Abschnitt "2.4.6 Vorhersehbare Navigation" noch einmal vertieft. Zunächst wird im nächsten Abschnitt 2.4.5 jedoch auf die Navigation und Orientierung innerhalb einer einzelnen Internetseite eingegangen.

Beispiele

In der Anleitung sind viele Aspekte vorgestellt wurden, die erfüllt und berücksichtigt werden müssen, um eine verständliche Navigation und Orientierung im Internetauftritt sicherzustellen. Einige Beispiele, die diese Aspekte vereinen und positiv umsetzen, sind im Folgenden dargestellt. Aufgrund der besonderen Bedeutung der Suchfunktion und der Sitemap für die Orientierung, werden diese ebenfalls mit einem Beispiel näher erläutert. Auf ein weiteres Beispiel zur Tagcloud ist an dieser Stelle verzichtet worden. Wird eine Tagcloud eingebunden, muss diese die in Abschnitt 2.3 Struktur und Information dargestellten Anforderungen erfüllen.

Verständliche Navigation

Die Orientierung sollte, wie bereits in der Anleitung näher erläutert, auf vielen verschiedenen Wegen unterstützt werden. So wie in diesem Beispiel auf der Seite Webangebot des Bundesministeriums für Verkehr, Bau und Stadtentwicklung, durch Hervorhebung der gewählten Navigationspunkte, sowohl in der Hauptnavigation als auch in der Bereichsnavigation, durch ein Orientierungsbild im Kopf der Seite und einen "Breadcrumbtrail. Zusätzlich ist hier die Service-Navigation um Symbole ergänzt worden, so dass das Verständnis der Linkziele verbessert wird. Symbole sollten immer wie in diesem Beispiel zusammen mit den entsprechenden Navigationsbegriffen verwendet werden und ausreichend groß und kontrastreich gestaltet sein, damit sie auch von Menschen mit einer Sehbehinderung gut erkannt werden können:

Servicenavigations-Leiste mit Begriffen sowie zusätzlichen Symbolen in ausreichender Größe Servicenavigations-Leiste mit Begriffen sowie zusätzlichen Symbolen in ausreichender Größe

Im Webangebot "bund.de" ist der Behördenbereich zum einen durch die Hervorhebung der als Karteikarten gestalteten Navigation gegeben, und zum anderen durch ein Bild zur Orientierung in der linken Spalte der Seite:

Im Angebot bund.de hervorgehobener aktueller Tab und Bild zur Kennzeichnung des aktuellen Bereichs Im Angebot bund.de hervorgehobener aktueller Tab und Bild zur Kennzeichnung des aktuellen Bereichs

Gestaltung der Suchfunktion

Auch die Gestaltung der Suchfunktion ist wesentlich für das Auffinden der gewünschten Inhalte im Angebot. Auf allen Seiten des Angebots sollte eine einfache Suchfunktion wie diese im Angebot "bund.de" verfügbar sein. Das Feld für die Eingabe des Suchbegriffs sollte deutlich als solches erkennbar sein. Zum Beispiel durch eine Beschriftung, die zusätzlich als label-Element ausgezeichnet werden kann und die anklickbare Fläche zur Aktivierung bei Mausnutzung vergrößert:

Beschriftung vor dem Eingabefeld lautet "Was suchen Sie?" und wird gestartet über die Schaltfläche "Finden" Beschriftung vor dem Eingabefeld lautet "Was suchen Sie?" und wird gestartet über die Schaltfläche "Finden"

Gestaltung der Sitemap

Je nach Größe des Webangebots wird eine Sitemap, die alle Seiten in einer verschachtelten Liste darstellt sehr unübersichtlich sein. Daher sollte die Sitemap zusätzlich durch Überschriften in Bereiche gegliedert werden und auch visuell ansprechend und übersichtlich gestaltet sein. Im Angebot "Wir-sind-bund.de" ist eine übersichtliche Sitemap zu finden:

Screenshot der übersichtlich gestalteten Sitemap im Angebot wir-sind-bund.de Screenshot der übersichtlich gestalteten Sitemap im Angebot wir-sind-bund.de

BITV 1.0 zu BITV 2.0

Grundsätzlich waren die Anforderungen und Bedingungen zur Gestaltung einer barrierefreien Navigation und zur Unterstützung der Orientierung im Angebot bereits in der BITV 1.0 enthalten. In der alten Anforderung 12 hieß es "Der Nutzerin, dem Nutzer sind Informationen zum Kontext und zur Orientierung bereitzustellen" und in Anforderung 13 ergänzend "Navigationsmechanismen sind übersichtlich und schlüssig zu gestalten". Dies wurde in der BITV 2.0 stärker aufgeteilt und ist entsprechend den beiden Prinzipien "Bedienbarkeit" und "Verständlichkeit" zugeordnet.

Die technologieabhängigen Bedingungen (u.a. zu "Frames") sind durch allgemeine, Technologie unabhängig formulierte Bedingungen ersetzt worden. Insgesamt bieten die zugeordneten Technikdokumente mehr mögliche Lösungswege als bisher und lassen den Webdesignern mehr Freiheiten zur Gestaltung des Navigationskonzepts.

Einige Bedingungen sind deutlicher ausformuliert worden, so dass Unsicherheiten und Interpretationen bei der Umsetzung wegfallen. Dazu zählt zum Beispiel der Zweck eines Links und die Kennzeichnung des Standorts im Angebot.

Bei einem Angebot, dass bereits BITV 1.0 konform ist, werden Sie nur wenige Anpassungen an der Navigation und den Orientierungshilfen vornehmen müssen, um die in diesem Abschnitt besprochenen Aspekte der Anforderung "2.4 Orientierung und Navigation" umzusetzen.

© Bundesministerium für Arbeit und Soziales