Ein Formular kann visuell hervorragend aussehen und trotzdem schwer benutzbar sein. Häufige Probleme sind fehlende Labels, unklare Pflichtfelder, verschwindende Fehlermeldungen und eine Bestätigung, die nur durch Farbe sichtbar wird.
Diese Anleitung zeigt, wie du ein Kontaktformular mit semantischem HTML und wenigen gezielten Ergänzungen aufbaust. Der Fokus liegt auf Bedienbarkeit, nicht auf einem bestimmten Framework.
Fünf Grundlagen, die jedes Formular braucht
- Sichtbare Labels: Ein Platzhalter ist kein Ersatz für ein korrekt zugeordnetes
label. - Pflichtfelder klar markieren: Nicht nur mit einem roten Stern, sondern auch sprachlich.
- Fehler neben dem Feld erklären: Was ist falsch und wie lässt es sich beheben?
- Tastaturzugriff erhalten: Alle Felder, Buttons und Hilfelinks müssen erreichbar sein.
- Rückmeldung nach dem Absenden geben: Erfolg oder Fehler muss als Text verfügbar sein.
Das W3C empfiehlt, Beschriftungen und Eingabefelder ausdrücklich miteinander zu verbinden. Wichtig ist: Der Wert von for am Label muss zur id des Formularfelds passen. Siehe W3C WAI – Labeling Controls.
Ein einfaches HTML-Grundgerüst
<form action="/dein-sicherer-endpunkt" method="post">
<p>Mit „Pflichtfeld“ gekennzeichnete Angaben sind erforderlich.</p>
<div class="form-field">
<label for="contact-name">Name (Pflichtfeld)</label>
<input
id="contact-name"
name="name"
type="text"
autocomplete="name"
required
>
</div>
<div class="form-field">
<label for="contact-email">E-Mail (Pflichtfeld)</label>
<input
id="contact-email"
name="email"
type="email"
autocomplete="email"
required
aria-describedby="contact-email-help"
>
<p id="contact-email-help">
An diese Adresse senden wir dir unsere Antwort.
</p>
</div>
<div class="form-field">
<label for="contact-message">Nachricht (Pflichtfeld)</label>
<textarea
id="contact-message"
name="message"
rows="6"
required
></textarea>
</div>
<button type="submit">Anfrage absenden</button>
</form>Nicht ungeprüft produktiv einsetzen: Die URL /dein-sicherer-endpunkt ist ein Platzhalter. Es fehlt noch der echte sichere PHP- oder Backend-Endpunkt mit serverseitiger Validierung, CSRF-Schutz und geeigneter Spam-Abwehr.
Das Formular setzt absichtlich auf native HTML-Felder. Sie bringen viele Tastatur- und Validierungsfunktionen bereits mit.
aria-describedby: Hilfetexte sauber zuordnen
Ein Feld darf einen erklärenden Text haben. Durch aria-describedby="contact-email-help" kann dieser Text von Assistenztechnologien dem Eingabefeld zugeordnet werden.
Das ist vor allem bei Formatvorgaben hilfreich: etwa bei einer Auftragsnummer oder einer Längenbegrenzung.
Fehlermeldung direkt am Feld
Wenn die E-Mail-Adresse nach einer serverseitigen Prüfung ungültig ist, könnte das gerenderte Feld so aussehen:
<label for="contact-email">E-Mail (Pflichtfeld)</label>
<input
id="contact-email"
name="email"
type="email"
aria-invalid="true"
aria-describedby="contact-email-help contact-email-error"
value=""
required
>
<p id="contact-email-help">An diese Adresse senden wir die Antwort.</p>
<p id="contact-email-error">
Bitte gib eine gültige E-Mail-Adresse ein.
</p>Setze aria-invalid="true" nur, wenn tatsächlich ein Fehler vorliegt. Bei einer erfolgreichen Korrektur sollte der Fehlerzustand wieder verschwinden.
Bei mehreren Fehlern ist eine Fehlerzusammenfassung am Formularanfang hilfreich. Nach einem fehlgeschlagenen Absenden kann der Fokus gezielt dorthin gesetzt werden. Die einzelnen Einträge sollten möglichst zu den betroffenen Feldern springen.
Das W3C beschreibt diesen Ansatz unter Eingaben prüfen und Fehler mitteilen.
Fokus, Farbe und Kontrast
Ein Formular darf nicht nur für die Maus gestaltet werden. Mindestens genauso wichtig ist der sichtbare Tastaturfokus.
.form-field input,
.form-field textarea,
form button {
font: inherit;
max-width: 100%;
}
.form-field input:focus-visible,
.form-field textarea:focus-visible,
form button:focus-visible {
outline: 3px solid currentColor;
outline-offset: 3px;
}
.form-field [aria-invalid="true"] {
border: 2px solid currentColor;
}Für echte Projekte braucht der Fehlerzustand zusätzlich eine Textmeldung. Nur eine rote Umrandung genügt nicht. Prüfe Kontrast, Zoom und das Verhalten bei hoher Textvergrößerung.
Was passiert nach dem Klick auf „Absenden“?
Ein gutes Formular kommuniziert den Zustand verständlich:
| Zustand | Erwartete Rückmeldung |
|---|---|
| Eingaben fehlen | Pflichtfeld klar benennen |
| Formular wird übertragen | Visuellen Zustand anzeigen, Mehrfachübertragung verhindern |
| Versand erfolgreich | Verständliche Textbestätigung, nicht nur grünes Häkchen |
| Versand fehlgeschlagen | Fehler erklären und erneuten Versuch ermöglichen |
Bei einer JavaScript-Übermittlung darf der Erfolg nicht einfach außerhalb des Sichtbereichs erscheinen. Verwende einen passenden Statusbereich, etwa mit role="status", oder setze den Fokus gezielt auf eine sichtbare Bestätigung. Bei Formularfehlern ist eine eindeutige Fokusstrategie besonders wichtig.
Sicherheit und Datenschutz gehören dazu
Barrierefreiheit ersetzt keine Backend-Sicherheit. Der Server muss die Daten erneut prüfen. Zusätzlich solltest du die Übermittlung auf HTTPS beschränken, Spam-Schutz einplanen und nur erforderliche Daten abfragen.
Eine Telefonnummer ist beispielsweise oft kein Pflichtfeld, wenn ein Kontakt auch per E-Mail möglich ist. Sammle nicht mehr Informationen als für die Anfrage erforderlich.
Wichtig ist außerdem eine funktionierende Datenschutzerklärung. Rechtliche Anforderungen hängen vom konkreten Einsatz ab. Dieser Artikel ist keine Rechtsberatung.
Checkliste für den Praxistest
Teste den vollständigen Ablauf mit Tab, Shift+Tab, Enter und der Bildschirmtastatur auf dem Smartphone. Wiederhole ihn bei 200 % Zoom. Gib falsche Werte ein, verlasse Pflichtfelder leer und simuliere einen Serverfehler.
Kontrolliere dann, ob alle Hinweise ohne Farbe verständlich sind, keine Inhalte abgeschnitten werden und eingegebene Werte nach einem Fehler erhalten bleiben.
Weitere technische Grundlagen findest du in unserer Website-Relaunch-Checkliste. Unterstützung bei Planung und Umsetzung bietet Webdesign für Unternehmen.
Fazit
Ein barrierefreies Kontaktformular beginnt mit echten Labels, verständlichen Fehlermeldungen und einem verlässlichen Fokus. JavaScript kann die Bedienung verbessern, sollte grundlegende HTML-Funktionen aber nicht unnötig ersetzen.
War dieser Artikel hilfreich?
Dein Feedback hilft uns, unsere Ratgeber zu verbessern.
Mit Digitalhaus Kunze gearbeitet?
Dann freuen wir uns über deine ehrliche Erfahrung auf Google – unabhängig davon, ob sie positiv oder kritisch war.
Auf Google bewerten