Daten werden geladen…
Ihre Anfrage wird sicher verarbeitet.
Das Kontaktformular ist der wichtigste Conversion-Punkt auf den meisten KMU-Websites — und gleichzeitig der häufigste Barrierefreiheitsfehler. Branchenstudien zeigen: 68 % aller Kontaktformulare haben mindestens einen WCAG-Verstoß, der Nutzer am Absenden hindert.
Der häufigste Fehler: Formularfelder verwenden nur Placeholder-Text als Beschriftung. Das Problem:
Lösung: Verwenden Sie immer ein sichtbares <label> über oder neben dem Feld. Das for-Attribut des Labels muss auf die id des Eingabefelds verweisen.
Nach dem Absenden eines fehlerhaften Formulars passiert entweder nichts (das Formular scrollt zurück zum Anfang) oder es erscheint nur eine generische Meldung wie „Bitte füllen Sie alle Pflichtfelder aus".
WCAG 3.3.1 verlangt:
aria-live="polite" an Screen Reader angekündigtEin rotes Sternchen (*) neben dem Feldnamen reicht nicht, wenn:
Lösung: Ergänzen Sie aria-required="true" oder das HTML5-Attribut required. Schreiben Sie zusätzlich „(Pflichtfeld)" in den Label-Text oder fügen Sie eine Legende hinzu: „Felder mit * sind Pflichtfelder."
Prüfen Sie, ob Ihre Formulare barrierefrei sind
6 Bereiche, 23+ Prüfungen in 2 Minuten — kostenlos und DSGVO-konform.
WCAG 1.3.5 verlangt, dass Formularfelder für persönliche Daten ein autocomplete-Attribut haben. Das hilft nicht nur Barrierefreiheit, sondern beschleunigt das Ausfüllen für alle Nutzer:
| Feld | autocomplete-Wert |
|---|---|
| Vorname | given-name |
| Nachname | family-name |
| Telefon | tel |
| Straße | street-address |
| PLZ | postal-code |
| Stadt | address-level2 |
Wenn die Tab-Reihenfolge nicht der visuellen Reihenfolge entspricht, springt der Focus scheinbar zufällig — verwirrend für alle, kritisch für Tastaturnutzer.
Häufigste Ursache: CSS-Änderungen (Flexbox order, Grid-Neuanordnung, absolute Positionierung) verschieben die visuelle Reihenfolge, ohne die DOM-Reihenfolge anzupassen.
Lösung: Die DOM-Reihenfolge sollte der visuellen Lesereihenfolge entsprechen. Vermeiden Sie tabindex mit positiven Werten.
Bild-CAPTCHAs sind für blinde Nutzer unüberwindbar. reCAPTCHA v2 („Wählen Sie alle Bilder mit Ampeln") schließt einen erheblichen Teil der Nutzer aus.
Ein <div onClick="submit()"> sieht wie ein Button aus, ist aber für Screen Reader unsichtbar und per Tastatur nicht erreichbar (außer mit tabindex und Keydown-Handler — unnötig komplex).
Lösung: Verwenden Sie <button type="submit">. Nativ fokussierbar, nativ per Enter und Space auslösbar, nativ von Screen Readern erkannt.
Cada mes: una lista de verificación de cumplimiento, resultados de auditorías sectoriales actuales y los errores web más frecuentes. Gratis, sin spam.
Más recursos:
| ✓ | Prüfpunkt | WCAG |
|---|---|---|
| ☐ | Jedes Feld hat ein sichtbares Label | 1.3.1, 3.3.2 |
| ☐ | Labels sind per for/id mit Feldern verknüpft | 1.3.1 |
| ☐ | Pflichtfelder sind per required oder aria-required markiert | 3.3.2 |
| ☐ | Fehlermeldungen erscheinen inline beim Feld | 3.3.1 |
| ☐ | Focus springt zum ersten Fehlerfeld | 3.3.1 |
| ☐ | Eingabevorschläge bei Fehlern vorhanden | 3.3.3 |
| ☐ | Autocomplete-Attribute für persönliche Daten | 1.3.5 |
| ☐ | Tab-Reihenfolge entspricht visueller Reihenfolge | 2.4.3 |
| ☐ | Absende-Button ist ein nativer button | 4.1.2 |
| ☐ | Erfolgs-/Fehlermeldung nach Absenden wird vorgelesen | 4.1.3 |
| ☐ | Kein CAPTCHA ohne barrierefreie Alternative | 1.1.1 |
| ☐ | Formular funktioniert ohne JavaScript (Progressive Enhancement) | 4.1.1 |
Jeder der sieben Fehler oben ist nicht nur ein Barrierefreiheitsproblem — er kostet Conversions bei allen Nutzern. Unklare Labels verwirren auch sehende Nutzer. Fehlende Fehlermeldungen frustrieren jeden. Autocomplete beschleunigt das Ausfüllen für alle Besucher.
Eine barrierefreie Kontaktseite ist gleichzeitig eine conversion-optimierte Kontaktseite. Die Investition zahlt sich doppelt aus.
Lassen Sie Ihre Kontaktseite automatisch auf Barrierefreiheitsfehler prüfen
6 Bereiche, 23+ Prüfungen in 2 Minuten — kostenlos und DSGVO-konform.
Passende Audit-Pakete
Gezielte Prüfungen für die in diesem Artikel beschriebenen Probleme:
Betrifft das auch Ihre Branche?
Wir haben hunderte Websites pro Branche analysiert. Finden Sie heraus, wie Ihre Branche abschneidet:
Kontaktformular prüfen
6 Bereiche, 23+ Prüfungen in 2 Minuten — kostenlos und DSGVO-konform.
Gezielte Compliance-Checks
Prüfen Sie Ihre Website auf die wichtigsten Compliance-Risiken — kostenlos und in unter 2 Minuten.
Cada mes: una lista de verificación de cumplimiento, resultados de auditorías sectoriales actuales y los errores web más frecuentes. Gratis, sin spam.
Más recursos: