Verbesserung der Barrierefreiheit der WPForms-Fortschrittsanzeige

Verwenden Sie mehrseitige Formulare und möchten Sie, dass die Fortschrittsanzeige und die Abschnittsüberschriften mehr Barrierefreiheitsprüfungen bestehen? Einige Scanner melden Probleme wie fehlende barrierefreie Namen in der Fortschrittsanzeige und übersprungene Überschriftenebenen innerhalb von Trennfeldern.

In diesem Tutorial zeigen wir Ihnen, wie Sie ein benutzerdefiniertes JavaScript-Snippet hinzufügen können, das:

Fügt ein aria-label zum Fortschrittsbalken
Ändert die Überschriften der Abschnittstrennlinien von h3 zu h2 die Überschriftenhierarchie verbessern

Dieses Beispiel dient als Hilfe für bestimmte Fälle und macht WPForms nicht vollständig WCAG-konform. Das Design Ihrer Website und die allgemeine Barrierefreiheit liegen weiterhin in Ihrer Verantwortung.

Bevor Sie beginnen

Dieses Tutorial ist für mehrseitige Formulare konzipiert, die:

Verwenden Sie die Seitenanzeige im Stil einer Fortschrittsleiste.
Fügen Sie Trennfelder ein, die Überschriften innerhalb des Formulars ausgeben.

Sie benötigen außerdem eine Möglichkeit, benutzerdefiniertes PHP zu Ihrer Website hinzuzufügen, beispielsweise ein website-spezifisches Plugin oder ein Snippet-Plugin.

Wenn Sie Hilfe beim Hinzufügen von benutzerdefiniertem Code benötigen, lesen Sie bitte unsere Anleitung zum Hinzufügen von benutzerdefinierten PHP-Snippets für WPForms.

Hinzufügen des Snippets zur Barrierefreiheit

Um die Verbesserungen der Barrierefreiheit hinzuzufügen, verwenden Sie den folgenden Codeausschnitt. Er fügt ein kleines Skript in die Fußzeile Ihrer Website ein, das die Fortschrittsanzeige und die Überschriften der Abschnittstrenner im Frontend aktualisiert.

Nachdem Sie den Ausschnitt gespeichert haben, öffnen Sie eine Seite, die Ihr mehrseitiges Formular enthält, und überprüfen Sie, ob die Fortschrittsanzeige weiterhin wie erwartet funktioniert.

So funktioniert der Snippet

Die erste Funktion fügt ein aria-label zu jedem Element mit dem wpforms-page-indicator progress Klassen, damit die Fortschrittsanzeige einen zugänglichen Namen hat. Die zweite Funktion findet h3 Überschriften innerhalb von Trennfeldern werden als h2 Elemente mit denselben Attributen und Inhalten und ersetzt die Originale, um die Überschriftenhierarchie zu verbessern.

Anpassen des Snippets

Sie können den Ausschnitt an Ihre Website anpassen.

Ändern Sie den Text der Aria-Beschriftung.

Aktualisieren Sie innerhalb des ersten Skriptblocks diese Zeile:

$(this).attr('aria-label', 'Formularseitenfortschritt');

Ändern Sie den Text in Anführungszeichen in eine Bezeichnung, die für Ihr Formular sinnvoll ist, z. B.:

$(this).attr('aria-label', 'Fortschritt der Abschlussbewerbung');

Dies ist der Text, den Screenreader für den Fortschrittsbalken vorlesen.

Nur ein bestimmtes Formular ansprechen

Standardmäßig sind die Selektoren:

$('.wpforms-page-indicator.progress')
$('.wpforms-field-divider h3')

Gilt für alle WPForms-Fortschrittsbalken und Trennlinien auf Ihrer Website.

Wenn Sie dieses Verhalten auf ein einzelnes Formular beschränken möchten, können Sie die ID des Formulars zum Selektor hinzufügen. Beispiel für die Formular-ID 123:

$('#wpforms-123 .wpforms-page-indicator.progress')
$('#wpforms-123 .wpforms-field-divider h3')

Dadurch bleiben die Änderungen auf dieses Formular beschränkt.

Das war's schon. Jetzt wissen Sie, wie Sie Ihren mehrseitigen Formularen mit einem benutzerdefinierten JavaScript-Snippet eine besser zugängliche Fortschrittsanzeige und Überschriftenstruktur hinzufügen können.

Als Nächstes möchten Sie vielleicht unseren Leitfaden zum Erstellen mehrseitiger Formulare in WPForms lesen, um alle Optionen für die Konfiguration von Seitenumbrüchen und Fortschrittsanzeigen zu sehen.