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

qTip2: Tooltips mit jQuery Wenn man erst einmal verdrängt hat, dass ich nicht über Ohrenstäbchen blogge, kann man sich mit dem Gedanken beschäftigen, dass es um Tooltips geht. D...
Drupal, die White Screen of Death und das Byte Ord... Was ein Titel – hollywoodtauglich! :) Aber durchaus mit einem Hintergrund: Drupal kann in einen Zustand geraten, wo es außer einer weißen Seite (der W...
Vintage Effekte für Photos mittels jQuery Ich steh ja auf diese Vintage-Effekte für Photos, und insbesondere auf die ganzen Instagram-Filter die es so gibt. Früher war es ja so, dass man diese...
HTML5 Cheat Sheets Ok, es sind nur zwei, aber mehr braucht man auch (erstmal) nicht ;) HTML5 bietet viele neue Möglichkeiten, die nicht nur Videos und Audio betreffen, s...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.