Visforms und Barrierefreiheit
Seit dem Bestehen der ersten Versionen von Visforms arbeiten wir kontinuierlich daran, den aktuellen Stand der Technik und Maßnahmen für eine barrierefreie Nutzung umzusetzen.
In Zusammenarbeit mit betroffenen Kunden und Nutzern haben wir alles Notwendige umgesetzt, damit Formulare den Standards und gesetzlichen Vorgaben genügen können.
Insbesondere stellt Visforms das Folgende sicher:
- Übersichtliche gut strukturierte Formulare können erstellt werden.
- Jedes Eingabe-Feld besitzt ein eindeutig zugeordnetes Label.
- Jedes Label kann zusätzlich mit einem Icon versehen werden, das als visuelle Unterstützung dient.
- Das Formular kann durch zusätzliche Texte zusätzlich verständlicher gestaltet werden.
- Das gesamte Formular ist durch korrektes aria Attribut-Labeling für Screen-Reader zugänglich und verständlich.
- Benutzereingaben werden in benutzerfreundlicher Weise validiert.
- Aussagekräfte Fehlermeldungen werden ausgegeben, die den fehlerhaften Eingaben direkt und unmittelbar zugeordnet sind.
Die direkte Zuordnung gilt ebenso für Screen-Reader. - Eingabe-Felder, die nicht disabled sind, können mit der Tastatur erreicht werden.
- Elemente ohne funktionale Bedeutung werden im HTML durch ein entsprechendes role="presentation" Attribut-Labeling gekennzeichnet.
Web-Standards und gesetzliche Anforderungen
Hinweis: Sie können mit Visforms Formulare erstellen, die barrierefrei sind und internationalen Standards (WAI, WCAG), europäischen (EAA) und deutschen (BFSG) gesetzlichen Vorgaben genügen.
International
Allgemeine internationale Grundlage sowie Grundlage für internationale, europäische und deutsche gesetzliche Anforderungen der Barrierefreiheit bildet die W3C Web Accessibility Initiative (WAI).
Daraus leitet die Organisation W3C folgende internationalen Standards ab: Web Content Accessibility Guidelines (WCAG).
Die ‘Web Content Accessibility Guidelines (WCAG)’ definieren insgesamt 3 verschiedene Konformitätsstufen A, AA, AAA.
WCAG A
Stufe WCAG A ist die Mindeststufe der Konformität.
Sie umfasst die grundlegendsten Funktionen für die Barrierefreiheit im Web und ist für jede Website, die barrierefrei sein soll, unerlässlich.
Diese Stufe erfordert grundlegende Zugänglichkeits-Merkmale wie Textalternativen für Videos und Bilder sowie die Sicherstellung, dass alle interaktiven Elemente über eine Tastatur zugänglich sind.
Sie garantiert allein noch keine vollständig zugängliche Website, da für bestimmte Nutzer noch Barrieren bestehen können.
WCAG AA
Die Stufe WCAG AA ist in der Regel notwendig, um eine Website rechtlich zugänglich zu machen.
Die Stufe WCAG AA umfasst alle Anforderungen der Stufe A sowie weitere Kriterien, die sich mit allgemeineren Fragen befassen.
Diese Stufe wird von den meisten Organisationen angestrebt, da sie eine bessere Zugänglichkeit und Benutzerfreundlichkeit für ein größeres Publikum gewährleistet.
Hinweis: Die Stufe WCAG 2.1 AA werden von Ländern wie Kanada, Japan, Deutschland, dem Vereinigten Königreich, Australien und Indien als gesetzlicher Standard anerkannt.
Hinweis: Die Stufe WCAG 2.1 AA ist die Mindestkonformitätsstufe für die Einhaltung des BFSG (siehe 'Deutschland').
WCAG AAA
Die Stufe WCAG AAA ist der umfassendste Standard für digitale Barrierefreiheit und das ultimative Ziel, das es anzustreben gilt.
Allerdings ist dies nicht die gesetzlich erforderliche Stufe, da einige Inhalte die AAA-Anforderungen nicht erfüllen können.
Hinweis: Insbesondere die Stufen WCAG 2.1 AA und AAA können mit Visforms umgesetzt werden.
Vorsicht: Visforms hindert Sie aber nicht daran, ein nicht barrierefreies Formular zu erstellen.
Europa
In Europa gilt die EU-Richtlinie 2019/882 des Europäischen Parlaments und des Rates vom 17. April 2019 über die Barrierefreiheitsanforderungen für Produkte und Dienstleistungen, kurz European Accessibility Act (EAA).
Deutschland
In Deutschland gilt ab dem 28. Juni 2025 das neue Barrierefreiheitsstärkungsgesetz (BFSG).
Dieses Bundesgesetz heißt mit vollem Namen Gesetz zur Umsetzung der Richtlinie (EU) 2019/882 des Europäischen Parlaments und des Rates über die Barrierefreiheitsanforderungen.
Dieses Bundesgesetz dient der Umsetzung der europäischen Richtlinie European Accessibility Act (EAA).
Visforms und die “Web Content Accessibility Guidelines (WCAG)”
Hinweis: Mit Visforms lassen sich alle Anforderungen bis einschließlich der höchsten Stufe WCAG AAA erfüllen.
Vorsicht: Ungünstige Konfigurationen in Joomla, dem Template und Visforms können schnell dazu führen, dass ein Formular nicht barrierefrei ist und nicht den Anforderungen durch Standards und rechtliche Vorgaben genügt. Sie müssen die Auswirkungen Ihrer Konfiguration in Bezug auf die Barrierefreiheit verstehen, um Barrierefreiheit zu erreichen.
Vorsicht: Ungünstige Design-Entscheidungen und technische Anforderungen können schnell dazu führen, dass ein Formular nicht barrierefrei ist und nicht den Anforderungen durch Standards und rechtliche Vorgaben genügt. Sie müssen die Auswirkungen Ihrer Entscheidungen in Bezug auf die Barrierefreiheit verstehen, um Barrierefreiheit zu erreichen.
Wichtig zu wissen und zu beachten ist dabei, dass sich auf eine Formular-Komponente nur ein kleiner Teil der Anforderungen durch Standards und Vorgaben beziehen.
In besondere spielt etwa das ausgewählte Template eine grundsätzliche Rolle auf die Barrierefreiheit, etwa die Schriftgröße und die Kontrastverhältnisse.
Von all den vielen Kriterien der Standards und Vorgaben betreffen nur wenige ausschließlich die Visforms Formular-Komponente:
- Navigation über die Tastatur.
- Vorgaben zur Fehleridentifizierung.
- Das technische Attribut-Labeling, das im weitesten Sinne zu ‘Beschriftungen oder Anweisungen’ gehört.
Barrierefreie Formulare erstellen
Auch mit der erklärten Absicht, Formulare so barrierefrei wie möglich zu erstellen, gibt es zahlreiche gegenläufige Design-Entscheidungen und technische Anforderungen. Es passiert leicht, dass sich die Anforderungen an das Formular mit den Anforderungen der Barrierefreiheit nicht vertragen.
Wichtig ist, für das Formular das richtige Maß an Barrierefreiheit umzusetzen. An erster Stelle müssen Sie herausfinden, welches Maß das ist. Das hängt auch wesentlich vom erwarteten Benutzerkreis für das Formular ab.
Im Folgenden finden Sie eine Liste von Features, die nur begrenzt barrierefrei sind und bei denen Sie abwägen müssen, ob und wie sie diese verwenden wollen.
Sie sollten auf die hier beschriebenen Feature verzichten, falls einer der folgenden Fälle zutrifft:
- Sie möchten das Formular vollständig barrierefrei erstellen.
- Sie müssen gesetzliche Vorgaben umsetzen.
Captcha
Ein vom Benutzer zu lösendes Captcha ist bereits per Design dazu gedacht, den Zugang zum Absenden eines Formulars zu erschweren. Diese Erschwernis ist notwendig, um Menschen von Robotern zu unterscheiden.
Wenn in Visforms eines der Captchas aktivieren, sind Ihre Formulare nicht barrierefrei. Neben signifikanten Problemen für Menschen etwa mit Seh-Behinderungen stören Captchas auch viele andere Nutzer.
Captchas sind allgemein kein besonders effektiver Spamschutz. Mit dem Visforms Spamschutz-Plugin in Verbindung mit einem Honeypot Feld bietet Visforms sehr gute, effektive und barrierefreie Alternativen. Es ist daher oft gar nicht nötig, Ihre Formulare durch Anzeige eines Captchas unattraktiv und nicht barrierefrei zu machen.
Hinweis: Tatsächlich sind viele Captchas insbesondere für KI-unterstützte Spam-Bots leichter zu lösen als für Menschen.
Mehr dazu in: Captchas.
Signaturfeld
Beim Feld-Typ Signatur zeichnet der Nutzer mit dem Finger auf einem Touchscreen oder mit der Maus auf dem Desktop seine Unterschrift. Das Zeichnen erfolgt auf dem HTML Canvas Element. Das HTML Canvas Element ist kein elementares Standard-HTML-Element und insbesondere kein Formular-HTML-Control im eigentlichen Sinne.
Die Nutzung des Formular-Feldes sowie der Prozess des Unterschreibens insgesamt recht aufwendig und kompliziert.
Hinweis: Es ist unmöglich, die Nutzung des Signatur-Feldes vollständig barrierefrei zu machen.
Wir haben den Feld-Typ Signatur überarbeitet. Das HTML Canvas Element, auf dem die Signatur gezeichnet wird, kann mit der Tastatur erreicht werden. Das eigentliche Ausfüllen des Signatur-Feldes selbst erfordert aber weiterhin die Verwendung der Maus beim Desktop oder des Fingers beim Touchscreen. Auch das Entsperren und Sperren des Feldes auf einem Touchscreens sowie das Löschen von Signaturen im Editier-Modus des Formulars sind allein mit Nutzung der Tatstatur extrem mühselig.
Versteckte Feld-Label
Formulare mit Feldern ohne Feld-Label anzuzeigen ist recht verbreitet. Diese Formulare scheint recht ansprechend und modern minimalistisch für manche Benutzer-Gruppen zu wirken. Im Hinblick auf die Barrierefreiheit ist diese Design-Entscheidung aus unterschiedlichen Gründen nicht zu empfehlen.
Jeder Benutzer sollte sofort und auf den ersten Blick leicht erkennen, welche Art von Information er in ein Formular-Feld zu schreiben hat. Ein Feld-Label ist mit Abstand der beste Weg genau das anzuzeigen und zu erreichen.
Platzhalter sind keine echte Alternative. Platzhalter sind oft deutlich weniger kontrastreich und deshalb schwerer zu lesen und mindern die Barrierefreiheit. Der Platzhalter verschwindet, sobald die Text-Eingabe startet. Der Benutzer muss ich also genau merken, welche Art von Information in das Feld einzutragen ist.
Hinweis: Wir empfehlen daher grundsätzlich nur sichtbare Feld-Label im Formular zu verwenden.
Accordion
Ein Accordion ist kein Standard-HTML-Element, es ist noch nicht einmal ein HTML-Element. Ein Accordion entsteht allein durch eine Mischung aus speziellem CSS und JavaScript.
Eine Accordion-Implementierung ist eine proprietäre Funktion des verwendeten und zugrundeliegenden UI-Frameworks. Eine Accordion-Implementierung ist also von UI-Framework zu UI-Framework unterschiedlich, etwa für Bootstrap-Layout und UIkit-Layout.
Hinweis: Die Accordion-Implementierung wird durch das verwendete UI-Frameworks gestellt und stammt nicht von Visforms.
Beide von Visforms nativ unterstützten UI-Frameworks Bootstrap 5 und UIkit 3 besitzen eine Accordion-Implementierung mit vollständiger Screen-Reader Unterstützung. Beide UI-Frameworks besitzen aber keine Implementierung für eine Keyboard-Steuerung für das Accordion.
Hinweis: Das Einklappen und Ausklappen der einzelnen Accordion-Reiter ist also nur mit Hilfe der Maus möglich.
Feldtyp-Textarea und Anzeige als Editor
Visforms verwendet den Joomla Default-Editor TinyMCE, wenn für den Feld-Typ Textarea die Anzeige als HTML-Editor aktiviert ist. In diesem Fall werden Warnungen ausgegeben, zumindest im Accessibly-Checker des Web-Browsers Firefox.
Tooltip-Text
Sie können zu jedem Formular-Feld einen Tooltip-Text vergeben, was eine zusätzliche visuelle Hilfe für den Benutzer bedeutet. Der Tooltip-Text liefert in der Regel zusätzliche Informationen, wie das Feld korrekt auszufüllen ist. Der Tooltip-Text wird nur angezeigt, wenn das Formular-Feld den Eingabe-Fokus hat. Erst dann wird der Tooltip-Text angezeigt.
Einerseits, ist der Tooltip-Text eine schöne Möglichkeit um zusätzliche Informationen zur Verfügung zu stellen. Das Formular wird durch Nutzung von Tooltip-Texten insbesondere nicht länger und wirkt insgesamt weniger überfrachtet.
Hinweis: Diese zusätzliche Information der Tooltip-Texte ist unzugänglich für Nutzer, die nicht visuell arbeiten.
Hinweis: Die Implementierung der Tooltip-Texte wird durch das verwendete UI-Frameworks gestellt und stammt nicht von Visforms.
Abhängig vom gewählten UI-Framework Bootstrap 5 oder UIKit 3, sind die Tooltip-Texte unterschiedlich implementiert.
Die Tooltip-Texte von Bootstrap 5 nutzen das aria-describedby-Attribut. Dies kann zu einer Überfrachtung der Informationen insgesamt führen, die mittels aria-Attributen einem Formular-Feld hinzufügt werden.
Read-Only
Es gibt HTML-Control-Typen, für die kein readonly-Attribut vorgesehen ist.
Diese Feld-Typen besitzen keine offizielle HTML-Eigenschaft Read-Only.
Die W3C-Definition listet folgende HTML-Control-Typen oder auch Feld-Typen, die offiziell kein readonly-Attribut haben:
- Listbox,
- Checkbox,
- Radio-Button,
- Checkbox-Gruppe.
Für den Formular-Ersteller ist es manchmal wünschenswert, die Option Read only bei allen Formular-Feldern nutzen zu können.
In Visforms haben wir deswegen auch für diese Feld-Typen den Parameter Read only in der Feld-Konfiguration eingebaut.
Mithilfe von Visforms-eigenem JavaScript erreichen wir, dass auch diese Formular-Felder sich wie Read-Only verhalten können.
Zusätzlich werden durch Visforms soweit möglich auch das aria-readonly-Attribut gesetzt.
In Visforms können diese Feld-Typen wie folgt als Read-Only konfiguriert werden:
Feld-Konfiguration » Reiter Allgemein » Gruppe Anzeige-Einstellungen » Parameter Read only = ‘Ja’.
Bezüglich der Barrierefreiheit entsteht nun ein Problem aufgrund der allgemeinen W3C-Standards, die obige HTML-Control-Typen ausschließen.
So ist es etwa für Screenreader nicht immer ersichtlich, weil unerwartet, dass obige HTML-Control-Typen wie Read-Only funktionieren.
In diesen Fällen ist schwer nachvollziehbar, warum etwa eine Checkbox nicht aktiviert werden kann.
Hinweis: Vermeiden Sie die Feld-Konfiguration für 'Read-Only' bei allen oben gelisteten Feld-Typen.