Barrierefreie Kontaktformulare leicht gemacht

Kontaktformulare sind ein wesentlicher Bestandteil moderner Webseiten – doch für Menschen mit Einschränkungen können sie zur echten Hürde werden. Wie schaffst du es, deine Kontaktformulare barrierefrei gestaltest, damit sie für alle zugänglich sind?
‍
Diese Frage wollen wir mit dem heutigen Beitrag beantworten. 

Viel Spaß beim Lesen!

Warum Formulare oft zur Herausforderung werden

Kontaktformulare sind vielseitig einsetzbar, doch für viele Menschen mit Einschränkungen stellen sie erhebliche Hürden dar. Unzugängliche Labels, fehlerhafte Fokussteuerung und unklare Rückmeldungen erschweren oft eine reibungslose Nutzung.

• Fehlende oder unklare Beschriftungen:
  Formularelemente wie Eingabefelder oder Dropdown-Menüs sind häufig nicht ausreichend beschriftet. Für Menschen, die Screenreader nutzen, führt dies dazu, dass sie die Funktion oder den Zweck eines Feldes nicht verstehen können.
• Unzureichende Tastaturnavigation:
  Viele Kontaktformulare sind so gestaltet, dass sie nur mit der Maus bedienbar sind. Nutzer, die auf eine Tastatur oder spezielle Eingabegeräte angewiesen sind, können oft nicht zwischen Feldern wechseln oder Schaltflächen aktivieren.
• Mangelnde visuelle Kontraste:
  Für sehbehinderte Menschen sind schlecht lesbare Schriften, schwache Kontraste und unzureichend hervorgehobene Fehlermeldungen ein häufiges Problem. Diese gestalterischen Mängel erschweren das Ausfüllen und erhöhen das Risiko von Fehlern.
• Keine hilfreichen Rückmeldungen:
  Fehlermeldungen oder Bestätigungen werden oft nicht barrierefrei gestaltet. Wenn diese beispielsweise nur visuell angezeigt werden, entgehen sie Nutzern mit Screenreadern komplett.

Grundlagen: Barrierefreie Formulare mit Elementor

Ein barrierefreies Kontaktformular sollte daher grundsätzlich so gestaltet sein:

• Intuitiv und klar strukturiert, mit leicht verständlichen Beschriftungen.
• Mit Hilfsmitteln wie Screenreadern kompatibel, damit Nutzer mit Sehbehinderungen es bedienen können.
• Tastaturfreundlich sein, sodass die Navigation ohne Maus möglich ist.
• Visuell anpassbar sein, z. B. durch ausreichende Kontraste und Schriftgrößen.
• Hilfreiche Rückmeldungen wie Fehlermeldungen oder Bestätigungen bereitstellen, die sowohl visuell als auch auditiv wahrnehmbar sind.

Barrierefreie Kontaktformulare sollen gestaltet sein, dass jeder Besucher der Website, unabhängig von seinem technischen Verständnis oder seiner Umgebung, die Inhalte mühelos nutzen kann.

Warum sich Elementor grundsätzlich für barrierefreies Webdesign eignet

Elementor ist einer der meistgenutzten Page Builder für WordPress und bietet – vor allem in Kombination mit sauberem Custom Code – gute Voraussetzungen, um barrierefreie Formulare zu erstellen.

ARIA-Attribute und Semantik:

In Elementor lassen sich ARIA-Attribute über Custom Attributes oder gezielten Custom Code hinzufügen. Die Attribute sind essenziell, um Formularelemente für Screenreader zugänglich zu machen – besonders bei der Fehlervalidierung (siehe Code-Beispiel weiter unten).

Responsives Design für mobile Nutzer

Barrierefreiheit schließt auch ein, dass Formulare auf allen Geräten – von Desktops bis hin zu Smartphones – uneingeschränkt nutzbar sind. In Elementor lässt sich das über die integrierten Responsive-Einstellungen (Desktop/Tablet/Mobile-Ansicht) für jedes Formularfeld einzeln steuern.

Intuitive visuelle Oberfläche

Elementor kombiniert eine intuitive visuelle Oberfläche mit der Möglichkeit, gezielt eigenen Code zu ergänzen. Dadurch lassen sich barrierefreie Formulare größtenteils per Drag-and-Drop gestalten – für die letzten 10% (z. B. Screenreader-Fehlermeldungen) reicht ein kleines Code-Snippet.

Community und Ressourcen:

Auch für Elementor gibt es eine große Community sowie zahlreiche Tutorials und Snippets, die sich gezielt mit barrierefreiem Formulardesign beschäftigen. Diese Ressourcen helfen, Best Practices schnell zu erlernen und anzuwenden.

Rechtliche Anforderungen des barrierefreiem Webdesigns

Barrierefreiheit ist nicht nur eine Frage einer besseren User Experience im Webdesign, sondern in vielen Ländern auch gesetzlich vorgeschrieben. Zu den wichtigsten Regelungen zählen:

• WCAG (Web Content Accessibility Guidelines): Diese internationalen Richtlinien definieren Standards für barrierefreie Webinhalte, z. B. wahrnehmbare Inhalte, eine einfache Bedienung und verständliche Strukturen.
• EN 301549, EU-Richtlinie 2102: Innerhalb der EU sind öffentliche Websites verpflichtet, barrierefrei zu sein.
• ADA (Americans with Disabilities Act) In den USA müssen Websites unter anderem für Personen mit Behinderungen zugänglich sein.

Übersicht, wie das Barrierefreiheitsgesetz in Deutschland beschlossen wurde

Grundprinzipien barrierefreier Formulare

Klare Labels sind das A und O für barrierefreie Formulare. Sie helfen sehenden Nutzern sowie auch Screenreader Nutzern die Funktion eines Eingabefeldes zu verstehen.

• Verwende dazu die nativen Label-Felder im Elementor Form-Widget: Jedes Feld hat einen eigenen „Label“-Bereich, der automatisch korrekt mit dem Eingabefeld verknüpft wird.
• Beschreibe die Funktion eindeutig: Nutze präzise und verständliche Begriffe wie „E-Mail-Adresse“ statt nur „Feld 1“.
• Platziere Labels strategisch: Setze Labels über oder links neben das Eingabefeld, um die Lesbarkeit zu verbessern.

Optimale Tastaturnavigation mit Elementor gestalten

Eine gute Tastaturnavigation stellt sicher, dass dein Kontaktformular auch ohne Maus vollständig bedienbar ist.

• Tab-Reihenfolge anpassen: In Elementor kannst du über Custom Attributes (tabindex) am jeweiligen Feld die Tabulator-Reihenfolge festlegen, um die Navigation logisch und intuitiv zu gestalten.

• Fokus sichtbar machen: Nutze in Elementor die Hover/Focus-Einstellungen im Style-Tab des Formularfelds, um einen deutlich sichtbaren Fokus-Rahmen (z. B. per :focus-Selektor im Custom CSS) zu definieren.

• Tastaturzugängliche Buttons: Achte darauf, dass alle Buttons und interaktiven Elemente mit der Eingabetaste aktiviert werden können.

Farbgestaltung und Kontraste

Ausreichender Farbkontrast sorgt dafür, dass Inhalte auch von Menschen mit Sehbehinderungen oder Farbenblindheit gut wahrgenommen werden können. Mehr zu barrierefreien Farben kannst du in diesem Artikel nachlesen.

• Kontrast-Richtlinien einhalten: Stelle sicher, dass der Kontrast zwischen Text und Hintergrund mindestens 4,5:1 beträgt, wie von den WCAG (Web Content Accessibility Guidelines) empfohlen.
• Keine alleinige Farbkennzeichnung: Verlasse dich nicht ausschließlich auf Farben, um wichtige Informationen zu vermitteln. Ergänze farbliche Hinweise durch Symbole oder Text.
• Kontrast-Tools nutzen: Elementor selbst zeigt keine WCAG-Level im Farbwähler an – prüfe Kontraste daher zusätzlich mit einem externen Tool wie dem WebAIM Contrast Checker, bevor du die Farben in Elementor final einträgst.

ARIA-Attribute in Elementor implementieren

ARIA-Attribute (Accessible Rich Internet Applications) verbessern die Zugänglichkeit von Formularen. Bei Elementor sind sie vor allem bei der Fehlervalidierung wichtig: Standardmäßig werden Fehlermeldungen im Elementor Form-Widget nur visuell angezeigt – Screenreader-Nutzer bekommen davon nichts mit, wenn kein zusätzliches ARIA-Markup gesetzt wird.

So löst du das in der Praxis: Mit folgendem Code-Snippet (per Code-Snippet-Plugin wie WPCode oder im Theme eingebunden) werden Elementor-Formularfehler automatisch für Screenreader auslesbar gemacht: Fehlerhafte Felder erhalten aria-invalid="true", die Fehlermeldung wird über aria-describedby mit dem Feld verknüpft, zusätzlich als role="alert" markiert (damit Screenreader sie sofort ansagen), und der Fokus springt automatisch zum ersten fehlerhaften Feld.

document.addEventListener('elementor/form/validation', function(event, form){
  form.querySelectorAll('.elementor-message.elementor-message-danger, .elementor-message.elementor-error').forEach(function(err){
    const input = err.closest('.elementor-field-group')?.querySelector('input, select, textarea');
    if (input) {
      input.setAttribute('aria-invalid', 'true');
      const errId = err.id || 'err-' + Math.random().toString(36).substr(2,9);
      err.id = errId;
      input.setAttribute('aria-describedby', errId);
      err.setAttribute('role', 'alert');
    }
  });
  const firstErrorInput = form.querySelector('[aria-invalid="true"]');
  if (firstErrorInput) firstErrorInput.focus();
});

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('form.elementor-form').forEach(function(form) {
    form.setAttribute('novalidate', '');
  });
});

Das zweite Snippet (novalidate) deaktiviert die native Browser-Validierung, damit ausschließlich die eigene, barrierefreie Elementor/JS-Validierung greift – so gibt es keine doppelten oder widersprüchlichen Fehlermeldungen.

Wann ARIA-Attribute wirklich notwendig sind:

• Benutzerdefinierte Validierungen: Wenn JavaScript-basierte Validierungen verwendet werden (z. B. bei fehlerhaften Formulareingaben), ist ARIA notwendig, um Fehler für Screenreader zugänglich zu machen.
  
  Hierzu werden aria-invalid (zeigt an, dass ein Feld ungültig ist) und aria-describedby (verknüpft Fehlermeldungen) verwendet.
• Zusätzliche Hinweise: ARIA wird benötigt, wenn Informationen bereitgestellt werden, die nicht in sichtbaren Labels enthalten sind, aber für Benutzer wichtig sind.
  
  Mit aria-describedby können diese Hinweise (z. B. Passwortanforderungen) für Screenreader zugänglich gemacht werden.
• Komplexe Widgets: Bei interaktiven Elementen wie Dropdowns oder Akkordeons, die Inhalte ein- oder ausblenden, macht ARIA die Interaktivität für Screenreader erkennbar.
  
  Wichtige Attribute sind aria-expanded (zeigt Zustand an) und aria-controls (verknüpft interaktives Element mit dem Inhalt).

Barrierefreie Kontaktformulare mit Elementor erstellen: Schritt-für-Schritt

1. Planung: Zielgruppe beachten

Bevor du mit der Erstellung deines Kontaktformulars beginnst, ist eine fundierte Planung entscheidend. Überlege dir:

• Wer ist deine Zielgruppe? Denke dabei an Nutzer mit verschiedenen Bedürfnissen, z. B. Menschen mit motorischen Einschränkungen oder Sehbehinderungen.
• Welche Funktion soll das Formular erfüllen? Fokus dabei auf Einfachheit und verzichte auf unnötige Felder, um die Benutzerfreundlichkeit zu steigern.
• Welche Barrieren könnten auftreten? Berücksichtige potenzielle Probleme wie unklare Beschriftungen, schlechte Kontraste oder unzugängliche Fehlerhinweise.

Pro-Tipp: Erstelle ein Nutzerprofil oder eine „Empathy Map“, um dich besser in deine Zielgruppe hineinzuversetzen.

Beispiel Empathy Map für ein UX/ UI Projekt, um zielgruppenspezifisch zu gestalten

2. Formularerstellung in Elementor

Wenn du deine Zielgruppe bereits gut kennst, kannst du das Kontaktformular in Elementor erstellen und wie folgt vorgehen:

Input-Felder, Buttons und Dropdown-Menüs:

• Semantische HTML-Elemente nutzen: Das Elementor Form-Widget generiert automatisch sauberen, semantischen HTML-Code für Formularelemente. Ziehe Input-Felder, Buttons und Dropdown-Menüs direkt aus der Elementor-Widget-Leiste in dein Formular.
• Eindeutige Labels verknüpfen: Jedes Formularfeld benötigt ein Label, das den Zweck des Feldes beschreibt. Verknüpfe das Label korrekt mit dem Eingabefeld, um es für Screenreader zugänglich zu machen.
• Platzhalter sparsam verwenden: Placeholder-Texte sind oft schwer lesbar und verschwinden, sobald ein Nutzer etwas eintippt. Nutze sie daher ergänzend, aber nicht als Ersatz für Labels.

Barrierefreie Formularmeldungen sollten sinnvoll benannt werden und barrierefreie Farbkontraste haben

Fehlerhinweise und Validierung zugänglich gestalten:

• Direkte Fehlermeldungen: Platziere Fehlermeldungen in der Nähe des fehlerhaften Feldes und stelle sicher, dass sie visuell und über Screenreader wahrnehmbar sind.
• Farbliche Hinweise ergänzen: Kombiniere farbliche Markierungen (z. B. rote Rahmen) mit Text, um Farbblinden die Erkennung zu erleichtern.
• Live-Validierung: Nutze die native Elementor-Formularvalidierung zusammen mit dem oben gezeigten ARIA-Snippet, damit Nutzer direktes Feedback bekommen – visuell UND für Screenreader hörbar.

Testing: So überprüfst du die Barrierefreiheit deines Kontaktformulars

Nach der Erstellung deines Formulars ist es wichtig, dessen Barrierefreiheit gründlich zu testen:
‍
Automatisierte Tools verwenden:
Nutze bewährte Barrierefreiheits-Tools wie beispielsweise Lighthouse, Axe oder das WAVE-Tool um potenzielle Probleme zu identifizieren.

Test mit Screenreadern:
Simuliere die Nutzung deines Formulars mit gängigen Screenreadern wie NVDA oder dem nativen VoiceOver auf MacOS. Achte darauf, ob alle Inhalte korrekt vorgelesen werden.

Tastaturnavigation prüfen:
Stelle sicher, dass du das Formular vollständig mit der Tabulatortaste bedienen kannst und alle aktiven Elemente einen sichtbaren Fokus haben.

Benutzertests durchführen:
Wenn möglich hole dir Feedback von Personen mit Einschränkungen ein, um echte Nutzungserfahrungen zu sammeln und Schwachstellen zu beheben.

Wie du den Screenreader auf MacOS aktivierst, um deine Webseite auf Barrierefreiheit zu testen

Vorteile von barrierefreien Formularen

Barrierefreie Kontaktformulare verbessern die Benutzerfreundlichkeit und sprechen eine breitere Zielgruppe an, was die Zufriedenheit und Conversion-Raten steigert. Zudem profitierst du auch durch SEO-Vorteile, da barrierefreie Websites von Suchmaschinen bevorzugt und besser sichtbar sind.

Darüber hinaus zeigen barrierefreie Kontaktformulare ein Engagement für Inklusion und soziale Verantwortung. Das stärkt dein Markenimage und du minimierst mögliche rechtliche Risiken, indem geltende Barrierefreiheitsstandards und -richtlinien erfüllt werden.

Barrierefreiheit auf deiner Webseite bringt viele Vorteile mit sich

Checkliste und Ressourcen für barrierefreie Formulare in Elementor

Wie du Barrierefreiheit deines Kontaktformulars sicherstellst

Checkliste: So stellst du sicher, dass dein Kontaktformular barrierefrei ist

• Semantische HTML-Struktur:
  Jedes Formularfeld hat ein korrekt verknüpftes Label. Alle Formularfelder sind klar benannt und verständlich.
• Tastaturzugänglichkeit:
  Die Tab-Reihenfolge ist logisch und intuitiv. Alle interaktiven Elemente sind per Tastatur erreichbar.
• Fehlerhinweise und Validierung:
  Fehlermeldungen erscheinen in unmittelbarer Nähe zum fehlerhaften Feld.Fehlerhinweise sind sowohl visuell als auch durch Screenreader zugänglich.
• Farbgestaltung und Kontraste:
  Texte haben einen ausreichenden Kontrast zum Hintergrund (mindestens 4,5:1).
• ARIA-Attribute:
  Wichtige Formularelemente wie Pflichtfelder oder Fehlermeldungen sind mit ARIA-Attributen versehen. Screenreader-Tools können die ARIA-Attribute korrekt interpretieren.
• Mobile Optimierung: Formulare sind auf allen Geräten gut lesbar und benutzerfreundlich.
  Schaltflächen sind ausreichend groß und touch-freundlich.

Tools und Plugins

WP Code – WordPress Plugin
Nutze ein Snippet-Plugin wie WPCode, um Custom-Code (wie das ARIA-Snippet oben) sauber und update-sicher in deine WordPress-Seite einzubinden, ohne das Theme direkt zu bearbeiten.

Lighthouse (Google):
Lighthouse ist ein kostenloses Tool von Google, das eine umfassende Analyse deiner Seite hinsichtlich Performance, Barrierefreiheit und SEO bietet. Es hilft dir, Optimierungsbereiche zu identifizieren.

Wave (WebAIM):
Wave ist ein weiteres Tool zur Analyse der Barrierefreiheit, das speziell für Webentwickler entwickelt wurde. Es gibt dir visuelle Rückmeldungen und Hinweise zu Barrieren auf deiner Website.

Accessi.org:
Ein einfaches und praktisches Tool, das WordPress-Seiten auf Barrierefreiheitsprobleme untersucht und Lösungsvorschläge bietet.

Fazit

Barrierefreie Kontaktformulare sind heute unerlässlich, um eine breite Nutzerbasis anzusprechen und die Anforderungen der Inklusion sowie gesetzlicher Vorgaben zu erfüllen. Durch das Umsetzen von barrierefreien Formularen in Elementor kannst du die Benutzererfahrung verbessern, Conversion-Raten steigern und von SEO-Vorteilen profitieren.

Nutze die Gelegenheit, dein Elementor-Projekt bereits jetzt auf Barrierefreiheit auszurichten. Jetzt ist der richtige Zeitpunkt, um deine Website zukunftssicher und für alle zugänglich zu gestalten.

Falls dein Team beim Testen und Umsetzen Unterstützung braucht: In meiner Barrierefreiheit-Schulung zeige ich praxisnah, worauf es bei barrierefreien Formularen ankommt.

Häufige Fragen zu barrierefreien Kontaktformularen

Brauche ich ARIA-Attribute, wenn ich Elementor nutze?
Ja, vor allem bei der Fehlervalidierung. Das Elementor Form-Widget zeigt Fehlermeldungen standardmäßig nur visuell an – ohne zusätzliches ARIA-Markup (siehe Code-Snippet oben) bekommen Screenreader-Nutzer davon nichts mit.

Wie teste ich mein Formular ohne Screenreader-Vorkenntnisse?
Am einfachsten startest du mit automatisierten Tools wie Lighthouse, WAVE oder Axe, die potenzielle Probleme ohne Vorwissen aufzeigen. Für einen ersten Screenreader-Test reicht der auf MacOS integrierte VoiceOver oder das kostenlose NVDA für Windows, beide lassen sich mit wenigen Klicks aktivieren.

Reicht die automatische Barrierefreiheit von Elementor-Formularen aus?
Elementor liefert eine solide Grundlage, etwa durch sauberen semantischen Code und einfache Label-Verknüpfung. Bei der Fehlervalidierung braucht es aber zusätzliches ARIA-Markup per Custom Code (siehe oben) – ohne das bleiben Fehlermeldungen für Screenreader-Nutzer unsichtbar.

Wie oft sollte ich mein Kontaktformular auf Barrierefreiheit testen?
Nach jeder größeren inhaltlichen oder gestalterischen Änderung solltest du erneut testen. Eine grundlegende Prüfung alle paar Monate ist zusätzlich sinnvoll, um sicherzustellen, dass neue Elementor-Updates oder Plugin-Änderungen nichts an der Zugänglichkeit verschlechtert haben – gerade Custom-Code-Snippets wie das ARIA-Skript solltest du nach größeren Elementor- oder WordPress-Updates kurz gegentesten.