Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Tastaturbedienung mit <span> und onclick veröffentlicht in 2013

Tabulatortaste, tabindex und tastaturabhängige Event-Handler

Als Beispiel für die (fehlende) Tastaturbedienbarkeit eines Links soll ein SPAN-Element dienen, das mit JavaScript anklickbar gemacht wird:

<span class="unechtelinks" onclick="tueWas();">Linktext</span>

Mit der Klasse kann der Text so gestaltet werden, dass er wie ein Link aussieht:

span.unechtelinks {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

Mit dem onclick-Event-Handler wird der Linktext mit dem Mauszeiger anklickbar. Allerdings ist der Linktext in dem Beispiel für Tastaturnutzer gänzlich unzugänglich.

Für sehende Tastaturnutzer muss der Fokus grundsätzlich mit der Tabulatortaste auf den Linktext gesetzt werden können und der Event-Handler muss mit der Eingabe- oder Leertaste ausgelöst werden können. Damit der Fokus auf den Linktext gesetzt werden kann, braucht das SPAN-Element ein tabindex-Attribut:

<span tabindex="0" class="unechtelinks" onclick="tueWas();">Linktext</span>

Mit dem Wert 0 für das tabindex-Attribut wird das SPAN-Element mit in die Tabulatorenreihenfolge der Webseite aufgenommen und dabei der sichtbare Fokus bereitgestellt. Es muss aber vor allem sichergestellt werden, dass der Link mit der Tastatur aufgerufen werden kann. Wenn

  1. der obige Code in ein HTML-Dokument hineinkopiert wird,
  2. die Datei im Browser aufgerufen wird,
  3. der Fokus mit der Tabulatortaste zum SPAN-Element bewegt wird und
  4. anschließend die Eingabetaste gedrückt wird,

passiert nichts (auch mit dem Vorhandensein der Funktion "tueWas").

Um die Tastatursteuerung für sehende Nutzer zu gewährleisten, muss neben einem onclick-Event-Handler auch ein tastaturspezifischer Event-Handler eingesetzt werden. Folgende Event-Handler stehen zur Wahl:

keydown
… wird ausgelöst, wenn ein Nutzer eine Taste drückt. Der Event wird wiederholt ausgelöst, wenn der Nutzer die Taste gedrückt hält.
keypress
… wird ausgelöst, wenn ein Zeichen z.B. in einem Eingabefeld eingegeben wurde. Der Event wird wiederholt ausgelöst, wenn der Nutzer die Taste gedrückt hält.
keyup
… wird ausgelöst, wenn ein Nutzer eine Taste loslässt und die standardmäßige Aktion der Taste bereits durchgeführt worden ist.
Textinput
… wird ausgelöst, wenn ein Zeichen zu einem Steuerelement tatsächlich hinzugefügt worden ist. Wenn ein Nutzer eine Taste drückt, die normalerweise ein Zeichen in einem Eingabefeld einfügt, aber die Eingabe unterbunden wird, wird Textinput nicht ausgelöst. textinput wird nur i.V.m. addEventListener ausgelöst.

Zunächst bietet sich an, einen passenden tastaturspezifischen Event-Handler für die Tastatur einzubauen:

<span onkeydown="tueWas();" tabindex="0" class="unechtelinks" onclick="tueWas();">Linktext</span>

Jetzt kann die Funktion auch mit der Tastatur aufgerufen werden. So einfach die Lösung erscheint, so birgt sie Tücken. Mit dem onkeydown-Attribut wurde ein Event-Handler eingebaut, der praktisch auf jeden Tastendruck reagiert, nicht nur auf die Eingabe- oder Leertaste, sondern z.B. auch auf die Tabulatorentaste. Das nennt man üblicherweise eine Verschlimmbesserung.

An dieser Stelle muss der Funktionsaufruf genauer behandelt werden. Im einfachsten Fall besteht die Funktion aus einer simplen Anweisung, etwa:

function tueWas() {
  alert ('Bingo');
}

Damit die gleiche Funktion auch für sehende Tastaturnutzer auf gleicher Weise bedient werden kann, bedarf es hier eine Einschränkung der auslösenden Tastendrucke, die zur Ausführung der Funktion führen. Genauer gesagt, es sollen neben einem Klick ausschließlich ein Tastendruck auf die Eingabetaste oder die Leertaste die Funktion auslösen. Dazu kann in der Funktion abgefragt werden, ob einer der beiden Tasten gedrückt worden ist, bevor die Anweisung ausgeführt wird.

function tueWas() {
  if (event && event . type == 'keydown') {
    if (event . keyCode) {
      tastenCode = event.keyCode; /* IE */
    }
    else if (event . which) {
      tastenCode = event . which; /* Moz, Saf, Op */
    }
    if (tastenCode != 13 && tastenCode != 32) {
      return true;
    }
  }
  alert ('tastaturfreundliches Bingo');
}

Das SPAN-Element ist jetzt für sehende Tastaturnutzer als Link nutzbar.