Bei der Navigation mit der Tastatur arbeiten

In letzter Zeit hat sich das Web durch Online-Anwendungen auf die Fahne geschrieben, Desktop-Anwendungen ablösen zu wollen bzw. zu ersetzen. Die Ansätze sind ganz gut, die Usability bleibt oft auf der Strecke. Wobei Usability hier relativ zu sehen ist: Es ist wahrscheinlich bis ins letzte Detail geplant und getestet worden, wie die Elemente auf dem Bildschirm angeordnet werden, aber ohne Maus ist man aufgeschmissen.

Zu einer guten Anwendung gehört für mich stets die Möglichkeit, wenn ich das will, während der Nutzung die Hände nicht von der Tastatur wegzunehmen, um die Maus benutzen zu müssen. Ein gutes Beispiel für eine gelungene Umsetzung ist zum Beispiel der Google Reader, der sich auf Wunsch komplett über die Tastatur steuern lässt – auch wenn man sich manchmal wünschen würde, dass es vielleicht etwas bunter wäre :)

Dies wiederum führt zum Problem WIE man sinnvoll Aktionen im Browser mit der Tastatur verknüpft. Lustigerweise kommt hinzu, dass gerade im Bereich des barrierefreien Internet-Designs Accesskeys Pflicht sind! Hierbei ist der Aufruf denkbar einfach:

Homepage

Durch die Tastatur-Kombination CTRL-H würde dann der Link direkt aufgerufen werden. Im Falle von Google Reader nützt uns das allerdings gar nichts, da zum Beispiel die Taste j für nächste News so nicht angesprochen werden kann. Zum einen fehlt das CTRL, zum anderen wird kein Link angesprochen, sondern eine Javascript-Funktion.

Entsprechend muss auch hier eine Javascript-Lösung dafür sorgen, dass auf bestimmte Tasten Events gelegt werden können, die dann eine Aktion auslösen. Helfen kann hier zum Beispiel das jQuery-Plugin js-Hotkeys, die genau dies ermöglicht.

Ein vergleichbarer Aufruf in jQuery wäre dann:

$(document).bind('keydown', 'ctrl+c', fn);

Der die CTRl-C mit der Funktion fn verbindet. Das Plugin kann jede beliebige Tastenkombination mit jeder beliebigen Funktion verbinden, eine Zuordnung lässt sich auch wieder aufheben:

$(document).unbind('keydown', 'ctrl+c', fn);

Wie ich finde eine sehr nette Möglichkeit um die Usability einer Webseite drastisch zu erhöhen!

Ähnliche Beiträge

Boxjs – Script Loading mittels CDN Es gibt inzwischen einige Skripte die sich mit nichts anderem beschäftigen, als die eigentlichen Skripte, die man auf der Webseite benötigt, nachzulad...
Enquire.js – Media Query Callbacks in JavaScript Media-Queries sind eine richtig schicke Angelegenheit, ohne die ein Responsive Design nicht möglich wäre. Ganz einfach ausgedrückt läuft die Sache so:...
Moderne JavaScript DevTools in Chrome Alles ändert sich, auch JavaScript. Oder besser gesagt die Art wie JavaScript eingesetzt wird. Früher ist man mit den DevTools von Chrome hingegangen ...
Fehlende Bilder mit jQuery nachbearbeiten Hat man mal einen Blog oder eine Webseite ein paar Jahre online, entstehen primär zwei Probleme: 1) Evtl. verlinkte Seiten existieren nicht mehr und 2...

Schreibe einen Kommentar