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
Fatal error: Uncaught Error: Call to undefined function mysql_query() in /is/htdocs/wp1150536_NS87B85NF3/www/bfw/lib/php/content_func.php:198 Stack trace: #0 /is/htdocs/wp1150536_NS87B85NF3/www/bfw/lib/php/content_func.php(174): setScLinkToDb('2.1.1', '20-80-linksmits...') #1 /is/htdocs/wp1150536_NS87B85NF3/www/bfw/knowhow/links-mit-span/tastaturbedienung-fuer-sehende-nutzer.php(26): sclink('2.1.1', 'Link mit der Ta...') #2 {main} thrown in /is/htdocs/wp1150536_NS87B85NF3/www/bfw/lib/php/content_func.php on line 198