Stellen Sie sicher, dass alle Felder eines Formulars mit einer leicht verständlichen und korrekt platzierten Anleitung. Dadurch erhalten alle Besucher ein sowohl zugängliches als auch benutzerfreundlicheres Formular, das für Menschen mit Behinderungen barrierefrei ist.

Ein klares Formular hilft allen Besuchern zu verstehen, wie genau sie verfahren müssen.

  • Weisen Sie die <label>-Elemente in HTML den Formularfeldern zu, um das Eingabefeld so durch Klicken auf die entsprechende Anweisung auswählen zu können

Wie wendet man das an?

Positionieren Sie die Anweisungen in Eingabefeldnähe. Der Inhalt der Anweisungen muss klar und korrekt sein und sie müssen in angemessener Weise in das Formular eingebunden werden, damit sie vollständig zugänglich sind.

Klare und korrekte Anweisungen

Es ist schön, ein Webformular beim ersten Mal korrekt ausfüllen zu können. Für behinderte Besucher ist dies oft noch wichtiger, denn die Behebung von Fehlern kann viel Zeit in Anspruch nehmen. Daher sollten Anweisungen klar beschreiben, was in das Eingabefeld eingegeben werden muss und ob das Feld obligatorisch ist. Wenn möglich, sollte auch angegeben werden, welche Anforderungen die Eingabe erfüllen muss. Beispielsweise sollte eine Telefonnummer aus 9 Ziffern und eine Handynummer aus 10 Ziffern bestehen.

Die richtige HTML-Struktur

Anweisungen für Eingabefelder müssen in einem Formular mit dem Element <label> von HTML platziert werden. Wenn dies korrekt durchgeführt wird, können sie mit Hilfe der Hilfstechnik mit den entsprechenden Eingabefeldern verknüpft werden. Auch Besucher, die das Formular nicht (wieder) sehen können, wissen, was in welches Eingabefeld eingegeben werden soll. So lesen z. B. Screenreader (Bildschirmlesegeräte) bei Auswahl des Eingabefeldes den Befehl vor.

In einigen Fällen ist es nicht möglich, eine Anweisung für ein Feld anzuzeigen, z. B. weil sie nicht in das Design der Webseite passt. Dies ist oft der Fall bei einem Suchfeld auf der Webseite. Es gibt dann ein Eingabefeld und eine Schaltfläche „Suchen“, aber keine Anweisung in einem <label>-Element.

Beispiele

Eine klare Anweisung beschreibt genau, was in einem Feld eingegeben werden muss.

  • Deutlich und klar = „Ihr Nachname“.
  • Weniger deutlich = „Name“.

Illustration einer klaren Anweisung

Im HTML-Code sieht eine korrekt platzierte Anweisung so aus. Mit dem Attribut des Elements <label> wird dieses Element mit dem Eingabefeld (in diesem Fall dem Element <input>) mit der ID „surname“ (Nachname) verknüpft.

<label for="nachname">Nachname</label>
<input type="text" id="nachname" />

Wenn kein Platz für ein <label> Element vorhanden ist, sollte das title-Attribut verwendet werden, um den Befehl zu geben:

<input type="text" title="Geben Sie Ihren Suchbegriff ein" />
<input type="submit" value="Suchen" />

Label: Text, den nicht geändert werden kann- Anweisung

  • Beispiel: Namen eingeben, über einem Eingabefeld positionieren

Titel: Im Suchfeld befindlicher Text, der wieder verschwindet

  • Beispiel: Suche eingeben

Attribut: Computerbefehl

Für Redakteure

Der Redakteur muss sicherstellen, dass die Anweisungen selbst klar und korrekt sind.

Für Developer (Entwickler)

Der Entwickler ist für die fachlich korrekte Platzierung von <label> Elementen für die Anweisungen für Formularfelder verantwortlich.