Am 28. Juni 2025 tritt das neue BFS-Gesetz (Barrierefreiheitsstärkungsgesetz) in Kraft. Viele kleine Unternehmen, Vereine oder Solo-Selbstständige sind zwar offiziell davon ausgenommen – aber mal ehrlich: Barrierefreiheit ist keine Pflichtaufgabe für wenige, sondern ein Grundrecht für alle.
Wer heute eine Website baut, sollte daran denken, dass jede Nutzerin und jeder Nutzer ein Recht darauf hat, Inhalte barrierefrei und ohne Hürden nutzen zu können. Dazu gehört natürlich auch ein barrierefreies Kontaktformular.
Mit ein bisschen CSS lässt sich das Divi Kontaktformular ganz einfach auf ein neues Level bringen – ganz ohne zusätzliches Plugin.
Etwas Grundsätzliches zu Plugins: es gibt gerade für Divi unzählige Plugins mit unzähligen Modulen und fancy Animationen. Ich habe sie alle! Und ich verwende sie nicht mehr. Mit sehr wenigen Ausnahmen. Warum? Ich bin öfter mit deren Support beschäftigt gewesen, als mich um die wirklich wichtigen Dinge zu kümmern. Auf eine neue PHP-Version upgraden? Fehlanzeige! Konflikte mit anderen Plugins? Ständig! Miserable Übersetzungen? Oft! Die Liste liesse sich beliebig weiterführen. Weniger ist mehr! Mehr Inhalt. Mehr Qualität! Mehr Zeit.
Inhalt
1. Warum Barrierefreiheit mehr ist als ein „Nice to have“
Barrierefreiheit heißt nicht nur „Screenreader können die Seite lesen“. Es geht auch um einfache Dinge wie gute Kontraste, verständliche Sprache, große klickbare Flächen und natürlich klare Feldbeschriftungen in Formularen.
Wenn Besucher*innen raten müssen, welches Feld was bedeutet, weil nur ein Placeholder als Hinweis da ist, wird es schnell frustrierend – und im schlimmsten Fall unzugänglich.
Kurz gesagt: Barrierefreiheit macht Webseiten für alle besser.
2. Mit ein bisschen CSS zu besseren Formularen: Labels einfügen
Divi bietet von Haus aus im Kontaktformular-Modul nur Platzhaltertexte („Placeholder“) – also keine echten Feldbeschriftungen oberhalb der Eingabefelder.
Das ist die Ausgangslage:
Das ist nicht ideal, denn Placeholders verschwinden, sobald man zu tippen beginnt. Die Lösung? Ein bisschen CSS-Magie!
Das wollen wir:
Schritt 1:
Öffne die Einstellungen für das Modul Kontaktformular und dort die Einstellungen für das jeweilige Feld, hier „Name“.
Schritt 2:
Klicke auf (1) „Erweitert“, dann unter „Benutzerdefiniertes CSS“ auf (2) „Modulelemente“ und schliesslich in das Fenster (3) „Vorher“.
Schritt 3:
Schreibe folgende CSS-Anweisung in das Feld „Vorher“ (Schriftfarbe an Dein Formular angepasst):
content: "Name";
Display: block;
color: #fff;
font-weight: 600;
margin-bottom: 5px;Schritt 4:
Das wiederholst nun bei jedem Feld. Fertig!
Damit hast du schnell sichtbare, dauerhafte Beschriftungen – besser für alle Nutzerinnen und Nutzer und barrierefreundlicher.
3. Erfolgsmeldung aufhübschen? Kein Problem!
Die Standard-Divi Erfolgsmeldung ist leider kaum zu lesen, und innerhalb des Moduls gibt es keine Möglichkeit, diese zu stylen.
Die Erfolgsmeldung können wir aber trotzdem mit ein bisschen CSS aufhübschen und lesbar machen.
Das ist die Ausgangslage:
Das wollen wir:
Schritt 1:
Öffne die Einstellungen für das Modul Kontaktformular und gehe dort auf (1) „Erweitert“, dann (2) „Freiform-CSS“ und klicke in das Feld (3) „CSS (Standbild)“.
Schritt 2:
Schreibe folgende CSS-Anweisung in das Feld „Vorher“ (Schriftfarbe an Dein Formular angepasst):
.et-pb-contact-message p {
color: #fff;
font-size: 21px;
font-weight: 700;
text-transform: uppercase;
}Und schon fühlt sich der erfolgreiche Formularversand für deine Besucherinnen und Besucher ein bisschen freundlicher und hochwertiger an.
4. Fehlermeldungen stylen
Auch die Fehlermeldungen – wenn z.B. jemand ein falsches eMail-Format eingibt – sind im Divi-Standard kaum zu lesen.
Das ist die Ausgangslage:
Das wollen wir:
Dazu müssen wir im gleichen CSS-Code-Feld wie unter „3. Erfolgsmeldung stylen“ lediglich etwas Code hinzufügen, allerdings mit einem leicht anderen Selector:
.et-pb-contact-message li {
color: #fff;
font-style: italic;
font-size: 21px;
font-weight: 700;
}Beide Selektoren heissen „.et-pb-contact-message“, aber die Erfolgsmeldung wird als „Paragraph (p)“ ausgegeben, während die Fehlermeldung als „Listenelement (li)“ ausgegeben wird.
Profitip: Sollen Erfolgsmeldung und Fehlermeldung gleich gestylt werden, reicht der erste Codeblock. Dort einfach das „p“ entfernen.
5. Noch ein bisschen besser: Weitere Tools und Tipps
Wer noch mehr für die Barrierefreiheit seiner Website tun möchte, kann auf tolle kostenlose Helfer zurückgreifen:
- sienna.js (MIT): Ein kleines JavaScript-Tool, das Tastatur-Navigation und Fokus-Management verbessert.
- WAVE Accessibility Tool: Browser-Erweiterung zur schnellen Prüfung von Kontrast, Struktur und Alternativtexten.
- Contrast Checker: Teste, ob Text und Hintergrund genügend Farbkontrast haben.
- Readability Test Tool: Analysiere, wie leicht deine Texte verständlich sind.
Es lohnt sich, diese Tools gelegentlich über seine Seite drüberlaufen zu lassen – du wirst überrascht sein, was sich alles optimieren lässt!
6. Fazit: Kleine Details, große Wirkung
Ein barrierefreies Kontaktformular sollte 2025 selbstverständlich sein – nicht nur wegen neuer Gesetze, sondern weil jede Nutzerin und jeder Nutzer das Recht auf einen einfachen Zugang verdient.
Und das Beste: Du musst dafür weder ein teures Plugin kaufen noch komplizierte Programmierung betreiben.
Ein bisschen CSS, ein wenig Liebe zum Detail – und dein Divi-Formular wird besser, schöner und zugänglicher.
Also: Ärmel hochkrempeln und ran an den Code. Deine Besucherinnen und Besucher werden es dir danken!
Hol Dir Divi noch heute: Risikofreie 30-Tage-Geld-zurück-Garantie! (Affiliate Link)
0 Kommentare