Ein barrierefreies Kontaktformular zu erstellen, ist gar nicht so schwer. Allerdings bedarf es ein wenig Fleißarbeit. Denn: Selbst wenn man sich dabei von einem Plugin helfen lässt, muss man dessen Ergebnis erst einmal übersetzen. Tragisch ist das alles aber nicht. Wie immer ist es letztlich nur eine Frage des »Gewusst, wie«.
Barrierefreies Kontaktformular: Nicht nur im Sinne der Barrierefreiheit
Wenn man über barrierefreie Kontaktformulare spricht, scheint der einzige Zweck die Barrierefreiheit zu sein. Die ist ganz sicher nicht zu unterschätzen. Auch wenn man nicht verpflichtet ist, die Website und ihre Funktionen barrierefrei zu gestalten, sollte man ein wenig Zeit und Mühe investieren. Denn das oft zitierte Argument »Ich habe doch gar keine blinden Kunden!« wirkt sehr schwach. Menschen mit Behinderung galten schon 2011 als eifrige Internetnutzer. Unter ihnen auch viele Sehbehinderte und Blinde. In den letzten zehn Jahren werden die Zahlen wie in der Gesamtbevölkerung sicherlich stark gestiegen sein.
Das sehen auch die Suchmaschinen so. Barrierefreiheit ist ein Kriterium von vielen, nach denen Google & co Websites bewerten. Natürlich schauen die nicht nur auf das Kontaktformular. Aber sie schauen auch darauf. Denn gerade Kontaktformulare haben so ihre Tücken. Woher soll ein blinder oder stark sehbehinderter Nutzer wissen, welche Beschriftung zu welchem Eingabefeld gehört? Wie soll so jemand ein Captcha lösen, an dem auch Menschen ohne Seheinschränkung regelmäßig scheitern?
Ein barrierefreies Kontaktformular dient also nicht nur der Barrierefreiheit. Es dient jeder Nutzerin. Und damit auch der Suchmaschinenoptimierung.
Hilfestellung durch Contact Form 7 – Accessible Defaults
Ein Kontaktformular lässt sich auch ohne Plugin barrierefrei erstellen. Aber mit dem Plugin Contact Form 7 – Accessible Defaults geht es dann doch schneller und leichter. Abgesehen davon macht der Autor John Dolson mit seinem Plugin klar, worum es bei der Barrierefreiheit genau geht. Denn das ist dem Plugin-Entwickler besonders wichtig. Der Berater in Sachen Barrierefreiheit arbeitet auch für das entsprechende WordPress Team und steht hinter dem Plugin WP Accessibility.
Der Name des Plugins verrät es schon: Es arbeitet mit Contact Form 7 zusammen. Das mag an sich nicht so chic daherkommen wie manch anderes WordPress Plugin für die Erstellung von Kontaktformularen. Dafür ist es für Sehbehinderte viel leichter zu bearbeiten als jene Lösungen, die hier auf graphische Gestaltung setzen. Ich weiß, wovon ich spreche. Ich arbeite nämlich regelmäßig mit einem stark sehbehinderten Kunden zusammen. Und eines von dessen Hauptproblemen ist es, das passende Feld zu der Beschriftung zu finden.
Das gilt nicht nur für Kontaktformulare, sondern für jede Art der Eingabemöglichkeit. So auch bei der WordPress Bearbeitung. Hier vor allem im Rahmen von Plugin-Einstellungen. Optisch ist es natürlich hübscher, wenn da das jeweilige Feld nicht immer direkt hinter oder unter der Beschriftung klebt. Aber mit den üblichen Zweispaltern – links die Beschriftung, erheblich weiter rechts die Felder – tun sich Menschen, die mit extremen Zoomeinstellungen arbeiten, sehr schwer.
Einmal installiert und aktiviert sorgen die Accessible Defaults dafür, dass jedes neu erstellte Contact Form 7 Standardformular bereits die nötige Auszeichnung aufweist.
Auszeichnung für Screen Reader: for und id
Blinde und stark Sehbehinderte benutzen Screen Reader. Also Software, die ihnen vorliest. So zum Beispiel die Inhalte von Webseiten. So ein Vorleser kann aber ohne entsprechende Auszeichnung nicht wissen, welche Beschriftung (label) zu welchem Eingabefeld gehört. Also sagt man es ihm. Dafür erhält jedes Label die zusätzliche Information for=“…“. Deren Wert entspricht dann dem Wert der Information id=“…“, die das Feld erhält.
Contact Form 7 – Accessibe Defaults bietet die passende Lösung. Allerdings ist diese auf Englisch. Die Übersetzung sollte aber nicht allzu schwerfallen. Schließlich sprechen wir hier nur von vier Labels mit den dazugehörenden Feldern: Name, E-Mail, Betreff und Nachricht. Mehr Felder sollte so ein Kontaktformular, das der DSGVO entsprechen soll, sowieso nicht haben.
<p><label for="your-name">Ihr Name (erforderlich)</label><br />
[text* your-name id:your-name] </p>
<p><label for="your-email">Ihre E-Mail-Adresse (erforderlich)</label><br />
[email* your-email id:your-email] </p>
<p><label for="your-subject">Ihr Betreff</label><br />
[text your-subject id:your-subject] </p>
<p><label for="your-message">Ihre Nachricht</label><br />
[textarea your-message id:your-message] </p>
Aus your-name, your-email, your-subject und your-message mache man nun also dein-name oder ihr-name etc. Und zwar für das for-Attribut genauso wie für die jeweilige ID.
Sollten Sie weitere Felder verwenden wollen, zum Beispiel für die Telefonnummer, dann würden Sie auch hier entsprechende for- und id-Werte vergeben.
Schön ist sicherlich auch, die Beschriftung des Sendebuttons noch ein wenig deutlicher zu machen. Dort steht meist nur »Senden«. Ein »Nachricht absenden« ist vielleicht noch ein wenig deutlicher.
<p>[submit "Nachricht absenden"]</p>Meldungen des Kontaktformulars
Wie jedes gute Kontaktformular gibt auch Contact Form 7 eine bestätigende Meldung aus:
Vielen Dank für deine Mitteilung. Sie wurde versandt.
Vielleicht lautet die Meldung auch, dass irgendein Fehler vorliegt und das Formular entsprechend nicht verschickt wurde. Der wesentliche Punkt ist: Ein barrierefreies Kontaktformular soll diese Meldung oberhalb des Formulars ausgeben, nicht darunter. Das mag daran liegen, dass Screen Reader immer von oben nach unten und von links nach rechts lesen. Die Bestätigung sollte also erscheinen, bevor der Reader alle Felder durchlaufen muss.
Für alle Nicht-Sehbehinderten ist die Ausgabe unterhalb des Formulars aber sinnvoll. Weshalb ich dafür plädiere, diesen [response] Shortcode sowohl oberhalb als auch unterhalb des Formulars auszugeben. Doppelt hält ohnehin besser.
Barrierefreies Kontaktformular für Contact Form 7
Im ganzen Satz lautet der Code für so ein barrierefreies Kontaktformular auf Deutsch also wie folgt:
[response]
<p><label for="your-name">Ihr Name (erforderlich)</label><br />
[text* your-name id:your-name]</p>
<p><label for="your-email">Ihre E-Mail-Adresse (erforderlich)</label><br />
[email* your-email id:your-email]</p>
<p><label for="your-subject">Ihr Betreff</label><br />
[text your-subject id:your-subject]</p>
<p><label for="your-message">Ihre Nachricht</label><br />
[textarea your-message id:your-message]</p>
<p>Hinweis auf das Speichern und Verwenden der übermittelten Daten - incl. Verlinkung zur Datenschutzerklärung</p>
<p>[submit "Nachricht absenden"]</p>
[response]Statt Captcha besser Honeypot und Rätsel verwenden!
Dass Captchas alles andere als nutzerfreundlich sind, habe ich schon erwähnt. Für Sehbehinderte sind sie die Pest. Doch Spamschutz muss sein. Was also tun, um Nutzer nicht komplett zu verschrecken und die Website dennoch zu schützen?
Die einfachste Möglichkeit bietet der Honeypot. Der kann zwar nicht jeglichen Spam verhindern, fängt aber zumindest alle schlichten Spamversuche ab. Einmal installiert und aktiviert, sorgt das Plugin Honeypot for Contact Form 7 dafür, dass sich für jedes Kontaktformular ein solcher Honigtopf erstellen lässt. Und da kein menschlicher Nutzer daran kleben bleiben kann, ist es also auch für Nicht-Sehende perfekt geeignet.
Als sehr effektiv hat sich allerdings das Rätsel erwiesen. Dazu braucht es kein Plugin, das bietet Contact Form 7 als Quiz höchstselbst. Wie man das Rätsel einrichtet, hatte ich schon einmal ausführlich gezeigt: Mit dem Contact Form 7 Quiz Spam verhindern. Dass diese Lösung auch für Screen Reader geeignet ist, hatten wir damals schon festgestellt.
Spambots kommen mit meiner Version des Rätsels tatsächlich gar nicht gut parat. Das Spamaufkommen hat sich massiv reduziert, seitdem meine – im Detail vielleicht etwas schräg anmutenden – Rätsel im Einsatz sind.
Barrierefreies Kontaktformular absenden
Bleibt er Sendebutton. Und mit ihm die graphische Gestaltung des ganzen Formulars. Ja, es ist hübscher, wenn nicht alle Felder stumpf untereinander erscheinen, sondern Name und E-Mail vielleicht nebeneinander stehen. Und ja, es ist hübscher, wenn der Sendebutton eine passende Hintergrundfarbe hat. Vielleicht ist es sogar auch hübscher, wenn die Beschriftung nicht ganz so groß ist.
Soll das Kontaktformular aber wirklich barrierefrei sein, sollte auch die Gestaltung den Ansprüchen genügen. Das bedeutet, dass Beschriftung und Felder besser untereinander erscheinen. Und zwar immer schön linksbündig. Was auch für den Sendebutton gilt. Denn ein Sendebutton, den sehbehinderte Nutzer erst lange suchen müssen, ist nicht hilfreich.
Um die Hintergrundfarbe des Sendebuttons tut es mir echt leid. In der Tat müsste ich eigentlich jeglichen Button auf dieser Website anpassen. So also auch jene, die dem Weiterlesen dienen. Denn das habe ich in der Zwischenzeit gelernt: Wer starke Kontraste braucht und das Internet entsprechend »weiß auf schwarz« nutzt, kann mit weißer Schrift auf farbigem Grund nichts anfangen.
Wesentlicher leichter fällt es da doch, auch für die Kontaktformulare die Standard-Schriftgröße von 16 Pixel zu benutzen. Denn auch hier sind wir wieder im Bereich der Suchmaschinenoptimierung. Taucht auf der Website Schrift auf, die wesentlich kleiner ist, hagelt es Mahnungen von Googles Search Console.
Für die Gestaltung des Contact Form 7 Kontaktformulars ist jedenfalls das Theme zuständig. Das heißt, dass Sie Änderungen im Rahmen des Customizers update-sicher vornehmen können.
Beitragsbild: Britta Kretschmer
Schreibe einen Kommentar