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

knockout.js – was ist es, was kann es? Nicht zuletzt durch ein Tutorial bei tutsplus.com bin ich auf knockout.js aufmerksam geworden. Da inzwischen ein regelrechter Hype um das relative kle...
Backgrounds für Grid Based Layouts Okay, ich gebe zu, der Titel ist maximal mystisch, passt aber ;) Ich glaube zum Grid Based Design brauche ich nichts mehr zu sagen, und es gibt ja auc...
Wie man AdBlock blockt, und warum AdBlock ist eine Extension für diverseste Browser, die durchaus ihre Daseinsberechtigung besitzt - zum Beispiel dann wenn ich auf der Startseite der T...
Intention.js – Responsive direkt im HTML def... Je nach Einsatz von Responsive ist es normal, das man auch Bilder austauschen muss, oder Design-Elemente anpassen. Die Intention dahinter ist stets kl...

Schreibe einen Kommentar