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:
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:
- Wenn die Auswahlliste mit Tab angesteuert wird, wird der aktuell ausgewählte (oder der erste) Eintrag fokussiert. Wenn die Liste mit Tab verlassen wird, wird die Auswahlliste geschlossen und der fokussierte Eintrag wird ausgewählt. Gleiches gilt für Umschalt+Tab.
- Wenn der Fokus in der Auswahlliste ist:
- Alt+PfeilOben und Alt+PfeilUnten Öffnet bzw. schließt die Auswahlliste.
- PfeilOben und PfeilUnten Bewegt den Fokus hoch und runter in der (geöffneten oder geschlossenen) Auswahlliste.
- Esc Schließt die Auswahlliste und setzt die Auswahl auf den in der Ausgangssituation ausgewählten Eintrag zurück.
- Eingabetaste oder Leertaste Schließt die Auswahlliste und ändert die aktuelle Auswahl auf das fokussierte Element.
- Mit einem druckbaren Zeichen wird der Fokus zum nächsten Eintrag der Auswahlliste bewegt, der mit dem gedrückten Zeichen beginnt (z.B. in einer Länderauswahl könnte das Drücken von "D" zum Eintrag "Deutschland" führen).
Der Beitrag Lass' mich erst fertig machen! besteht aus folgenden einzelnen Webseiten:
- Der Klassiker: Quick-Launcher
(Aktuelle Seite)
- Hinweise auf Änderungen des Kontextes
Manche Usability-Features funktionieren gut für Tastaturnutzer, aber nicht für Screenreadernutzer. In solchen Fällen sollte ein Texthinweis auf die Dynamik hinweisen.