Usability-Tipps - Kapitel "Barrierefreiheit-Inhaltsgestaltung-Navigation"

Benutzerfreundliche Webseiten durch Skiplink-Navigation

Seit Web 2.0 ist es noch einfacher, eine Website zu erstellen, die sich um mehr als ein Thema dreht, mehr als einen kurzen Textblock auf einer Seite enthält oder zahlreiche „vermischte“ Inhalte bietet. Mashups und RSS erlauben die Implementierung interessanter Inhalte in neuer Zusammenstellung auf eigenen Seiten. Damit werden einzelne Webseiten aber nicht nur komplexer und informativer, sondern erfordern oft auch besonders viel Übersichtlichkeit. Umso entscheidender ist es, dass die Webseiten richtig aufgebaut sind. Dabei sollte der Aufbau der Webseite so gestaltet sein, dass der User bequem navigieren und ohne Umwege schnell an das gewünschte Ziel der aufgerufenen Webseite kommen kann. Um eine Webseite effektiv und benutzerfreundlich zu gestalten, sodass die Usability der Webseite klar im Vordergrund steht, gibt es verschiede Möglichkeiten. Eine davon sind die so genannten Skiplinks.

Skiplinks (englisch: to skip, deutsch: überspringen) sind Links die es ermöglichen, größere Bereiche einer Webseite zu überspringen. Skiplinks unterstützen zum Beispiel Nutzer, die nur mit Tastatur arbeiten, bzw. auf Hilfsmittel wie Screenreader oder Braille-Display angewiesen sind. Häufig Verwendung finden Sie zum Beispiel für eine Erleichterung der Arbeit zum Beispiel für behinderte Menschen. Sehbehinderte User, die Screenreader benutzen, können nicht einfach weiterklicken, denn Screenreader linearisieren die Inhalte einer Webseite und geben sie nacheinander wieder. Diese Vorgehensweise kann sehr viel Zeit in Anspruch nehmen, besonders wenn es sich um gleiche Inhalte auf jeder Seite der Webpäsenz handelt, wie zum Beispiel die Navigation. Skiplinks lassen sich solche Bereiche schnell überspringen, und der Nutzer kann gezielt an die interessanten Informationen kommen. Enthält jede Seite eines Webauftritts z. B. einen Block mit Skiplinks am Anfang des Seitenquelltextes, kann nach dem Lesen einer Seite und dem Verfolgen eines Links so der komplette Kopf und die Navigation übersprungen werden, um gleich zum gewünschten Hauptinhalt zu gelangen.

Skiplinknavigationen verbessern die Benutzerfreundlichkeit der Webseite aber nicht nur für User, die einen Screenreader verwenden. Skiplinknavigationen sollten so angeordnet werden, dass sie als optimale Sprungmarken durch wichtige Bereiche der Webseite führen und die Usability erleichtern. Auf diese Weise wird es dem User vereinfacht, zu wichtigen Inhalten (z. B. „zum Login“ etc.) der Seite zu gelangen, ohne alle Elemente durchlesen zu müssen, um nach dem nächsten Untermenüpunkt zu suchen. Eine Skiplinknavigation bietet einen effektiven und einfachen Weg durch die Webpräsenz zu navigieren. Eine festgeschriebene Platzierung der Skiplinknavigation gibt es nicht. Skiplinks werden auf verschiedene Art und Weise verwendet.

Sichtbare Skiplink – Navigation

Viele Webseitenbetreiber bieten ihren Usern bewusst eine sichtbare Skiplinknavigation. Eine eindeutige Regelung, wann sichtbare Skiplinks verwendet werden sollen, gibt es leider nicht. Die Vorteile einer sichtbaren Navigation liegen allerdings darin, dass die meisten Browser damit arbeiten können und dem User eine schnell und komfortabel Navigation selbst durch große Webseiten ermöglicht wird. Beim Einsatz von modernen Screenreadern wird der entsprechende Abschnitt im Quellcode der Seiten auch im normalen Browser angezeigt und ermöglicht es, zwischen den einzelnen Elementen oder Inhalten zu springen, ohne den gesamten Inhalt erfassen zu müssen. Für PDA und Handy sind auf Grund der kleineren Displays derartige Sprungmarken von großem Nutzen. Solche Links werden entweder in kleiner Schrift relativ dezent oberhalb des Kopfes einer Seite platziert oder befinden sich auch schon mal am Platz der Detailnavigation, um von hier aus die Teile der bereits geladenen Seite („zu Abschnitt x“) anzuspringen, statt neue Seiten zu öffnen. Ein weiteres Beispiel für eine solche Marke wäre z. B. ein Verweis wie dieser hier, der an den Anfang dieses Artikels verzweigt. Es handelt sich um einen ganz „gewöhnlichen“ Link, der auf einen „Anker“ auf der Seite zeigt. Im Quelltext steht das dann so aus:

<!–Definition des Ankers am Anfang des Beitrags –>
<a title=“anfang“ name=“anfang“></a>Seit Web 2.0 ist es…


<!–Link im Text, der auf den Seitenanker verweist –>
… wie <a href=“#anfang“>dieser hier</a>, der …

Eine gängige Verwendung für solche sichtbaren Skiplinks mit Namen innerhalb der Seiteninhalte sind Verweise an den Anfang der Seite, wenn eine Liste von verschiedenen Inhalten ebenfalls vom Anfang der Seite aus angesprungen werden können. Diese Vorgehensweise ist z. B. auf FAQ-Seiten üblich, die mehrere Fragen am Anfang der Seite enthalten und auf die passenden Antworten darunter per Skiplink verweisen. Es stehen diverse Varianten zur Verfügung; zum Beispiel, „zum Inhalt“, „zum Seitenanfang“, „zum Seitenende“ und viele andere, die z. B. zur Navigation zwischen einzelnen „Modulen“ der Seite genutzt werden können. Selbst für einen Laien ist mit einem namentlichen Skiplink erkenntlich, das er bequem mit Klick zum Beispiel wieder zum Seitenanfang gelangt. Skiplinks mit Namen können sichtbar zum Beispiel in folgender Form auf der Webseite vorhanden sein

  • direkt zum Inhalt / Inhalt
  • Springe zu / Gehe zu…
  • nach oben
  • back
  • back to top
  • etc.

Unsichtbare Skiplinks

Befürworter der unsichtbaren Navigation führen an, das Nutzer, die ohne Einschränkungen oder Behinderung mit ihren Augen oder der Maus arbeiten können, keine Skiplinknavigation benötigen und eine sichtbare Navigation zu Verwirrung beim User führen kann. User können einfach zu interessanten Bereichen weitergehen oder mit der Maus weiterscrollen. Aus diesem Grund werden Skiplinks auf „klassischen Bildschirmen“ im Browser und auch beim Ausdruck häufig nicht angezeigt. Doch wozu sind die unsichtbaren Skiplinks geeignet? Ein Patentrezept, wann unsichtbare Skiplinks verwendet werden, existiert auch hier nicht. Befürworter der unsichtbaren Navigation sehen folgenden Vorteil: Soll die Seite auf unterschiedlichen Geräten angezeigt werden und die Sprungmarken sind zum Beispiel nur für Handy oder PDA notwendig, erfolgt dies mit ausgeblendeten Skiplinks. Die Skiplinks kommen folglich nur dann zum Einsatz, wenn sie wirklich notwendig werden.

So beinhaltet auch diese Seite „unsichtbare“ Skiplinks, die per CSS ausgeblendet wurden und daher in einem normalen Browser nicht zu sehen sind. Arbeiten Sie mit Firexos, können Sie die Verwendung von CSS abschalten, indem Sie „Ansicht -> Webseiten-Stil -> Kein Stil“ auswählen. In diesem Fall erscheinen Verweise zum Hauptinhalt und zur Haupt- bzw. Detailnavigation am Anfang der Seite – andere (mehr) Skiplinks sind hier ebenso denkbar. Dazu enthält der Seitenquellcode möglichst weit oben folgende Liste:

ul id=„skip“>
<li><a href=„#cnt“>zum Inhalt</a></li>
<li><a href=„#mnav“>zur Hauptnavigation</a></li>
<li><a href=„#dnav“>zur Kapitelnavigation</a></li>
</ul>

Die Anker auf der Seite sind genau wie im obigen Besipiel an den entsprechenden Stellen des Quelltexts angebracht. Der Code in den CSS-Anweisungen zum Ausblenden der Liste, indem diese in den unsichtbaren Bereich außerhalb des „Viewport“ (Anzeigebereich) des Browsers verschoben wird, sieht so aus:

#skip {
left:-3000px;
position:absolute;
}

Fazit: eine Skiplinknavigation kann nicht nur für Menschen mit einer Behinderung von Vorteil sein, sondern für alle User im täglichen Gebrauch. Sie ermöglicht eine schnelle und effiziente Navigation. Dabei sollte allerdings darauf geachtet werden, dass nicht unzählige, wahllose Skiplinks Verwendung finden, sondern ausschließlich wichtige Sprungmarken gesetzt werden. Welche Form Verwendung findet, sichtbar oder unsichtbar, bleibt am Ende dem Webseitenbetreiber überlassen.