Zum Hauptinhalt springen

Barrierefreiheit im Web

So machst du deinen Flow für alle zugänglich

Vor über 3 Wochen aktualisiert

Barrierefreiheit sorgt dafür, dass alle Menschen – unabhängig von ihren Fähigkeiten – mit deinen Inhalten interagieren können. Es geht darum, digitale Erlebnisse zu gestalten, die inklusiv und für alle nutzbar sind – auch für Menschen, die auf Screenreader, Tastaturnavigation oder andere unterstützende Technologien angewiesen sind.

Mit dem Inkrafttreten des European Accessibility Act (EAA) bzw. Barrierefreiheitsstärkungsgesetz (BFSG) am 28. Juni 2025 ist Barrierefreiheit nicht mehr nur eine Best Practice – für viele Unternehmen in der EU wird sie zur gesetzlichen Pflicht. Unabhängig von rechtlichen Anforderungen verbessert ein barrierefreies Design jedoch die Benutzerfreundlichkeit für alle, erweitert deine Zielgruppe und unterstreicht dein Engagement für Inklusion.

Dieser Artikel stellt zentrale Prinzipien der Barrierefreiheit sowie praktische Tipps vor, um deine Flows benutzerfreundlich und regelkonform zu gestalten. Der Fokus liegt auf dem EAA, aber die Empfehlungen orientieren sich auch an internationalen Standards wie den Web Content Accessibility Guidelines (WCAG) und dem Americans with Disabilities Act (ADA).

Hinweis: Dieser Artikel dient nur zu Informationszwecken und stellt keine Rechtsberatung dar. Heyflow ist kein juristischer Berater. Du bist selbst dafür verantwortlich, sicherzustellen, dass deine Flows den geltenden Barrierefreiheitsanforderungen entsprechen. Die folgenden Themen sind eine Auswahl und keine vollständige Liste aller Anforderungen.


Was Heyflow übernimmt

Viele technische Aspekte der Barrierefreiheit werden von uns im Hintergrund automatisch berücksichtigt:

Tastaturnavigation

Die meisten Blöcke unterstützen die Bedienung per Tastatur (z. B. Buttons und Formularfelder).

💡 Bald verfügbar: Verbesserte Navigation für Blöcke wie „Telefon“, „Multiple Choice“ und „Bildauswahl“.

Barrierefreier HTML-Code

Deine Seiten enthalten notwendige HTML-Elemente wie

  • <title> und

  • <html lang="">.

Hinweis: Wenn du benutzerdefinierten Code in deinem Flow verwendest, können wir die Barrierefreiheit nicht garantieren – bitte teste gründlich.


Was in deiner Verantwortung liegt

Wir sorgen für die technische Grundlage – du gestaltest Inhalte und Layout. Diese haben großen Einfluss auf die Barrierefreiheit. Hier findest du einige Beispiele, wie du die Barrierefreiheit verbessern kannst:

Beschriftungen

  • Alle Formularfelder müssen klar und eindeutig beschriftet sein.

  • Beschriftungen helfen allen Nutzern – besonders denen, die Screenreader verwenden – die abgefragten Informationen zu verstehen.

  • Füge die Beschriftungen direkt im Label des Eingabeblocks in Heyflow hinzu.

💡 Bald verfügbar: Unterstützung für Rich Text-Beschriftungen und Option zum Ausblenden von Labels.

Nicht-textliche Inhalte

  • Alle nicht-textlichen Inhalte wie Bilder benötigen aussagekräftige Alternativtexte (Alt-Texte).

  • Alt-Texte helfen Screenreader-Nutzern, den Zweck oder Inhalt eines Bildes zu verstehen.

  • In Heyflow kannst du diesen Text im Feld „Alt-Text“ für jedes Bild hinterlegen.

  • Unsere Icons haben bereits automatisch ein Alt-Text inkludiert.

Farben und Kontraste

  • Text muss ausreichend Kontrast zum Hintergrund haben.

  • Verwende Tools wie den Coolors Contrast Checker, um dein Design zu überprüfen.

Schriftarten und Überschriften

  • Nutze gut lesbare Schriftgrößen – vermeide sehr kleine Texte.

  • Pro Seite sollte nur eine <h1>-Überschrift verwendet werden.

💡 Wenn du deinen Flow in eine Webseite mit bestehender <h1> einbindest, entferne sie aus dem Flow, um doppelte Elemente zu vermeiden.


Tools zur Barrierefreiheitsprüfung

Diese kostenlosen Tools helfen dir, die Barrierefreiheit deines Flows zu überprüfen:

Hat dies deine Frage beantwortet?