### [Verbesserung der Barrierefreiheit der WPForms-Fortschrittsleiste](https://wpforms.com/developers/improving-the-accessibility-of-the-wpforms-progress-bar/) **Veröffentlicht:** 11. Dezember 2025 **Autor:** Umair Majeed **Auszug:** Erfahren Sie, wie Sie die Barrierefreiheit von WPForms-Mehrseitenformularen verbessern können. **Inhalt:** Verwenden Sie Mehrseitenformulare und möchten, 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 in 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` auf `h2` ändert, um die Überschriftenhierarchie zu verbessern Dieses Beispiel ist als Hilfe für bestimmte Fälle gedacht und macht WPForms nicht vollständig WCAG-konform. Ihr Website-Design und Ihre allgemeine Barrierefreiheit liegen weiterhin in Ihrer Verantwortung. --- ## Bevor Sie beginnen Dieses Tutorial richtet sich an Mehrseitenformulare, die: - Den Seitenindikatorstil **Fortschrittsleiste** verwenden - **Trennfelder** enthalten, die Überschriften innerhalb des Formulars ausgeben Sie benötigen außerdem eine Möglichkeit, benutzerdefiniertes PHP 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- oder JavaScript-Snippets für WPForms](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-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 Abschnittstrenner im Frontend aktualisiert. Nachdem Sie den Snippet gespeichert haben, öffnen Sie eine Seite, die Ihr Mehrseitenformular enthält, und überprüfen Sie, ob die Fortschrittsleiste wie erwartet funktioniert. ## Funktionsweise des Snippets Die erste Funktion fügt jedem Element mit den Klassen `wpforms-page-indicator progress` eine `aria-label` hinzu, damit die Fortschrittsleiste einen zugänglichen Namen hat. Die zweite Funktion findet `h3`-Überschriften in Trennfeldern, erstellt sie als `h2`-Elemente mit denselben Attributen und demselben Inhalt neu und ersetzt die Originale, um die Überschriftenhierarchie zu verbessern. ## Anpassen des Snippets Sie können den Snippet anpassen, um ihn besser an Ihre Website anzupassen. ### Ändern des aria-label-Textes Aktualisieren Sie in der 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, z. B.: ``` $(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 gelten die Selektoren: ``` $('.wpforms-page-indicator.progress') $('.wpforms-field-divider h3') ``` 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 ist alles, jetzt haben Sie gelernt, wie Sie Ihren Mehrseitenformularen eine zugänglichere Fortschrittsleiste und Überschriftenstruktur mit einem benutzerdefinierten JavaScript-Snippet geben können. Als Nächstes sollten Sie vielleicht unsere Anleitung zum [Erstellen von Mehrseitenformularen in WPForms](https://wpforms.com/docs/how-to-create-multi-page-forms-in-wpforms) lesen, um alle Optionen für die Konfiguration von Seitenumbrüchen und Fortschrittsanzeigen zu sehen. **Kategorien:** Felder, Styling, Erweitern ---