Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Lass' mich erst fertig machen! veröffentlicht in 2013

Der Klassiker: Quick-Launcher

Ein typisches Beispiel für ein Steuerelement, das bereits bei der Bedienung Kontextänderungen auslöst, ist ein Quick-Launcher:

Eine ausgeklappte Auswahlliste mit Filmtiteln Immer der ungewollten Kontextänderung verdächtigt: Quick-Launcher

Mit dem Mauszeiger wird die Auswahlliste geöffnet, und durch Klick auf einem der Einträge wird sofort auf eine neue Seite weitergeleitet. Für Tastaturnutzer ist die Schrittfolge etwas anders: Es wird zunächst die Auswahlliste mit der Tab-Taste fokussiert, dann wird mit den Pfeiltasten durch die Einträge gewandert und schließlich mit Eingabetaste oder Leertaste eine Auswahl getroffen. Beim Durchwandern der Optionen darf die Weiterleitung nicht ausgelöst werden.

Die Weiterleitung bei Tastaturbedienung kann im JavaScript gesteuert werden, indem im ausführenden Skript zuerst geprüft wird, ob die Eingabe- oder Leertaste gedrückt worden ist. Entweder werden geräteabhängige Event-Handler für verschiedene Eingabegeräte eingesetzt oder der Einsatz von Event-Handlern wird so konzipiert, dass sie verschiedene Eingabegeräte berücksichtigen. Für das Beispiel des Quick-Launchers kann der logische Event onchange die Aktion auslösen, sofern im JavaScript geprüft wird, ob die Eingabe- oder die Leertaste gedrückt worden sind. Im einfachsten Fall sieht das HTML wie folgt aus:

<select onchange="weiterleitung();">
  ...
</select>

In der aufgerufenen JavaScript-Funktion muss vor Ausführung der Weiterleitung geprüft werden, welche Taste gedrückt wurde. Nur wenn es sich um die Eingabe- oder Leertaste gehandelt hat, wird die Funktion bei Tastaturbedienung ausgeführt. Für Mausnutzer bleibt alles wie gehabt:

function weiterleitung() {
  if (event && event . type == 'keydown') {
    if (event . keyCode) {
      tastenCode = event.keyCode;
    }
    else if (event . which) {
      tastenCode = event . which;
    }
    if (tastenCode != 13 && tastenCode != 32) {
      return true;
    }
  }
  alert ('Jetzt darf erst weitergeleitet werden!');
}

Es sind im Übrigen nicht nur Eingabe- und Leertaste zu berücksichtigen. Browser stellen die Tastatursteuerung für HTML-Steuerelemente normalerweise bereit, aber mit JavaScript kann diese Funktionalität ausgehebelt werden. Bei einem Quick-Launcher muss beispielsweise mit den Pfeiltasten eine Auswahl getroffen werden können. Bei intensivem Einsatz von JavaScript ist eine Überprüfung der folgenden Funktionalitäten zweckmäßig: