Barrierefreiheit in Journeys

Seit Juni 2025 verpflichtet das Barrierefreiheitsstärkungsgesetz (BFSG) viele Unternehmen, ihre digitalen Angebote barrierefrei zu gestalten. Für Stadtwerke und Energieversorger betrifft das zum Beispiel Online-Anmeldungen und Tarifrechner.

Dieser Artikel zeigt dir, was epilot dafür in Journeys schon mitbringt und was du selbst beachten musst.

Hinweis

Dieser Artikel ist keine Rechtsberatung. Ob und wie das BFSG für dein Unternehmen gilt, klärst du am besten mit deiner Rechtsabteilung.

So funktioniert's

Die Journey-Blöcke erfüllen die Anforderungen der WCAG 2.2 Stufe AA. Dazu gehören Tastaturbedienung, Unterstützung von Screenreadern und gut sichtbare Fokus-Zustände. Für drei Dinge bist du selbst verantwortlich:

Farbkontraste: Text muss sich deutlich vom Hintergrund abheben. Der Design Builder prüft das für dich.
Bilder: Informative Bilder brauchen eine Beschreibung für Screenreader.
Texte: Klare Überschriften, verständliche Beschriftungen und Fehlermeldungen, die sagen, was zu tun ist.

Konfiguration

Kontrast beim Bearbeiten prüfen

1. Öffne dein Design unter Konfiguration > Designs.

2. Ändere eine Farbe, zum Beispiel unter Typografie die Primäre Schriftfarbe. Ist der Kontrast zu gering, erscheint direkt am Feld ein roter Hinweis, zum Beispiel Niedriger Kontrast zu Hintergrundfarbe (2.25:1).

3. Wähle eine dunklere oder hellere Farbe, bis der Hinweis verschwindet. Für normalen Text braucht es ein Verhältnis von mindestens 4,5:1.

Kontrast beim Speichern prüfen

4. Klicke auf Speichern. Gibt es noch Farben mit zu wenig Kontrast, öffnet sich Diese Farben haben zu wenig Kontrast mit allen betroffenen Kombinationen und ihrem Verhältnis.

5. Wähle, wie du weitermachst:

Farben überprüfen: zurück zum Design, um die Farben selbst anzupassen.
Automatisch beheben: epilot passt die betroffenen Farben so an, dass der Kontrast reicht.
Trotzdem speichern: das Design wird unverändert gespeichert.

Tipp

Nutze Automatisch beheben, wenn deine Markenfarbe knapp zu hell ist. Prüfe danach in der Vorschau, ob das Ergebnis noch zu deiner Marke passt.

Bilder barrierefrei einstellen

6. Öffne im Journey Builder den Block Bild und wähle unter Einstellungen zur Barrierefreiheit, ob das Bild dekorativ oder informativ ist. Informative Bilder bekommen eine kurze Beschreibung. Details findest du im Artikel Bild.

Texte prüfen

7. Gib jedem Schritt eine eindeutige Überschrift und jedem Feld eine sichtbare Beschriftung, nicht nur einen Platzhalter.

8. Teste die Journey einmal nur mit der Tastatur: Mit Tab springst du von Feld zu Feld, mit Enter und Leertaste wählst du aus.

Wichtig

Custom CSS kann die Barrierefreiheit verschlechtern, zum Beispiel wenn du Fokus-Rahmen entfernst oder Schrift sehr klein machst. Prüfe Journeys mit Custom CSS deshalb besonders gründlich.

Häufige Fragen

Kann ich ein Design mit zu wenig Kontrast speichern?

Ja, über Trotzdem speichern. Für eine barrierefreie Journey solltest du die Farben aber anpassen.

Ist meine Journey automatisch BFSG-konform?

Die Blöcke erfüllen WCAG 2.2 AA. Farben, Bilder und Texte liegen aber in deiner Hand. Erst wenn auch diese passen, ist die Journey barrierefrei.

Gilt die Kontrastprüfung auch für Custom CSS?

Nein. Sie prüft nur die Farben aus den Design-Einstellungen.