Ein Kontaktformular in Divi 5 ist in ein paar Minuten zusammengeklickt und sieht sofort ordentlich aus. Ob es auch jeder ausfüllen kann, steht auf einem anderen Blatt. Ausgerechnet die Checkboxen machen da aber Ärger. Sie schließen Menschen aus, die mit der Tastatur navigieren, und Wave (eine wirklich nice Browserextension, was ich gerne nutze für die Barrierefreiheit) meckert (zu Recht) rum.
Ich hatte das schon lange im Hinterkopf, dass ich das unbedingt überarbeiten muss. Schließlich biete ich selbst barrierefreie Checks und Überarbeitung an. Wave sagte bei mir "A form label is present, but it is not correctly associated with a form control." Orphaned form label, also ein Label, das zu keinem Feld gehört. Erst die Umstellung auf Divi 5 war der Anlass, den ich gebraucht hab, um das Problem endlich anzugehen.
Insbesondere das mit dem tabbaren Checkboxen fand ich nicht mehr zeitgemäß. Ich dachte mit Divi5 wären die Probleme vielleicht erledigt. Für jemanden, der ohne Maus arbeitet, war dieser Teil meines Formulars nämlich tatsächlich schlicht nicht da.
Diese zwei Stolpersteine nehme ich nun kurz auseinander. Kurzer Disclaimer vorweg: das ist die Lösung, die für mich funktioniert hat. Bitte teste selbst ausreichend. Den Code fügst du auf eigene Gefahr ein.
Zusammengefasst machst du folgendes
- Javascript im Theme Builder in den Body einfügen
- CSS in den Costumizer
Stolperstein 1: orphaned form label und doppelter Titel
Wenn du im Divi 5 Kontaktformular ein Checkbox- oder Radio-Feld baust und ihm einen Titel gibst, rendert Divi diesen Titel an zwei Stellen. Einmal als echtes <label> ohne for-Attribut. Und gleich danach nochmal als <span> mit demselben Text. Es steht auch tatsächlich zwei Mal da und sieht halt einfach gesagt nicht schön aus. Aber es ist halt auch tatsächlich falsch.
Das <label> ohne for ist genau das, worüber WAVE stolpert. Ein Label gehört in barrierefreiem HTML immer zu einem konkreten Formularfeld, verknüpft über label for und die passende ID. WAVE sieht das Label, sucht das zugehörige Feld und findet keins. Bei einer Gruppe aus vier Checkboxen kann ein gemeinsamer Titel auch auf kein einzelnes Feld zeigen. Daher die Meldung. Der Span daneben trägt denselben sichtbaren Text, deshalb steht der Titel doppelt auf der Seite.
Mein erster Reflex war, den doppelten Titel per CSS mit display: none auszublenden. Genau dieser Workaround steht auch in vielen Divi-Anleitungen. Gut, dass ich kurz nachgedacht hab, bevor ich ihn übernommen hab. display: none versteckt ein Element nämlich nicht nur vor dem Auge, sondern auch vor dem Screenreader. Wenn du ausgerechnet das Element ausblendest, das deiner Checkbox-Gruppe ihren Namen gibt, hast du den WAVE-Fehler gegen einen echten Schaden getauscht. Optisch sieht es sauber aus, und ein blinder Mensch hört vier zusammenhanglose Kästchen ohne die Frage, zu der sie gehören. Und wenn du den Titel im Modul stattdessen ganz leerst, löscht Divi beide Elemente auf einen Schlag, dann fehlt der Titel komplett.
Du brauchst kein Entweder-oder. Du brauchst: das orphaned label raus, den sichtbaren span-Titel behalten, und die Gruppe sauber mit ihrem Titel verbinden.
Die Lösung mit JavaScript
<script>
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll(
'.et_pb_contact_field[data-type="checkbox"], .et_pb_contact_field[data-type="radio"]'
).forEach(function (feld) {
feld.removeAttribute('tabindex');
var orphan = feld.querySelector('label.et_pb_contact_form_label');
var titel = feld.querySelector('.et_pb_contact_field_options_title');
var wrapper = feld.querySelector('.et_pb_contact_field_options_list');
if (titel && wrapper) {
if (!titel.id) titel.id = 'grp-' + Math.random().toString(36).slice(2, 8);
wrapper.setAttribute('role', 'group');
wrapper.setAttribute('aria-labelledby', titel.id);
}
if (orphan) orphan.remove();
});
});
</script>Das Script wirft das orphaned Label raus, lässt den sichtbaren Titel stehen und hängt ihn über role="group" und aria-labelledby an die Gruppe. Ein Screenreader liest dann nicht mehr vier lose Checkboxen vor, sondern weiß, dass sie z. B. zur Frage "An welcher Dienstleistung bist du interessiert?" gehören.
Beim Einbau ist der Ort wichtig. Der Code gehört in den Theme Builder unter Code im Body (nicht in den Head). Btw.: Das ist nicht dasselbe wie dein Footer-Menü oder der sichtbare Footer-Bereich deiner Seite, auch wenn beide "unten" klingen. Wenn du unsicher bist, ob du an der richtigen Stelle bist: du willst das Feld für Body-Code in den Theme-Optionen, nicht den Footer-Baustein im Layout.
Wohin mit dem Code
Am saubersten landet das CSS direkt im Menü-Modul: Modul öffnen, Reiter Advanced, Custom CSS, Feld Free Form CSS. Dort arbeitest du mit dem Schlüsselwort selector, das Divi automatisch durch genau dieses Modul ersetzt. So greift dein Code nur an dieser einen Stelle und nirgendwo sonst auf der Seite. Alternativ packst du es unter Design, Customizer, Zusätzliches CSS oder gleich in dein Child-Theme.
Stolperstein 2: Checkboxen ohne Tastatur-Fokus
Eine Sache die WAVE dir tatsächlich nicht anzeigt (und auch die meisten anderen Tools nicht, weshalb ich der Meinung bin die meisten automatischen Tools können deine Seite nicht 100% barrierefrei machen): das Formular kann man nicht vollständig mit der Tastatur bedienen, wenn die Checkboxen nicht ansteuerbar sind.
Die Ursache sitzt tiefer im Markup. Divi zeichnet bei Checkboxen ein eigenes Kästchen über ein leeres <i></i>im Label. Damit dieses gezeichnete Kästchen (findet Divi wahrscheinlich einfach schöner), blendet Divi den echten Input weg. Mit display: none. Und da liegt das Problem. display: none macht ein Element nicht nur unsichtbar, es nimmt es komplett aus dem Tab-Fluss. Der native Input, der den Fokus fangen müsste, ist für die Tastatur nicht mehr da. Deshalb springt Tab an deinen Checkboxen vorbei, als wären sie nicht vorhanden.
Die Lösung mit CSS
.et_pb_contact_field_checkbox input[type="checkbox"],
.et_pb_contact_field_radio input[type="radio"] {
display: inline-block !important;
visibility: visible;
position: absolute;
width: 1.5rem;
height: 1.5rem;
margin: 0;
opacity: 0;
cursor: pointer;
}
.et_pb_contact_field_checkbox input[type="checkbox"]:focus-visible + label i,
.et_pb_contact_field_radio input[type="radio"]:focus-visible + label i {
outline: 2px solid currentColor;
outline-offset: 3px;
}Der erste Block hebt das Verstecken auf und macht den Input stattdessen über opacity: 0 unsichtbar. So bleibt er im Tab-Fluss und fängt den Fokus, während optisch weiter das gezeichnete Kästchen zu sehen ist. Der zweite Block sorgt dafür, dass der Fokus auch sichtbar wird. Er legt einen Rahmen aufs gezeichnete Kästchen, sobald die Checkbox per Tastatur fokussiert ist. Ohne diesen sichtbaren Fokusindikator liegt der Fokus zwar korrekt im DOM, aber auf dem Bildschirm passiert nichts, und davon hat niemand was.
Zum !important: Divi setzt sein display: none selbst mit !important. Ein normaler Override kommt da nicht durch, deshalb steht das !important an der display-Zeile. Ich mag das nicht besonders. Zu viel !important im Stylesheet ist keine schöne Praxis, und normalerweise probiere ich solche Sachen erst ohne. Aber gegen ein !important vom Theme hilft an dieser Stelle nur ein !important zurück. Bei einem quick-and-dirty Fix ist das dann der Weg, und das darf auch mal reichen.
Testen, ob es wirklich passt
Nach dem Einbau gehst du einmal mit der Tastatur durchs Formular, nicht mit der Maus. Tab durch alle Felder. Jede Checkbox und jeder Radio sollte einen sichtbaren Rahmen am Kästchen bekommen. Mit der Leertaste kannst du es anhaken und wieder abhaken. Der Mausklick läuft sowieso übers Label, das ist per for verknüpft, da ändert sich nichts.
Dann WAVE nochmal drüber. Nicht nur gucken, ob es optisch passt, sondern den Scan wiederholen. Die Browser-Extension prüft den live gerenderten Zustand nach dem JavaScript, da sollte das orphaned Label weg sein.
Wenn du beim Thema Tastaturbedienung tiefer einsteigen willst, hab ich das an anderer Stelle schon ausführlicher gemacht: Skiplinks in Divi einrichten geht genau in die Richtung, Menschen ohne Maus schnell durch die Seite zu bringen. Und wie man mit Formular- und Interaktionselementen in einem anderen Page Builder umgeht, steht in barrierefreie Popups mit Elementor.
Noch ein ehrlicher Hinweis
Ich nenn das, was es ist: diese Lösung ist quick and dirty. Sie funktioniert, aber sie hat Kanten, die du kennen solltest. Achtung, jetzt wird es etwas technisch.
Das orphaned Label blitzt einen Sekundenbruchteil im DOM auf, bevor das JavaScript es rauswirft. Und falls dein Formular nach einem Absende-Fehler per AJAX nachlädt, läuft das Script nicht von selbst nochmal, dann ist das Label kurz wieder da, bis die Seite neu lädt. Für ein Kontaktformular auf der eigenen Seite reicht das. Sauberer wäre, das Markup serverseitig über einen PHP-Filter zu korrigieren, sodass das Label gar nicht erst rausgeht. Nur ist Divi 5 ein kompletter Rewrite, und einen dokumentierten Hook genau für dieses Feld-Markup hab ich bisher nicht gefunden und da bin ich ehrlicherweise auch nicht so tief im Thema drin.
Für den Moment erfüllt die Lösung ihren Zweck, und das reicht mir erst mal. Lieber ein Formular, das Tastaturnutzer heute bedienen können, als die perfekte Lösung, die ich noch drei Monate vor mir herschiebe.
Denn darum gehts mir bei dem ganzen Thema. Barrierefreiheit ist für mich kein Häkchen, das man am Schluss setzt, wenn das Budget noch was hergibt. Es ist die Frage, ob die Menschen, für die diese Seite gebaut wurde, das Formular überhaupt ausfüllen können. Bei einem Kontaktformular hängt da oft eine Anfrage dran, ein Auftrag, der erste Kontakt. Schade, wenn der an einer Checkbox scheitert, die nicht alle anklicken können.
Wenn du bei deinem Formular sichergehen willst
Du hast den Fix nachgebaut und dein Formular tut wieder, was es soll? Wohoo, Glückwunsch! Wenn du beim Durchtabben deiner Seite merkst, dass auch an anderen Stellen etwas hakt, oder wenn du gar nicht erst selbst in den Code willst, dann lass uns draufschauen. Über meinen Barrierefreiheits-Check bekommst du eine konkrete Liste statt vager To-dos, und wenn du lieber direkt sprichst, schreib mir kurz, wo du gerade stehst. Ich antworte persönlich, in der Regel innerhalb von 24 Stunden.
Und jetzt bin ich neugierig: Arbeitest du auch mit Divi 5 und bist über dieselbe WAVE-Meldung gestolpert? Oder hast du den serverseitigen Weg gefunden, den ich noch suche? Dann schreib mir, ich will wissen, wie du das gelöst hast.
Häufig gestellte Fragen zu Checkboxen und dem Divi Kontaktformular
Gilt der Fix auch für Radio-Buttons, nicht nur für Checkboxen?
Ja. Beide Snippets sprechen Checkbox- und Radio-Felder gleichzeitig an, du siehst das an den Selektoren mit checkbox und radio. Divi behandelt beide Feldtypen im Kontaktformular gleich, deshalb hilft dieselbe Lösung. Bei Radio-Gruppen bewegst du dich später mit den Pfeiltasten zwischen den Optionen, bei Checkboxen mit Tab und Leertaste.
Muss ich das JavaScript auf jeder einzelnen Seite einbauen?
Nein. Wenn du es über den Theme Builder im Body ablegst, gilt es global für deine ganze Website. Das Script sucht sich die Checkbox- und Radio-Felder selbst und wird nur aktiv, wenn welche da sind. Auf Seiten ohne solche Felder passiert schlicht nichts.
Brauche ich dafür Programmierkenntnisse?
Kopieren und an der richtigen Stelle einfügen reicht, das JavaScript in den Body-Code, das CSS in dein Custom-CSS. Du solltest dich nur trauen, einmal den Browser-Inspector zu öffnen, um zu prüfen, ob bei dir wirklich display: none auf den Inputs liegt. Wenn dir das zu fummelig ist, übernehme ich das bei auch als kleinen Auftrag.
Ist so ein Eingriff updatesicher?
Das CSS bleibt stabil, solange Divi seine Klassennamen nicht ändert. Das JavaScript hängt an denselben Klassen, also gilt dort dasselbe. Weil Divi 5 noch recht neu ist und sich das Markup zwischen Versionen verschieben kann, lohnt es sich, nach einem größeren Divi-Update einmal kurz mit Tab durchs Formular zu gehen und WAVE laufen zu lassen. Fünf Minuten Kontrolle, mehr ist es nicht.
Reicht nicht ein Barrierefreiheits-Plugin oder ein Overlay?
Overlays, die per Klick eine Extraschicht über die Seite legen, beheben Probleme wie dieses meist nicht an der Wurzel und stehen in der Barrierefreiheits-Community stark in der Kritik. Der orphaned label und der fehlende Fokus stecken im HTML deines Formulars. Sinnvoller ist, sie dort zu reparieren, wo sie entstehen, statt sie zu überdecken.
Heißt ein grüner WAVE-Scan, dass mein Formular barrierefrei ist?
Nein, und das ist ein wichtiger Punkt. WAVE prüft automatisch prüfbare Kriterien, zum Beispiel ob ein Label zugeordnet ist. Ob deine Checkboxen mit der Tastatur bedienbar sind, zeigt dir WAVE nicht, wie dieser Artikel zeigt. Für einen ehrlichen Eindruck gehörst du selbst einmal mit der Tastatur durch die Seite und, wenn möglich, mit einem Screenreader.
Was ist ein orphaned form label überhaupt?
So nennt WAVE ein <label>, das im HTML steht, aber keinem Eingabefeld zugeordnet ist. Verknüpft wird ein Label normalerweise über das for-Attribut, das auf die id des Feldes zeigt. Fehlt diese Verbindung, weiß eine unterstützende Technologie nicht, wozu die Beschriftung gehört.
Muss mein Kontaktformular seit dem neuen Gesetz überhaupt barrierefrei sein?
Seit dem 28. Juni 2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz. Es nimmt viele Angebote im Geschäft mit Verbraucher:innen in die Pflicht, Kleinstunternehmen sind unter bestimmten Bedingungen ausgenommen. Ob dein konkreter Fall darunter fällt, hängt von Faktoren wie deinem Angebot, Umsatz und der Mitarbeiterzahl ab, das solltest du für dich rechtlich abklären, ich bin keine Juristin. Unabhängig vom Gesetz gilt für mich: ein bedienbares Formular ist einfach richtig.
Kann ich das gezeichnete Kästchen weiter frei stylen?
Ja. Das sichtbare Kästchen ist bei Divi das <i>-Element im Label, das gestaltest du weiter wie gewohnt. Das CSS blendet nur den nativen Input unsichtbar darüber, damit er den Fokus fangen kann. Achte beim Fokusrahmen auf genug Kontrast zum Hintergrund, currentColor nimmt die Textfarbe, was auf hellem Grund manchmal zu blass ist.
Hast du Erfahrung mit barrierefreien Websites, oder ist das ein einmaliger Ausflug?
Barrierefreiheit ist für mich eine Art Grundhaltung, kein Add-on. Ich baue sie von Anfang an mit ein, hab mich in Projekten unter anderem mit Tastaturnavigation, Skiplinks und Fokusführung beschäftigt und diesen Divi-5-Fix an meinem eigenen Formular durchgezogen, bevor ich ihn hier teile. Diesen Artikel schreibe ich aus einem echten Fall, nicht aus der Theorie.
0 Kommentare