Barrierefreies Kontaktformulat mit Contact Form 7

  • Das Plugin an sich bringt schon gute Vorraussetzungen mit was Zugänglichkeit betrifft, dennoch bekomme ich einige Sachen nicht wirklich hin. Hier erstmal der jetzige Code des Formulars:

    In der jetzigen Form schickt das Formular sofort bei Betätigung der Enter-Taste den Inhalt ab, egal in welchem Feld man sich befindet. Das ist so nicht gut. Auf 'Enter' sollte das Formular aber erst mit Fokus auf Senden-Button reagieren. Wie geht sowas?

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Puh, keine Ahnung wonach das ruft. ;) Bin neu in der Materie.

    Ist es nicht möglich, auf der bestehenden Grundlage einfach folgendes vorzuschreiben?

    Feld Name -> Enter-Taste ohne Funktion / keinesfalls soll hier das Absenden ausgelöst werden
    Feld E-Mail -> Enter-Taste ohne Funktion / keinesfalls soll hier das Absenden ausgelöst werden
    Feld Betreff -> Enter-Taste ohne Funktion / keinesfalls soll hier das Absenden ausgelöst werden
    Feld Mitteilung -> Enter-Taste mit Standart-Funktion 'Zeilenumbruch' / keinesfalls soll hier das Absenden ausgelöst werden
    Button 'Senden' -> Enter-Taste soll nur hier das Absenden auslösen

    Javascript und jQuery sind nicht mein Gebiet. Komplett neu möchte ich das Kontaktformular nicht angehen, da ich es zumindest schonmal soweit hinbekommen habe, dass für Screenreader-Nutzer ein verwertbares Feedback kommt (wo auch gleich nach Absenden der Fokus drauf liegt), ob das Senden funktioniert hat oder halt nicht.

    Noch jemand mit einer Idee/Lösung?

  • Ich habe die Lösung nicht in der Schublade. Aber ich denke vom Prinzip her kann man da ein jquery-script bemühen, so in die Richtung:

    $(document).on('submit.wpcf7', function () {
    irgendwelche checks
    }

    Jetzt brauchst du nur noch jemanden, der es
    1. besser weiß
    2. freiwillig macht

  • Wäre mit neu, dass das nicht barrierefrei wäre ?

    DAS ist ja ok und auch barrierefrei, das funktioniert.
    Problematisch wird es, wenn ein z.B. blinder Nutzer die Enter-Taste betätigt, sich jedoch noch nicht auf dem Sende-Button befindet (in diesem Fall wird nämlich einfach 'submit' ausgelöst). Im Bereich Mitteilung (textarea) passt es, weil Enter einen gewollten Zeilenumbruch auslöst. Jedoch bei Name, Mailadresse und Betreff löst es eben 'submit' aus und das ist dann eben nicht barrierefrei, da der Nutzer mit diesem Verhalten nicht rechnet und auch nicht rechnen muss.

    Einmal editiert, zuletzt von badhotrod (27. August 2015 um 07:31)

  • Wie meinst Du das SuMu? Ein zusätzlicher E-Mail-Link als Kontaktmöglichkeit? Das ist durchaus eine alternative Option, die man anbieten kann, behebt jedoch das suboptimale Verhalten des Kontaktformulars leider nicht...

  • Wie meinst Du das SuMu? Ein zusätzlicher E-Mail-Link als Kontaktmöglichkeit? Das ist durchaus eine alternative Option, die man anbieten kann, behebt jedoch das suboptimale Verhalten des Kontaktformulars leider nicht...

    Ja, das meinte ich, eine zweite Lösung mit einem einfachen herkömmlichen Email-Link. Es könnte ja sein, dass du dein Problem nicht gelöst bekommst.

  • DAS ist ja ok und auch barrierefrei, das funktioniert.
    Problematisch wird es, wenn ein z.B. blinder Nutzer die Enter-Taste betätigt, sich jedoch noch nicht auf dem Sende-Button befindet (in diesem Fall wird nämlich einfach 'submit' ausgelöst). Im Bereich Mitteilung (textarea) passt es, weil Enter einen gewollten Zeilenumbruch auslöst. Jedoch bei Name, Mailadresse und Betreff löst es eben 'submit' aus und das ist dann eben nicht barrierefrei, da der Nutzer mit diesem Verhalten nicht rechnet und auch nicht rechnen muss.

    woher weißt du, dass Menschen mit Seheinschränkungen die Enter Taste klicken, wenn sie sich in einem Formular befinden?

    ich habe jahrelang mit seheingeschränkten Menschen getestet, die klickten die Entertaste erst bei Submit, wenn sie wissen, dass sie dort sind...

  • (...)
    In der jetzigen Form schickt das Formular sofort bei Betätigung der Enter-Taste den Inhalt ab, egal in welchem Feld man sich befindet. Das ist so nicht gut. Auf 'Enter' sollte das Formular aber erst mit Fokus auf Senden-Button reagieren. Wie geht sowas?

    Ganz pragmatisch ohne Eingriff in den Quellcode indem Du einfach mit den Mitteln von Contact Form 7 eine Acceptance-Checkbox vor den Absendebutton setzt, die erst angehakt werden muss, bevor das ausgefüllte Formular abgesendet werden kann.

  • Erstmal danke an alle, die sich hier Gedanken machen zur Problematik!

    Hallo Monika, ich weiß das, weil ich gerade mit einer Testgruppe aus blinden und sehbehinderten Mitgliedern unseres Vereins (Blindenverband) die neue Webseite checke. Und da trat genau dieses Problem auf.

    Natürlich navigieren fast alle mit TAB in Formularen, das ist den meisten bekannt. Mir geht es darum, dass das (möglicherweise auch ausversehen passierte) betätigen der Enter-Taste das Formular einfach an 'Senden' übergibt. Und das ist eben nicht optimal, weshalb ich eine Lösung suche.

    Tubedesigner: Kannst Du das näher erläutern, wie ich das einbaue? Würd ich gern mal testen. Allerdings vermute ich, gibt es im Falle, dass der Haken nicht gesetzt ist und man in Feld 1-3 Enter drückt, auch nur die bekannte Fehlermeldung. Die Acceptance-Checkbox wird doch sicherlich wie ein ganz normales Pflichtfeld verarbeitet?!

    Einmal editiert, zuletzt von badhotrod (27. August 2015 um 11:24)

  • (...)
    Kannst Du das näher erläutern, wie ich das einbaue? Würd ich gern mal testen. (...)

    Den dafür notwendigen Tag kannst Du Dir über den entsprechenden Button im Backend von Contact Form 7 selbst generieren, das könnte dann z.B. so aussehen

    Code
    [acceptance acceptance-999] Alles ausgefüllt? Dann bitte anhaken und Formular absenden.
    (Hinweis: Diese Checkbox dient dazu ein versehentlichen Absenden zu verhindern.)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!