Drucken
  • Facebook
  • Google+
  • Twitter
  • XING
05.04.2014

Keyboard-Only Navigation mit verbessertem Zugang

Ermöglich Sie den Nutzer, die ohne Maus arbeiten, mit Sprungmarken und sichtbarem Tastaturfokus einen leichten Zugang zu Interaktions- und Navigationselementen.

Tastaturschreiben

© PureSolution - Fotolia.com

 

by Marieke McCloskey (deutsche Übersetzung) - 06.04.2014

 

Einige Nutzer navigieren im Internet mit der Tastatur und nicht mit der Maus. Experten, d.h. sogenannte "Power"-Nutzer bevorzugen wegen der erhöhten Effizienz Tastaturbefehle. Nutzer mit Einschränkungen hingegen haben oftmals gar keine andere Wahl als die Tastatur zu nutzen. So können beispielsweise Menschen mit motorischen Einschränkungen die feinen motorischen Bewegungen die bei der Navigation per Maus verlangt werden gar nicht ausführen; blinde Nutzer greifen auf Hilfstechnologie wie Bildschirmlesegeräte zurück und können nicht sehen wo die Maus eingesetzt werden muss.

Der grosse Unterschied zwischen Tastatur und Maus ist, dass der Zugang per Tastatur in Sequenzen erfolgt. So muss sich der Nutzer durch alle Links einzeln klicken um den angestrebten Link zu erreichen. Im Gegensatz dazu kann ein Maus Nutzer die verfügbaren Links auf der Seite nach dem gewünschten Ziel durchsuchen und dann den Link direkt anklicken.

Selbst die beste Seite oder ausgefallenste Webseite ist vollkommen nutzlos, wenn der Anwender auf die Kontrollfunktionen nicht zugreifen kann und nicht mit der Webseite interagieren kann.

Testen Sie den Webseitenzugang über die Tastatur

Für diejenigen von Ihnen, die diesen Artikel auf einem Desktop PC oder auf einem Laptop mit Firefox, IE, Chrome, oder Safari lesen, führen Sie bitte die folgende Übung aus.

  1. Klicken Sie in die Addressleiste des Browsers.
  2. Nehmen Sie die Hand von der Maus und nutzen Sie nur Ihre Tastatur.
  3. Wechseln Sie mit der Tab Taste bis Sie den unten stehenden Link erreichen. (Über Shift+Tab können Sie einen Schritt zurück navigieren.)

    Testlink, führt nirgendwo hin

Ihnen sind wahrscheinlich diese 4 Dinge aufgefallen:

  1. Sie konnten da weiter machen wo der Tastaturfokus auf der Seite war.
  2. Es war Ihnen möglich, jeden Link auf der Seite auszuwählen.
  3. Die Wechsel über die Tab-Taste erfolgten in der Reihenfolge des Seitenlayouts: in Kolumnen von links nach rechts und von oben nach unten.
  4. Es war ein wenig nervig über die Tab-Taste durch die langen Listen zu navigieren, bevor Sie den Test-Button erreicht haben (aber es war möglich).

Dies ist ein schneller Test den Sie auch auf Ihrer Webseite ausführen können. Wenn Sie den Test machen, folgen Sie diesen 3 Richtlinien um auf Ihrer Webseite einen Zugang über die Tastatur möglich zu machen.

Eindeutiger Tastaturfokus

Stellen Sie sich vor wie jemand mit der Maus durchs Internet navigiert, ohne dass er den Zeiger auf dem Bildschirm sieht. Unmöglich nicht wahr? Genauso fühlt es sich an, wenn kein visueller Hinweis auf den momentanen Tastaturfokus existiert.

Webseiten müssen das gleiche Feedback für Tastaturnutzer bieten wie für Mausnutzer. Der Tastaturfokus ist standardmässig in alle gängigen Web-Browser codiert. Einige Browser arbeiten standardmässig mit einer dünnen, grau gepunkteten Linie, andere mit einer soliden, blauen Grenze (Dieser Unterschied spielt keine Roll: Nutzer werden die Konfiguration ihrer Lieblingsbrowser kennen).

Das Entfernen des Tastaturfokus ist katastrophal für einen Nutzer der über die Tastatur navigiert. Üblicherweise wird die Bildschirmansicht entfernt, da sie als Störung für die Augen empfunden wird. Wenn Sie die Anbieteransicht nicht mögen, entfernen Sie nicht alles. Ersetzen Sie die Ansicht stattdessen mit einem Design, das zu Ihrer Webseite passt. Dieses CSS Tutorial (engl.) über das Hinzufügen von neuen Fokusstilen könnte hilfreich sein.

Website von MailChimp

MailChimp.com nutzt den visuellen Fokus der Standard-Browser. Im obigen Beispiel, wie unter IE 11 zu sehen ist, wird klar, dass der Nutzer sich auf dem Link "Email Designer" befindet. Durch Drücken der Eingabetaste würden Sie auf diese Seite gelangen.

Website von StrideHealth

StrideHealth.com hat den visuellen Standardfokus durch das Hover-State Design ersetzt: Das Wechseln mit der Tab-Taste durch die Hauptnavigation in der oberen rechten Ecke sieht genauso aus, als würde mit der Maus gearbeitet. Es geht klar hervor, dass der Nutzer sich derzeit auf "Find Your Plan" befindet.

Auf alle interaktiven Elemente kann zugegriffen werden

Tastatur-Nutzer müssen in der Lage sein, auf alle interaktiven Elemente und nicht nur die Hauptnavigation oder die "In-Line" Links zugreifen zu können. Das bedeutet, dass Elemente in Formularen, Dropdown Menüs, Dialogfelder und andere Schaltflächen nur durch Wechseln mit der Tab-Taste abgerufen werden können.

Das grösste Problem wird durch JavaScript-Widgets mit <div> oder <span> Elementen verursacht. Diesen kann ein Tastaturfokus durch Tab Index (engl.) zugeordnet werden. Alternativ, wenn nur HTML Links gebraucht werden, sorgen Schaltflächen und Formularfelder dafür, dass alle Elemente über die Tab-Taste erreicht werden können.

Ticket Formular des San Franzisco Zoos

Das Ticket Formular des San Franzisco Zoos kann per Tastatur erreicht werden. In der obigen Abbildung ist der Tastaturfokus auf dem Feld für den Vornamen. Durch Drücken der Tab-Taste wird der Fokus auf den Nachnamen geschoben. Durch die Wechselmöglichkeiten können die Nutzer das Formular ausfüllen und übermitteln.

Karussell bei Bed, Bath and Beyond

Ein häufiges Problem ist, das auf Medienkontrollen, wie die in Karussells nicht durch die Tastatur zugegriffen werden kann. Bei "Bed, Bath and Beyond" hingegen, können Sie auf die jeweiligen Registrierkarten Anzeigen zugreifen und die Eingabetaste drücken um Karussell Kapitel anzuzeigen (Beachten Sie, dass dieses Karussell mit erkennbaren Symbolen oder Vorschaubildern anstelle von Punkten wesentlich effektiver wäre).

Pop-up-Fenster bei FDA.gov

FDA.gov verfolgt den Tastatur-Zugang, indem sie dem Nutzer ermöglicht, zu und aus Pop-Ups zu navigieren. Es ist extrem wichtig für Nutzer, die Pop-Ups schliessen zu können sonst würden Sie in ihnen stecken bleiben.

Bei Dropdown Menüs kann es schwierig sein sie über die Tastatur zu nutzen, wenn die Nutzer nicht getrennt von der Auswahl auch durch die Listen scrollen können. Das geschieht, wenn die "Pfeil nach unten" Taste den ersten Artikel auf der Liste auswählt anstatt durch die Listenoptionen nach unten zu laufen. In unten skizzierten Dropdown Menü würden durch einmaliges Drücken der Pfeil nach unten Taste zum Beispiel Äpfel ausgewählt. Stattdessen sollte die Pfeiltaste den Nutzer zwischen Äpfeln, Bananen und Orangen scrollen lassen und die Eingabetaste sollte zum Auswählen genutzt werden.

Dropdown-Liste

Dropdown-Liste auf Ted.com

Die Dropdown-List auf Ted.com funktioniert gut mit der Tastatur. Nutzer können per Tab-Taste zum Filter ihrer Wahl wechseln, in diesem Fall Veranstaltungen, dann die Eingabetaste drücken, was Sie direkt innerhalb der Dropdown Liste bringt. Danach können die Pfeiltasten zum Auswählen des Artikels genutzt werden und ein weiteres Drücken der Eingabetaste bestätigt die Auswahl.

Ziehen Sie einen Link zum Überspringen der Navigation in Betracht

Auf den meisten Webseiten wird die Tabulator Reihenfolge so codiert, dass das Seitenlayout reflektiert wird, das heisst von oben nach unten und von links nach rechts. Das hilft Nutzern von Tastaturen über die Seite zu navigieren.

Eine der Fallen die beim Navigieren durch das Seitenlayout per Tab-Taste entstehen, ist dass das die Navigation zunächst im herkömmlichen Homepage-Layout erfolgt (welches nach unseren Empfehlungen dringendst erhalten werden sollte um Erwartungen von Nutzerseite zu erfüllen). Bei einigen Webseiten bedeutet dies jedoch, dass Tastaturnutzer möglicherweise durch mehr als 100 Navigationselemente wechseln müssen um zum Hauptinhalt zu gelangen, was sehr schwierig sein kann (alleine aufgrund des Zeitaufwandes).

Maus-Nutzer können die Hauptnavigation einfach ignorieren und direkt mit jedem der Links der Hauptseite interagieren. Mit einem Link zum Überspringen der Navigation (engl.) bieten Sie auch den Nutzern die nur mit der Tastatur arbeiten einige dieser Vorteile.

Tab-Reihenfolge

Die Reihenfolge der Webseite der Stadt London, folgt bei der Navigation per Tab-Taste dem gleichen optischen Fluss wie der Seitenaufbau. Die mit roten Kreisen hinterlegten Zahlen zeigen die Reihenfolge und Richtung der Seitennavigation per Tab-Taste.

Skip Navigation

Die Webseite der Stadt London bietet in ihrer oberen linken Ecke einen Link der es erlaubt, direkt zum Hauptinhalt zu springen. Dieser Link wird nur sichtbar wenn Nutzer über die Tab-Taste durch die Seite navigieren, so dass das visuelle Design für Mausnutzer nicht gestört wird. Der Link-Name ist präzise und beschreibend.

Fazit

Menschen, denen es nicht möglich ist eine Maus zu verwenden oder die Webseiten-Tastatur auf dem Bildschirm zu sehen, müssen auf den gesamten Inhalt und die Funktionalität der Webseite durch ihre Tastatur zugreifen. Um Ihre Webseiten Tastatur zugänglich zu machen ist es wichtig den Nutzern das: 1) mitgehen mit dem Tastaturfokus, 2) navigieren zu allen interaktiven Elementen und 3) Umgehen der Navigation bei vielen Links, zu erlauben.

 

© Deutsche Version. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.

Kommentare auf diesen Beitrag

    Keine Kommentare

Kommentar hinzufügen

Die mit * gekenzeichneten Felder sind zwingend auszufüllen