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:

<a href="http://www.muehlwitz.de/" accesskey="h"><em>H</em>omepage</a>

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

PouchDB – CouchDB mit Javascript Ich habe ja schon desöfteren verkündet, das man nicht alles mit MySQL todschlagen muss. Zum einen gibt es sinnvolle Key-Value-Stores, zum anderen Date...
Typeahead – Auto-Complete von Twitter Wenn man in der letzten Zeit eine Sau durch das Dorf getrieben hat, dann war das wohl suggestive Vorschläge bei Formularen. Lustigerweise gibt es die ...
jFontSize – dynamische Font-Size mittels jQu... Ich entwickele zur Zeit einen Magento-Shop für Silver Surfer. Natürlich gibt es da besondere Ansprüche, und eine davon ist die klare Lesbarkeit der Se...
elRTE – WYSIYWYG-Editor in jQuery inkl. Dateimanag... WYSIWYG-Editoren sind etwas Nettes, haben aber dennoch ein Problem: Die Bilder, die man in den Text einbinden möchte, müssen dummerweise erstmal auf d...

Schreibe einen Kommentar