Verbesserung der Barrierefreiheit der WPForms-Fortschrittsleiste

Verwenden Sie mehrseitige Formulare und möchten Sie, dass die Fortschrittsleiste und die Abschnittsüberschriften mehr Barrierefreiheitsprüfungen bestehen? Einige Scanner melden Probleme wie fehlende zugängliche Namen für die Fortschrittsleiste und übersprungene Überschriftenebenen innerhalb von Trennfeldern.

In diesem Tutorial zeigen wir Ihnen, wie Sie einen benutzerdefinierten JavaScript-Snippet hinzufügen, der:

• Eine aria-label zur Fortschrittsleiste hinzufügt
• Abschnittsüberschriften von h3 zu h2 ändert, um die Hierarchie der Überschriften zu verbessern

Bevor Sie beginnen

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

• Den Seitenindikatorstil Fortschrittsleiste verwenden
• Trennfelder enthalten, die Überschriften innerhalb des Formulars ausgeben

Sie benötigen außerdem eine Möglichkeit, benutzerdefinierten PHP-Code zu Ihrer Website hinzuzufügen, z. B. ein websitespezifisches 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 Barrierefreiheits-Fix-Snippets

Um die Verbesserungen der Barrierefreiheit hinzuzufügen, verwenden Sie den folgenden Code-Snippet. Er gibt ein kleines Skript in Ihre Website-Fußzeile aus, das die Fortschrittsleiste und die Überschriften der Trennfelder im Frontend aktualisiert.

Öffnen Sie nach dem Speichern des Snippets eine Seite, die Ihr mehrseitiges Formular enthält, und überprüfen Sie, ob die Fortschrittsleiste wie erwartet funktioniert.

Wie das Snippet funktioniert

Die erste Funktion fügt jedem Element mit den Klassen wpforms-page-indicator progress ein aria-label hinzu, sodass die Fortschrittsleiste einen zugänglichen Namen hat. Die zweite Funktion findet h3-Überschriften in Trennfeldern, erstellt sie als h2-Elemente mit denselben Attributen und Inhalten neu und ersetzt die Originale, um die Hierarchie der Überschriften zu verbessern.

Anpassen des Snippets

Sie können das Snippet anpassen, um es besser an Ihre Website anzupassen.

Text des Aria-Labels ändern

Aktualisieren Sie in dem ersten Skriptblock diese Zeile:

$(this).attr('aria-label', 'Form Page Progress');

Ändern Sie den Text in Anführungszeichen in eine Bezeichnung, die für Ihr Formular sinnvoll ist, wie zum Beispiel:

$(this).attr('aria-label', 'Graduation application progress');

Dies ist der Text, den Screenreader für die Fortschrittsleiste ansagen.

Nur ein bestimmtes Formular ansprechen

Standardmäßig die Selektoren:

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

gelten für jede WPForms-Fortschrittsleiste und jeden Trenner 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. Zum Beispiel für Formular-ID 123:

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

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

Das war's, jetzt haben Sie gelernt, wie Sie Ihren mehrseitigen Formularen eine zugänglichere Fortschrittsleiste und Überschriftenstruktur mit einem benutzerdefinierten JavaScript-Snippet geben können.

Als Nächstes möchten Sie vielleicht unsere Anleitung zum Erstellen von mehrseitigen Formularen in WPForms lesen, um alle Optionen für die Konfiguration von Seitenumbrüchen und Fortschrittsanzeigen zu sehen.