Formular-Titel und Beschreibung festlegen
- Einleitung
- Formular-Titel festlegen
- Beschreibung hinzufügen
- Semantische Struktur und Barrierefreiheit
- Zusammenfassung
Einleitung
Ein Formular-Titel und eine Beschreibung sind wichtige Elemente, um Benutzern den Zweck des Formulars klar zu machen und ihnen hilfreiche Informationen zur Verfügung zu stellen. Das richtige Festlegen dieser Elemente verbessert die Benutzerfreundlichkeit und erleichtert das Ausfüllen des Formulars. Dabei gibt es verschiedene Methoden und Ansätze, abhängig von der Technologie und dem Kontext, in dem das Formular erstellt wird.
Formular-Titel festlegen
Der Titel eines Formulars wird oft als Überschrift oberhalb der Formularfelder platziert. In HTML verwendet man dafür typischerweise ein Überschriftselement wie <h1> bis <h6>. Der Titel sollte prägnant und aussagekräftig sein, damit Benutzer sofort verstehen, worum es im Formular geht. Beispielsweise kann bei einer Anmeldung der Formular-Titel Benutzerregistrierung lauten. Der Titel ist nicht Teil des eigentlichen <form>-Elements, sondern steht üblicherweise direkt davor oder kurz darüber im DOM, damit es strukturiert und gut lesbar ist.
Beispiel: <h2>Kontaktformular</h2>
Beschreibung hinzufügen
Die Beschreibung gibt weitere Informationen zum Formular, wie den Zweck, Hinweise zum Ausfüllen oder wichtige Regeln. Sie sollte direkt unter dem Titel, aber vor den eigentlichen Eingabefeldern platziert werden. In HTML kann hierfür ein Absatz (<p>), eine <div> oder das semantische Element <fieldset> mit einem <legend> verwendet werden, falls das Formular in verschiedene Bereiche aufgeteilt ist.
Für einfache Beschreibungen ist ein Absatz ausreichend, der sinnvoll gestaltete und gut verständliche Hinweise enthalten sollte. Wenn eine ausführlichere Erklärung nötig ist, kann man auch Listen oder weitere Absätze ergänzen.
Beispiel: <p>Bitte füllen Sie alle Pflichtfelder aus und geben Sie eine gültige E-Mail-Adresse an.</p>
Semantische Struktur und Barrierefreiheit
Für eine bessere Zugänglichkeit empfiehlt es sich, Titel und Beschreibung auch semantisch zu strukturieren. Das bedeutet, dass man etwa das <form>-Element mit einer aria-labelledby oder aria-describedby-Eigenschaft versehen kann, um Screenreadern die Information zu geben, welches Element als Titel oder Beschreibung dient.
Ein Beispiel für den Einsatz von aria-labelledby und aria-describedby: <form id="kontaktformular" aria-labelledby="formtitel" aria-describedby="formbeschreibung"> <h2 id="formtitel">Kontaktformular</h2> <p id="formbeschreibung">Bitte füllen Sie alle Pflichtfelder aus.</p> <!-- Formularfelder hier --> </form>
Zusammenfassung
Der Formular-Titel wird meist als Überschrift direkt über dem Formular platziert, um den Benutzern klar zu machen, worum es geht. Die Beschreibung bietet zusätzliche Hinweise und erscheint darunter. Beide Elemente tragen zu einer guten Benutzerführung bei. Mittels semantischer HTML-Elemente und ARIA-Attributen lässt sich zudem sicherstellen, dass die Informationen auch für Menschen mit Sehbehinderung zugänglich sind.