Klare Formulare

Bezeichnungen für Formularfelder (ohne das `LABEL`-Element)

Für Formularfelder wie Eingabefelder oder Auswahllisten gab es vor HTML 4 keine logische Beschriftungsmöglichkeit. So war (und ist) es für Blinde schwierig, Eingabefelder in Formularen zu identifizieren - gerade, wenn sie mit Tabellen gestaltet sind und der logische oder sequentielle Zusammenhang schwer nachzuvollziehen ist. Das Kernproblem ist, dass nicht eindeutig ist, was im gerade aktiven Eingabefeld eingegeben werden soll. Der Grund dafür ist, dass visuell vermittelte Zusammenhänge (Bezeichnung eines Eingabefeldes und das Eingabefeld selbst) im Quelltext nicht unmittelbar aufeinander folgen.

Im Wesentlichen geht es darum, dass ein Layout, das mit Tabellen erzeugt wurde, die Bezeichnungen für Eingabefelder nicht unmittelbar vor oder nach dem Eingabefeld positionieren, sondern darüber oder darunter. In der linearisierten Ausgabe und bei zwei- oder mehrspaltigem Text kann es passieren, dass zunächst die Bezeichnungen für zwei oder mehrere Eingabefelder vorgelesen werden und anschließend die Eingabefelder selbst. Das folgende Beispiel soll diese Problematik darstellen:

<form> <table border="1"> <tr><td width="150">Straße</td><td width="50">Nr.</td><td width="65">PLZ</td><td width="150">Ort</td></tr> <tr><td><input type="text" name="strasse" size="17" /></td><td><input type="text" name="nummer" size="2" /></td><td><input type="text" name="plz" size="5" /></td><td><input type="text" name="ort" size="17" /></td></tr> </table> </form>

erzeugt folgende Tabelle:

Diese Tabelle wird linearisiert wie folgt ausgelesen:

"Straße Nr. PLZ Ort [Eingabefeld] [Eingabefeld] [Eingabefeld] [Eingabefeld]". Sprachausgaben, wenn sie keine logischen Bezeichnungen erhalten, lesen Tabellen Zeilen von links nach rechts, Zelle für Zelle und eine Zeile nach der anderen aus.

Der bezeichnende Text sollte nach Bedingung 10.2 der BITV unmittelbar vor dem Eingabefeld positioniert werden, damit die Eingabefelder vom Screen-Reader angekündigt werden können. Wird die Bezeichnung hinter dem Feld angezeigt, muss der Benutzer den Screen-Reader anhalten und zum Eingabefeld zurückspringen lassen - ein unnötiger Aufwand!

Für Checkboxen und Radio-Buttons gilt, dass der Text möglichst hinter den einzelnen Formularelementen steht, z.B.:

<form> <div> <input type="checkbox" name="info" value="info" /> Senden Sie mir weitere Informationen zu<br> <input type="checkbox" name="verteiler" value="verteiler" style="margin-top:0;" /> Nehmen Sie meine Adresse in Ihrem Verteiler auf </div> </form>

sieht auf einer Webseite wie folgt aus:

Dies ist besonders für Sehbehinderte wichtig, damit sie die Formularelemente mit Vergrößerungssoftware auf einer Linie finden können. Alternativ könnte man eine Spaltentechnik verwenden, die die Texte voranstellt und die Radiobuttons und Checkboxen rechts daneben einheitlich horizontal positioniert.

Wenn die Bezeichnungen von Eingabefeldern vor dem jeweiligen Formularelement eingebunden sind, erleichtert das die Bearbeitung eines Formulars mittels Sprachausgabe und Braillezeile. Weil Checkboxen und Radiobuttons in sonstigen Anwendungen üblicherweise immer vor dem beschreibenden Text stehen, empfiehlt es sich diese Konvention auch für das Web anzuwenden

Die Notwendigkeit einer korrekten Anordnung, sprich vorangestellten Bezeichnung, betrifft vor allem die Elemente INPUT und TEXTAREA, wo es um die Eingabe eines Textes geht, sowie Gruppen von Formularelementen.

vorherige Seite Übersicht nächste Seite