Testdatei: label-Anweisung in Formularen vor oder hinter dem input-Element?

Erläuterung

Browser zeigen teilweise in Formularen das Eingabefeld erst hinter der Beschriftung an, wenn die label-Anweisung im Code hinter dem input-Element angegeben wird.

Hier finden Sie beide Anordnungen zum Vergleich und können das Ergebnis in Ihrem Browser prüfen.

1. label vor input

2. label hinter input

Erfahrungsberichte

Internet Explorer 10 und Mozilla Firefox 33

Bei Eingabefeldern oder Dropdown-Boxen sollte sich das Label vor dem Formularelement befinden.

Bei Checkboxen und Radiobuttons sollte das Label im Code hinter das Formularelement eingefügt werden, damit die entsprechenden Symbole links angezeigt werden.

Auswirkungen auf Screen Reader

Die Reihenfolge scheint nur ein Problem der visuellen Darstellung zu sein. Screen Reader liefern immer zuerst die Bezeichnung des Formularelements und dann den Typ bzw. den Zustand des Formularelements.