3.2.2 Bei Eingabe

/ Woran Seiten scheitern

• Ein select-Element lädt eine andere Seite, sobald eine Option gewählt ist, und es gibt keine Schaltfläche zum Bestätigen der Auswahl.
• Ein Formular schickt sich selbst ab, wenn das letzte Feld ausgefüllt oder ein Kontrollkästchen angekreuzt wird.
• Der Fokus springt nach einer festen Zahl von Zeichen ins nächste Feld, etwa zwischen den Teilen einer Telefonnummer, und nichts auf der Seite sagt das an.
• Die Auswahl eines Optionsfelds öffnet ein neues Fenster.
• Eine Auswahlliste für Sprache oder Land lädt die ganze Seite in einer anderen Version neu, sobald sich ihr Wert ändert.

/ So prüfen Sie es selbst

1. Gehen Sie mit der Tabulatortaste zu jedem select-Element und ändern Sie den Wert nur mit den Pfeiltasten. Beobachten Sie, ob die Seite navigiert, das Formular abschickt oder den Fokus verschiebt, bevor Sie die Eingabetaste drücken.
2. Kreuzen Sie jedes Kontrollkästchen an und wählen Sie jedes Optionsfeld mit Leertaste und Pfeiltasten, und achten Sie auf dieselben drei Dinge.
3. Tippen Sie in die Textfelder, auch in Felder, die auf mehrere Kästchen verteilt sind, und notieren Sie jede Stelle, an der der Fokus wandert, ohne dass Sie die Tabulatortaste drücken.
4. Suchen Sie im Quelltext nach onchange-Handlern, die submit() aufrufen oder location setzen, denn das ist die übliche Ursache.
5. Wo eine Eingabe tatsächlich einen Kontextwechsel auslöst, prüfen Sie, ob ein sichtbarer Hinweis vor dem Bedienelement ihn ankündigt.

/ So beheben Sie es

• Setzen Sie neben das select-Element ein button-Element vom Typ submit und navigieren Sie beim Absenden des Formulars, nicht beim change-Ereignis.
• Entfernen Sie Aufrufe von form.submit() aus change- und blur-Handlern und lassen Sie die Person das Formular mit einer Schaltfläche absenden.
• Öffnen Sie neue Fenster nur über Links und Schaltflächen, niemals beim Ändern eines Optionsfelds, Kontrollkästchens oder einer Auswahlliste.
• Muss eine Auswahl die Seite aktualisieren, ändern Sie den Inhalt hinter dem Bedienelement an Ort und Stelle und lassen Sie den Fokus, wo er ist.
• Muss ein automatisches Verhalten bleiben, beschreiben Sie es in einem Text vor dem Bedienelement, damit er gelesen wird, bevor das Bedienelement erreicht ist.

/ Was unser Scanner prüft

Die einzige automatische Regel hier, H32.2 aus HTML_CodeSniffer, meldet ein form-Element ohne Absendeschaltfläche: kein input vom Typ submit oder image, kein button, der absendet, und keine äußere Schaltfläche, die über das form-Attribut zugeordnet ist. Das deutet darauf hin, dass ein Formular bei einer Änderung absenden könnte, und beweist nichts. Die Prüfung bedient nie ein Bedienelement, deshalb bleibt eine Auswahlliste, die bei einer Änderung navigiert, unentdeckt.