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 Intern: tabindex-Attribut wird das SPAN-Element mit in die Tabulatorenreihenfolge der Webseite aufgenommen und dabei Intern: der sichtbare Fokus bereitgestellt. Es muss aber vor allem sichergestellt werden, dass der Zeile190: DB-Eintrag ungültig: - Zeile: 190