Kompatibilität:

WebSite X5 Evo und Pro ab v.2025.1

Formulare gehören zu den am häufigsten genutzten Werkzeugen im Web: Sie ermöglichen es Nutzern, sich für Newsletter anzumelden, Anfragen zu senden, Produkte zu kaufen und vieles mehr. Wenn sie jedoch nicht korrekt gestaltet sind, können sie für Menschen mit Behinderungen zu einer Barriere werden und sie daran hindern, gewünschte Aktionen durchzuführen.


Die Barrierefreiheit von Formularen ist entscheidend, um sicherzustellen, dass alle Nutzer, einschließlich derjenigen, die Screenreader verwenden, mit der Tastatur navigieren oder visuelle oder kognitive Einschränkungen haben, problemlos mit den Formularen interagieren können. Barrierefreie Formulare fördern nicht nur die Inklusion, sondern verbessern auch das gesamte Nutzungserlebnis: Klare Anweisungen, sofortiges Feedback und eine intuitive Navigation machen Formulare einfacher und verständlicher für alle.


In dieser Anleitung behandeln wir die grundlegenden Prinzipien zur barrierefreien Gestaltung von Formularen, mit Fokus auf:


Wichtige WCAG-Richtlinien

Die Web Content Accessibility Guidelines (WCAG) enthalten eine Reihe von Kriterien, um Formulare für alle Nutzer zugänglich zu machen, einschließlich Menschen mit Seh-, motorischen oder kognitiven Beeinträchtigungen. Diese Kriterien stellen sicher, dass Formulare sowohl mit unterstützenden Technologien wie Screenreadern als auch mit der Tastatur bedienbar sind.


Zu den wichtigsten WCAG-Anforderungen für Formulare gehören:

  • Kriterium 1.3.1 - Informationen und Beziehungen (Stufe A)

Dieses Kriterium fordert, dass die auf einer Seite sichtbaren Informationen und Beziehungen erhalten bleiben, auch wenn der Inhalt anders präsentiert wird, z. B. durch einen Screenreader oder andere assistive Technologien. Mit anderen Worten, die Informationen müssen semantisch strukturiert und für alle Nutzer verständlich sein.

Für Formulare bedeutet dies, dass jedes Feld korrekt mit seinem Label verknüpft sein muss, sodass die Beziehungen zwischen den verschiedenen Elementen von allen Nutzern genutzt werden können.

  • Kriterium 3.3.1 - Fehlererkennung (Stufe A)

Dieses Kriterium fordert, dass ein Fehler beim Ausfüllen eines Formulars erkannt und verständlich kommuniziert wird. Ziel ist es, sicherzustellen, dass der Nutzer das Problem erkennt und über die notwendigen Informationen zur Behebung verfügt.

  • Kriterium 3.3.2 - Beschriftungen oder Anweisungen (Stufe A)

Dieses Kriterium erfordert, dass jedes Formularfeld klare Beschriftungen oder Anweisungen enthält, damit Nutzer verstehen, was erforderlich ist und wie das Feld korrekt auszufüllen ist. Ziel ist es, einen angemessenen Kontext bereitzustellen, um Fehler zu reduzieren und den Ausfüllprozess für alle intuitiver zu gestalten.

  • Kriterium 4.1.2 - Name, Rolle, Wert (Stufe A)

Dieses Kriterium fordert, dass interaktive Elemente auf einer Webseite, wie Formularfelder, einen klar definierten Namen, eine Rolle und einen Wert haben. Dies stellt sicher, dass diese Elemente nicht nur für sehende Nutzer verständlich sind, sondern auch für Menschen, die assistive Technologien wie Screenreader verwenden.


Beschriftungen und Anweisungen

Der erste Schritt zur Barrierefreiheit eines Formulars besteht darin, die Beschriftungen und Anweisungen der enthaltenen Felder korrekt zu verwalten. Jedes Feld muss mit einer klaren und sichtbaren Beschriftung versehen sein, die genau beschreibt, welche Informationen eingegeben werden sollen, sowie mit Anweisungen, die hilfreichen Kontext für die Eingabe bieten.


Für Nutzer ohne Sehbeeinträchtigungen reicht die Position der Beschriftung neben dem Feld aus, um den Bezug zu verstehen. Diese Beziehung kann jedoch für Nutzer, die auf assistive Technologien wie Screenreader angewiesen sind, verloren gehen. Daher verlangt das WCAG-Erfolgskriterium 1.3.1, dass Beschriftungen nicht nur visuell, sondern auch im HTML-Code korrekt mit den Feldern verknüpft sind. Die Verwendung des <label>-Tags oder des Attributs aria-labelledby stellt sicher, dass jede Beschriftung klar mit ihrem zugehörigen Feld verbunden ist, was die Nutzererfahrung für Menschen mit assistiven Technologien erheblich verbessert.


Ebenso müssen Anweisungen leicht verständlich und zugänglich sein. Technische Sprache sollte vermieden und stattdessen auf Klarheit und Einfachheit gesetzt werden. Darüber hinaus sollten Anweisungen nicht nur auf visuelle Elemente wie Farben oder Symbole angewiesen sein, sondern eindeutigen Text enthalten, um auch für Nutzer mit Sehbehinderungen lesbar zu sein. Das Platzieren von Anweisungen über einem Feld oder einer Feldgruppe hilft, Missverständnisse zu vermeiden und Fehler sowie Frustration zu reduzieren.


Feedback und Verwaltung der Fehler

Um Benutzer dabei zu unterstützen, ein Formular problemlos auszufüllen, ist es entscheidend, alle möglichen Szenarien korrekt zu verwalten, indem man klares Feedback gibt, das ihnen ermöglicht zu verstehen, was passiert und wie sie fortfahren können. In diesem Sinne muss die Fehlerbehandlung so gestaltet sein, dass das Problem hervorgehoben und Anweisungen zu dessen Behebung gegeben werden, ohne Verwirrung oder Frustration zu verursachen.


Wenn ein Fehler auftritt, ist es wichtig, ihn visuell direkt neben dem betroffenen Feld anzuzeigen, begleitet von einer klaren Textnachricht wie „Dieses Feld ist erforderlich“ oder „Bitte geben Sie eine gültige E-Mail-Adresse ein.“ Ebenso entscheidend ist es, dass Fehler auf Code-Ebene kommuniziert werden, damit auch Nutzer von Screenreadern sie wahrnehmen können. Dies kann durch spezifische Attribute wie aria-invalid, das den Status des Feldes signalisiert, und aria-describedby, das das Feld mit der spezifischen Fehlermeldung verknüpft, erreicht werden.


Um visuelle Barrierefreiheit zu gewährleisten, ist es sinnvoll, fehlerhafte Felder mit kontrastierenden Farben hervorzuheben. Allerdings sollte man sich nicht ausschließlich auf Farben verlassen, da einige Benutzer Schwierigkeiten haben könnten, diese zu unterscheiden. Es ist stets empfehlenswert, Farben mit Text zu kombinieren, um den Fehler für alle Nutzer deutlich erkennbar zu machen.


Schließlich hilft es den Nutzern, wenn sie nach erfolgreichem Absenden des Formulars eine positive Rückmeldung erhalten, z. B. eine Nachricht wie „Formular erfolgreich gesendet!“, damit sie wissen, dass die Aktion korrekt abgeschlossen wurde.


Tastaturnavigation

Neben der Arbeit an Beschriftungen und Rückmeldungen ist es entscheidend, dass ein Formular vollständig über die Tastatur navigierbar ist, um die Zugänglichkeit für alle Nutzer zu gewährleisten – insbesondere für Menschen mit motorischen oder visuellen Einschränkungen, die keine Maus verwenden. Die Tastaturnavigation ermöglicht es den Nutzern, zwischen den Formularfeldern zu wechseln, Optionen auszuwählen und das Formular ausschließlich mit Tastaturbefehlen abzusenden.


Um eine effektive Navigation zu gewährleisten, sollten die Felder einer logischen und vorhersehbaren Reihenfolge folgen, die dem visuellen Ablauf der Seite entspricht. Diese Reihenfolge wird automatisch durch die HTML-Struktur bestimmt, daher ist es wichtig, unnötige Änderungen mit dem tabindex-Attribut zu vermeiden. Das Ändern der natürlichen Reihenfolge der Felder kann Verwirrung stiften und Benutzer, insbesondere Screenreader-Nutzer, behindern.


Zudem ist es wichtig, dass alle interaktiven Elemente im Formular, wie Schaltflächen, Links und Kontrollkästchen, über die Tastatur zugänglich sind und mit Standardtasten aktiviert werden können. Zum Beispiel:

  • Tab: um von einem Feld zum nächsten zu wechseln.
  • Enter: um Schaltflächen zu aktivieren oder Optionen auszuwählen.
  • Leertaste: um Kontrollkästchen auszuwählen oder Schaltflächen zu aktivieren.


#Tipp - Dieses Thema haben wir ausführlicher in der Anleitung behandelt: Wie man eine barrierefreie Tastaturnavigation gewährleistet


So erstellen Sie ein barrierefreies Formular mit WebSite X5

Wie wir gesehen haben, ist es notwendig, den Code zu ändern, um die von den WCAG empfohlenen Erfolgskriterien zu erfüllen und ein Formular barrierefrei zu gestalten. Dies geschieht durch die Verwendung von semantischen Elementen und in einigen Fällen ARIA-Attributen (Accessible Rich Internet Applications). Dies ist entscheidend, damit Formulare sowohl für Benutzer, die assistive Technologien verwenden, als auch für Browser verständlich sind.


#Tipp - ARIA ist keine Programmiersprache, sondern eine Sammlung von Attributen, die HTML-Elementen hinzugefügt werden können, um die Barrierefreiheit von Web-Oberflächen zu verbessern, insbesondere bei dynamischen oder interaktiven Inhalten. 


Mit WebSite X5 können Sie jedoch barrierefreie Formulare erstellen, ohne den Code manuell bearbeiten zu müssen. Die Software generiert automatisch semantisch korrekten Code, der die erforderlichen HTML-Elemente und ARIA-Attribute enthält und somit eine solide Grundlage für Barrierefreiheit schafft (sehen Sie: Barrierefreiheitskriterien in WebSite X5).


Allerdings hängt die tatsächliche Barrierefreiheit des Formulars auch von Ihren Entscheidungen ab. WebSite X5 bietet Ihnen volle Freiheit bei der Gestaltung Ihrer Webseiten. Daher sollten Sie beim Erstellen Ihrer Formulare auf folgende Aspekte achten:

  • Farben und Kontraste, die den Lesbarkeitsstandards entsprechen müssen.
  • Beschriftungstexte und Fehlermeldungen, die klar und verständlich sein sollten.
  • Anleitungen und Hinweise, die den Nutzer beim Ausfüllen des Formulars ohne Unklarheiten unterstützen.


Durch die Kombination aus dem von WebSite X5 generierten korrekten Code und Ihren bewussten Designentscheidungen können Sie barrierefreie Formulare erstellen, die das Benutzererlebnis für alle verbessern.


#Tipp - Erfahren Sie, wie Sie ein Kontaktformular erstellen können: So arbeiten Sie mit dem Kontaktformular-Objekt?


Tools zur Überprüfung der Barrierefreiheit von Formularen

Um sicherzustellen, dass ein Formular wirklich barrierefrei ist, sollte es sowohl mit automatisierten Tools, die den Code und die Struktur analysieren, als auch mit manuellen Tests überprüft werden, die die Erfahrung von Nutzern mit Behinderungen simulieren.


Automatisierte Tools helfen dabei, häufige Barrierefreiheitsprobleme in Formularen zu identifizieren, wie fehlende Beschriftungen, Kontrastprobleme oder unklare Fehlermeldungen. Hier sind einige der nützlichsten Tools:


Neben automatisierten Überprüfungen ist es wichtig, praktische Tests durchzuführen, um sicherzustellen, dass das Formular tatsächlich für Nutzer von assistiven Technologien zugänglich ist:

  • Screenreader-Simulationen → Teste das Formular mit Screenreadern wie NVDA (Windows) oder VoiceOver (Mac), um sicherzustellen, dass Beschriftungen, Fehlermeldungen und Felder verständlich sind.
  • Tastaturnavigation → Versuche, das Formular ohne Maus auszufüllen, indem Sie mit der TAB-Taste zwischen den Feldern navigieren und Schaltflächen/Optionen mit Enter/Leertaste auswählen.