Tastaturnavigation in den Kommentaren eines WordPress-Blogs

Vor einigen Tagen wies mich +Kerstin Probiesch auf ein Problem bei Kommentaren in einer WordPress-Installation hin:
Bei Kommentaren gibt es die Option einen Link zur Antwort auf den speziellen Kommentar einzubauen.
Bei einem Klick auf diesen Link „Antworten“ wird mittels JavaScript direkt unter dem Beitrag das Formular angezeigt.
Das Problem ist nun, daß der Cursor dabei schon einen Focus auf das Texteingabefeld des Formulars bekommt. Die Idee ist da wohl, dass man so gleich lostippen und den Kommentar beantworten kann und später dann Namen und E-Mail angibt.
Dies ist für Benutzer, die eine Maus benutzen können auch in Ordnung.
Leider verlangt das Kommentieren eines Artikels in der Regel auch die Eingabe eines Namens und einer E-Mail. Diese befindet sich jedoch in der Reihenfolge der Eingabefelder vor der Texteingabe. Und da der Tastaturbenutzer meist nicht rückwarts tabben kann, folgt nun das doch recht nervige Problem: Der Benutzer muss die gesamte Website von vorne durch-tabben- bis er wieder zum Formular angelangt ist und dort dann sein Name und seine E-Mail nachzutragen.
Wenn der Blogbeitrag viele Kommentare hat, macht der Benutzer das bestimmt nicht häufig. Wenn überhaupt.

Das klingt alles etwas abstrus. Am Besten erfährt man dies, indem man selbst mal ein Standard- WordPress-Blog, welches diese Funktion hat (in den Themes TwentyTen und TwentyEleven müsste es aktiv sein).

Wie kommt es nun dazu und was kann man dagegen tun?

Im Theme wird dabei die Funktion comment_reply_link() verwendet. (vgl: http://codex.wordpress.org/Function_Reference/comment_reply_link)
Diese Funktion fügt den Link ein, der einen JavaScript-Aufruf enthält. Der JavaScript-Aufruf läd das Formular bei Klicken nach und setzt dann noch einen focus() auf das Textfeld mit der CSS-Id „comment“.
Die JavaScript-Anweisungen befinden sich in der Datei wp-includes/js/comment-reply.js .
(Diese Datei ist „mimified“. Wer sie sich genau anschauen will, sei auf die Datei comment-reply.dev.js verweisen, dei im selben Verzeichnis liegt).

Wer ein Theme baut, sollte zwei Lösungen in Betracht ziehen:

  1. Die Funktion garnicht erst benutzen. In dem Fall wird sich auch kein Kommentarthread aufbauen, sondern die Kommentare werden flach auf einer Ebene aufeinander folgen. Die Referenz von einem Kommentar zu einem anderen ist damit allerdings nicht mehr gegeben.
  2. Das Skript muss angepasst werden.
    Dies sollte man jedoch tunlichst nicht in der Originaldatei tun. Wer ein neues Theme baut, sollte sich das Skript in sein eigenes Theme-Verzeichnis kopieren und darin die Änderungen vornehmen.

 

Wir passen also das Skript an. Denn auskommentieren ist ja bekanntlich keine Lösung :)

Zunächst zum Skript:
Die einfachste Änderung besteht darin, den Fokus zu ändern auf die Id „commentform„. Damit wird der Fokus auf den Anfang des Formulars gesetzt, denn dieses ist die ID, die das <form>-Element erhält.
Am Ende des Skriptes wird also die Anweisung

try{m.I("comment").focus()}

gesucht und durch

try{m.I("commentform").focus()}

ersetzt.

Um das nun geänderte Skript in dem Theme zu aktivieren, müssen als nächstes in der functions.php folgende Zeilen ergänzt werden:

wp_deregister_script('comment-reply');

Hiermit deaktivieren wir das bisherige Skript aus wp-includes .

wp_register_script('comment-reply', get_template_directory_uri()."/comment-reply.js" , false);
 wp_enqueue_script('comment-reply');

Mit der ersten Anweisung gebe ich WordPress den Ort meines neuen Skriptes bekannt (in diesem Fall ist es direkt im Theme-Verzeichnis). Mit der zweiten Anweisung aktiviere ich es.

Das wars.
Und somit ist das WordPress-Theme wieder ein bischen barrierefreier geworden.

Dieser Artikel wurde auch auf G+ publiziert. Sie können sowohl hier, als auch dort kommentieren.