Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Auswahllisten mit der Tastatur bedienen

Montag, 27. Juli 2009

Auswahllisten (Ausklapplisten / <select>) dienen dazu, dem Anwender eine Liste mit festen Einträgen anzubieten, aus der er einen Eintrag auswählen kann. Der Text des ausgewählten Eintrags wird übertragen, wenn der Anwender das Formular abschickt.
Zum Abschicken gibt es einen eigenen Button, z. B. <input type="submit" … >
Wenn nun das Formular als einziges Element eine Auswahlliste enthält (typisches Beispiel: ein Style Switcher), dann ist es lästig, den Submit Button anzusteuern und zu betätigen.
Pfiffiger wäre es, die Auswahl mit Enter bestätigen zu können.
Hier kommt Javascript mit dem Event Handler onchange zu Hilfe.
Beispiel:

<select name="titel" size="1" onchange="this.form.submit()" >

Wunderbar.
Aber:
Versuchen Sie mal, eine solchermaßen aufgepeppte Auswahlliste im Internet Explorer ohne Maus, also nur mit der Tastatur, zu bedienen. Ich habe für Ihre Versuche ein Muster zum Testen erstellt. Dieses Muster beinhaltet konsequenterweise keinen Submit Button. (In der Praxis würde ich den jedoch sicherheitshalber belassen.)
Und was passiert da? Es gelingt bei ausschließlicher Tastaturnutzung nicht, einen der angebotenen Einträge auszuwählen, weil das Formular sofort beim Versuch, innerhalb der Auswahlliste mit den Pfeiltasten nach unten zu gehen, abgeschickt wird. Dabei wird dann immer der zweite Eintrag in der Liste "Michael Jackson" gewählt.
Es sei denn, Sie wissen, wie man das mit dem Internet Explorer macht:

  1. Mit der Tab Taste den Fokus auf die Auswahlliste setzen.
  2. Die Auswahlliste mit "Alt+Pfeil nach unten" öffnen.
  3. Mit den Pfeiltasten (nach unten / nach oben) innerhalb der ausgeklappten Liste navigieren.
  4. Enter

Und jetzt die Preisfrage: Wer wusste das?

Mir jedenfalls ist das zu riskant. Ich befürchte, zu viele Besucher mit dieser Technik auszuschließen.
Ich werde also in der praktischen Anwendung dem Internet Explorer ein Formular ausliefern ohne den onchange event handler. (Das geht ja recht zuverlässig mit conditional comments.)



Kommentare

Noch keine Beiträge.

Einen Kommentar abgeben

Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE