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

Tutorial zur Passwortstärke mit jQuery Der Fall YouPorn hat eindrucksvoll bewiesen, wie simpel Passwörter sind. An der Uni habe ich in einem Kurs echt wilde Dinge gelernt um Systeme zu bela...
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...
melonJS – Spieleentwicklung in HTML5 Spieleentwicklung in HTML5 ist "the next big thing" - aber das ist nicht wirklich was Neues. Es geht inzwischen auch nicht mehr wirklich um das ob, so...
Chosen – Select-Boxen in Benutzerfreundlich Select-Boxen sind relativ benutzerfreundlich, so lange man nicht so viel Auswahl hat, und insbesondere nicht mehrere Werte der Box auswählen soll. Let...

Schreibe einen Kommentar