Formularlogik bei Checkboxen/Radioboxen

[Beat]

Hallo

Ich stecke gerade über dem Code eines Registrationsformulars.
Dieses ist zweistufig aufgebaut.
Im ersten Teil geht es darum, dass einige allgemeine Bedingungen akzeptiert werden. Es werden auch wichtige Informationen bekannt gegeben, deren Wahrnehmung durch einen aktiven Klick auf die Checkbox befördert werden soll.
Dabei handelt es sich um 8 solche Checkboxen.

Visuell liegt die Reihenfolge vor

[ ] Labeltext zur Box.

Im Code derzeit auch:
<input ...><label>Text</label>

Nun ist mir aber aufgegangen, dass ich in allen anderen Fällen ja das Label vor ein Input stelle. Nur bei Check- und Radioboxen ist die Ussanz verbreitet, die Check/Radio-Box vor das Label zu stellen.

Ich habe mir nun überlegt:

a) Kein Problem, die logische Reihenfolge liesse sich halt mit float anpassen. Damit würde auch Radioboxen wie andere Inputfelder in der HTML Reihenfolge behandelt.
<label>Text</label> <input type=checkbox>

b) Kein Sonderfall von übereifriger "Usability". Die Inkonsistenz ist so verbreitet, dass sie schon wieder zur Norm wäre, und noch mehr Norm hier nur verwirren würde.
<input type=checkbox> <label>Text</label>

Ich sehe zwei Argumente für beides, wobei ich zu a) tendiere.

Was meint ihr?

mfg Beat

[Beat]

a) Kein Problem, die logische Reihenfolge liesse sich halt mit float anpassen. Damit würde auch Radioboxen wie andere Inputfelder in der HTML Reihenfolge behandelt.
<label>Text</label> <input type=checkbox>

b) Kein Sonderfall von übereifriger "Usability". Die Inkonsistenz ist so verbreitet, dass sie schon wieder zur Norm wäre, und noch mehr Norm hier nur verwirren würde.
<input type=checkbox> <label>Text</label>

Ich sehe zwei Argumente für beides, wobei ich zu a) tendiere.

Ich meinte Fall b) natürlich.

mfg Beat

[molily]

Hallo,

ich finde, die Alternativen geben sich wenig. Man könnte argumentieren, dass die Lesereihenfolge Label - Feld einheitlich wäre. Andererseits arbeitet nichtvisuelle Ausgabe z.B. in Screenreadern eben stark mit der Label-Feld-Verknüpfung. Da wird das Label sowieso beim Vorlesen des Feldes angesagt. Für Formulare gibt es oft einen eigenen Modus, in dem man die Felder durchlaufen kann. Dabei ist die Reihenfolge von Label und Feld schnuppe, weil sie ohnehin angeglichen wird. Insofern würde ich dazu tendieren, der verbreiteten Konvention zu folgen, Check- und Radioboxen vor das Label zu stellen.

Mathias

[Kai345]

[latex]Mae  govannen![/latex]

Nun ist mir aber aufgegangen, dass ich in allen anderen Fällen ja das Label vor ein Input stelle. Nur bei Check- und Radioboxen ist die Ussanz verbreitet, die Check/Radio-Box vor das Label zu stellen.

Danke. Du hast gerade eine "Lösung" für etwas gefunden, das mich seit längerem beschäftigt hat. Auf dem Formular auf meiner Site habe ich nämlich die Labels _vor_ den Radio-Buttons angeordnet. Und jedes Mal, wenn ich das Formular betrachtet habe, kam mir etwas ungewohnt und seltsam vor, habe aber bisher nicht feststellen können, woher dies rührte. Nun weiß ich es endlich.
(Und indirekt bezieht sich dieses Statement sogar auf deine Frage)

Cü,

Kai

[Beat]

Nun ist mir aber aufgegangen, dass ich in allen anderen Fällen ja das Label vor ein Input stelle. Nur bei Check- und Radioboxen ist die Ussanz verbreitet, die Check/Radio-Box vor das Label zu stellen.

Danke. Du hast gerade eine "Lösung" für etwas gefunden, das mich seit längerem beschäftigt hat. Auf dem Formular auf meiner Site habe ich nämlich die Labels _vor_ den Radio-Buttons angeordnet. Und jedes Mal, wenn ich das Formular betrachtet habe, kam mir etwas ungewohnt und seltsam vor, habe aber bisher nicht feststellen können, woher dies rührte. Nun weiß ich es endlich.
(Und indirekt bezieht sich dieses Statement sogar auf deine Frage)

Ich habe kürzlich ein PDF zu einem Vortrag zum Thema Formulardesign gelesen, wo verschiedene Aspekte behandelt wurden.
Gestört hat mich aber an der Präsentation, dass Usability nur am Rande im Code behandelt wurden, labels erwähnt wurden, aber doch die Reihenfolge im Code unerwähnt blieb.

Es ist eine allgemeine Frage: Wie relevant ist die Ordnung im Code. Welche Software beutete sie aus.
Wenn richtig ist, was Mathias Schäfer sagt, dann brauchen wir uns bei Formularen nicht diese Sorge zu machen. Screenreader werden das CSS berücksichtigen,. andere Software wird ihre eigene Assotiation zwischen Label und Feld vornehmen. Wichtig bei allem ist nur die Beschriftung des Labels.

Nehmen wir folgenden Fall eines nicht optimalen Formularteils:

Spalten einblenden
[x] A  [x] B  [x] C  [ ] D  [ ] E

Jede Checkbox hat ein Label. Aber das CSS selbst strapaziert doch die Lesegewohnheit, welche dann richtig wäre, wenn jede Kombination in einer eigenen Zeile stünde.
Die Abstände allein sind ungenügend um die Ordnung klarzulegen.
Aber die Gewohnheit dass Checkboxen vor der Beschriftung liegen macht klar, ob das Label rechts oder links der Checkbox liegt.

Das folgende ist nicht besser:
A [x]  B [x]  C [x]  D [ ]  E [ ]

Man kann die Situation verbessern indem man hier etwas Noise hinzufügt:
Zusammenhängendes gemeinsam mit Farbe unterlegen, und einen kleinen _unfarbigen_ Zwischenraum schaffen.

Noise dieser Art erklärt zwar den Zusammenhang im kleinen, schafft aber Unruhe aus der höheren Warte, wirkt also in der Gesamterfassung eines Formulars nachteilig.

Für einmal könnte man, weil es sich um ein Formular handelt, das immer wieder mal ausgeführt wird, auf eine Tabellarische Anordnung festlegen:

Spalten     A   B   C   D   E
einblenden [x] [x] [x] [ ] [ ]

Columns     A   B   C   D   E
enable     [x] [x] [x] [ ] [ ]

Label Elemente aktivieren ja quer über den Baum assoziierte Elemente

mfg Beat