Barrierefreiheit mit Webflow: Anforderungen und Umsetzung

Digitale Barrierefreiheit bedeutet, Websites so zu gestalten und zu entwickeln, dass sie von möglichst vielen Menschen wahrgenommen, verstanden und bedient werden können.

Dazu gehören beispielsweise Menschen mit Seh-, Hör- oder motorischen Einschränkungen. Barrierearme Websites helfen aber auch Personen mit vorübergehenden Einschränkungen, älteren Menschen sowie Nutzern, die mit kleinen Bildschirmen, schlechter Beleuchtung oder ohne Maus arbeiten.

Webflow bietet zahlreiche technische Möglichkeiten, um eine zugängliche Website umzusetzen. Das verwendete System allein macht eine Website jedoch nicht barrierefrei. Entscheidend sind Struktur, Design, Inhalte, Entwicklung und regelmäßige Tests.

In diesem Beitrag erfährst du, welche Bereiche besonders wichtig sind, welche Rolle die WCAG spielen und worauf bei der Umsetzung mit Webflow geachtet werden sollte.

Was bedeutet digitale Barrierefreiheit?

Eine barrierefreie oder möglichst barrierearme Website soll so aufgebaut sein, dass zentrale Inhalte und Funktionen nicht nur unter idealen Bedingungen genutzt werden können.

Besucher sollten beispielsweise:

• Inhalte mit einer Tastatur bedienen können
• Texte ausreichend vergrößern können
• verständliche Überschriften und Linktexte vorfinden
• Formulare ohne unnötige Hürden ausfüllen können
• Inhalte mit assistiven Technologien erfassen können
• Videos und Audiodateien über geeignete Alternativen verstehen können
• Informationen nicht ausschließlich über Farbe unterscheiden müssen
• erkennen können, wo sich der Tastaturfokus befindet

Barrierefreiheit ist daher keine einzelne Funktion und kein Plugin. Sie betrifft nahezu alle Bereiche einer Website.

Was sind die WCAG?

Die Web Content Accessibility Guidelines, kurz WCAG, sind international etablierte Richtlinien für zugängliche Webinhalte.

Sie gliedern Barrierefreiheit in vier Grundprinzipien:

Wahrnehmbar

Informationen müssen so angeboten werden, dass Nutzer sie wahrnehmen können.

Dazu gehören beispielsweise:

• Textalternativen für informative Bilder
• ausreichende Farbkontraste
• Untertitel für relevante Videoinhalte
• skalierbare Texte
• Inhalte, die nicht ausschließlich über Farbe vermittelt werden

Bedienbar

Alle wesentlichen Funktionen müssen bedient werden können.

Dazu gehören:

• vollständige Tastaturbedienung
• sichtbarer Tastaturfokus
• ausreichend große Bedienelemente
• keine vermeidbaren Tastaturfallen
• verständliche Navigation
• angemessene Kontrolle über bewegte Inhalte

Verständlich

Inhalte und Bedienung sollten nachvollziehbar sein.

Dazu gehören:

• verständliche Sprache
• konsistente Navigation
• klare Beschriftungen
• hilfreiche Fehlermeldungen
• vorhersehbares Verhalten von Formularen und Elementen

Robust

Die Website sollte so umgesetzt sein, dass unterschiedliche Browser und assistive Technologien ihre Struktur zuverlässig interpretieren können.

Dazu gehören:

• semantisches HTML
• korrekte Beschriftungen
• nachvollziehbare Zustände
• sinnvoll eingesetzte ARIA-Attribute
• technisch valide Komponenten

Die WCAG werden in verschiedene Konformitätsstufen eingeteilt. Für viele professionelle und rechtliche Anwendungsfälle ist insbesondere Stufe AA relevant. Welche konkrete Norm oder gesetzliche Anforderung für ein Unternehmen gilt, sollte jedoch im jeweiligen Einzelfall fachlich oder rechtlich geprüft werden.

Ist jede Unternehmenswebsite in Österreich gesetzlich zur Barrierefreiheit verpflichtet?

Nein. Das österreichische Barrierefreiheitsgesetz gilt nicht automatisch für jede Website und jedes Unternehmen.

Es ist seit dem 28. Juni 2025 anwendbar und erfasst bestimmte Produkte und Dienstleistungen. Im digitalen Bereich können darunter insbesondere bestimmte Dienstleistungen im elektronischen Geschäftsverkehr, Bankdienstleistungen, E-Books, elektronische Kommunikation sowie bestimmte Personenverkehrsdienste fallen.

Eine Website kann beispielsweise relevant sein, wenn Verbraucher darüber einen Vertrag abschließen, eine kostenpflichtige Dienstleistung buchen oder einen Kauf durchführen können.

Ob ein konkretes Angebot unter das Gesetz fällt, hängt unter anderem ab von:

• Art der angebotenen Produkte oder Dienstleistungen
• Rolle der Website beim Vertragsabschluss
• Zielgruppe des Angebots
• Unternehmensgröße
• möglichen gesetzlichen Ausnahmen
• konkreter technischer und wirtschaftlicher Ausgestaltung

Kleinstunternehmen können bei Dienstleistungen unter bestimmten Voraussetzungen von Anforderungen des Barrierefreiheitsgesetzes ausgenommen sein. Das bedeutet jedoch nicht automatisch, dass jede kleine Website ausgenommen ist oder Barrierefreiheit keine Rolle spielt.

Dieser Beitrag stellt keine Rechtsberatung dar. Unternehmen sollten ihre konkrete Verpflichtung bei Unsicherheit rechtlich oder durch eine spezialisierte Fachstelle prüfen lassen.

Warum ist Barrierefreiheit auch ohne unmittelbare Verpflichtung sinnvoll?

Eine zugänglichere Website kann grundsätzlich mehr Menschen die Nutzung erleichtern.

Viele Maßnahmen verbessern gleichzeitig die allgemeine Nutzerfreundlichkeit:

• gut lesbare Texte
• klare Navigation
• erkennbare Buttons
• verständliche Formulare
• aussagekräftige Überschriften
• strukturierte Inhalte
• ausreichende Kontraste
• Bedienbarkeit ohne Maus
• reduzierte visuelle Überforderung

Barrierefreiheit sollte deshalb nicht nur als rechtliche Checkliste betrachtet werden.

Sie kann Teil einer qualitativ hochwertigen Website sein, die unterschiedliche Nutzungssituationen berücksichtigt.

Kann Webflow barrierefreie Websites erstellen?

Webflow kann als technische Grundlage für zugängliche Websites verwendet werden.

Mit Webflow lassen sich unter anderem umsetzen:

• semantische HTML-Elemente
• strukturierte Überschriften
• Alt-Texte
• Formularbeschriftungen
• Tastaturfokus
• responsive Layouts
• individuelle Farbkontraste
• Skip-Links
• ARIA-Attribute
• reduzierte Bewegungen
• verständliche Navigationsstrukturen
• zugängliche CMS-Inhalte

Webflow garantiert diese Eigenschaften jedoch nicht automatisch.

Es ist beispielsweise weiterhin möglich:

• eine unlogische Überschriftenstruktur zu erstellen
• Links ohne verständlichen Text einzusetzen
• zu geringe Kontraste zu verwenden
• Tastaturfokus auszublenden
• ungeeignete ARIA-Attribute einzufügen
• Formulare unzureichend zu beschriften
• wichtige Informationen ausschließlich durch Animationen zu vermitteln

Die Plattform stellt Werkzeuge bereit. Die Qualität hängt davon ab, wie sie eingesetzt werden.

1. Semantische Seitenstruktur

Eine zugängliche Website benötigt eine nachvollziehbare inhaltliche und technische Struktur.

Wichtige Bereiche sollten mit passenden HTML-Elementen ausgezeichnet werden:

• Header
• Navigation
• Hauptinhalt
• Abschnitte
• Artikel
• ergänzende Inhalte
• Footer

In Webflow lässt sich für viele Elemente ein semantisches HTML-Tag auswählen.

Der zentrale Seiteninhalt sollte beispielsweise innerhalb eines main-Elements liegen. Die Hauptnavigation gehört in ein nav-Element. Eigenständige Inhaltsbereiche können als section oder article ausgezeichnet werden.

Nicht jedes visuelle Element benötigt ein besonderes semantisches Tag. Entscheidend ist eine Struktur, die den tatsächlichen Zweck des Inhalts widerspiegelt.

2. Sinnvolle Überschriftenhierarchie

Überschriften helfen Nutzern und assistiven Technologien, Inhalte zu erfassen und zu überblicken.

Eine Seite sollte normalerweise eine klare Hauptüberschrift besitzen. Weitere Überschriften strukturieren die untergeordneten Abschnitte.

Eine sinnvolle Hierarchie kann beispielsweise so aussehen:

• H1: Hauptthema der Seite
• H2: zentrale Themenbereiche
• H3: Unterpunkte innerhalb eines H2-Bereichs
• H4: weitere Untergliederung, falls tatsächlich notwendig

Überschriften sollten nicht allein nach ihrer gewünschten Schriftgröße ausgewählt werden.

Das visuelle Erscheinungsbild wird über CSS gestaltet. Die Überschriftenebene beschreibt die inhaltliche Struktur.

3. Aussagekräftige Link- und Buttontexte

Linktexte wie „hier“, „mehr“ oder „weiterlesen“ sind ohne Kontext wenig verständlich.

Besser sind konkrete Formulierungen:

• Leistungen für Webflow-Websites ansehen
• Website-Projekt besprechen
• vollständige Fallstudie lesen
• Informationen zur Barrierefreiheit öffnen

Besucher sollten möglichst erkennen können, wohin ein Link führt oder welche Aktion ein Button auslöst.

Auch Icons benötigen eine verständliche zugängliche Bezeichnung, wenn ihre Funktion nicht zusätzlich als sichtbarer Text ausgegeben wird.

4. Bedienbarkeit mit der Tastatur

Wichtige Inhalte und Funktionen sollten ohne Maus erreichbar sein.

Prüfe insbesondere:

• Navigation
• Dropdown-Menüs
• Buttons
• Links
• Formulare
• Akkordeons
• Tabs
• Modale Fenster
• Slider
• Cookie-Einstellungen

Beim Testen sollte erkennbar sein, welches Element gerade fokussiert ist.

Ein unsichtbarer oder kaum wahrnehmbarer Fokus erschwert die Bedienung erheblich. Der Standardfokus sollte deshalb nicht entfernt werden, ohne ihn durch eine gut sichtbare Alternative zu ersetzen.

5. Skip-Link zum Hauptinhalt

Ein Skip-Link ermöglicht es Tastaturnutzern, wiederkehrende Navigationselemente zu überspringen und direkt zum Hauptinhalt zu gelangen.

Der Link kann beim ersten Drücken der Tabulatortaste sichtbar werden und auf das main-Element der Seite verweisen.

Beispieltext:

„Direkt zum Hauptinhalt“

Ein Skip-Link ist besonders auf Seiten hilfreich, deren Navigation viele Links enthält.

6. Farbkontraste und Lesbarkeit

Texte und wichtige Bedienelemente müssen sich ausreichend vom Hintergrund abheben.

Besonders problematisch sind häufig:

• hellgrauer Text auf weißem Hintergrund
• Text über unruhigen Bildern
• farbige Links, die sich kaum vom normalen Text unterscheiden
• dünne Schrift in kleinen Größen
• Buttons mit zu geringem Kontrast
• Platzhaltertexte als einzige Formularbeschriftung

Neben den Farben spielen auch Schriftgröße, Zeilenhöhe, Zeilenlänge und Abstände eine wichtige Rolle.

Kontraste sollten nicht nur nach persönlichem Eindruck beurteilt, sondern mit geeigneten Prüfwerkzeugen gemessen werden.

7. Informationen nicht nur über Farbe vermitteln

Farbe allein sollte nicht die einzige Möglichkeit sein, einen Zustand oder eine Bedeutung zu erkennen.

Beispielsweise sollte ein fehlerhaftes Formularfeld nicht nur rot markiert werden.

Zusätzlich sinnvoll sind:

• eine verständliche Fehlermeldung
• ein Symbol
• eine eindeutige textliche Erklärung
• eine korrekte technische Zuordnung zum Eingabefeld

Dasselbe gilt für Diagramme, Statusanzeigen und ausgewählte Navigationselemente.

8. Alt-Texte für Bilder

Informative Bilder benötigen einen passenden Alternativtext.

Der Alt-Text sollte die Funktion oder relevante Aussage des Bildes vermitteln.

Beispiel:

„Startseite einer Unternehmenswebsite für einen Installationsbetrieb“

Nicht hilfreich:

„Bild“

Ebenfalls meistens ungeeignet:

„webdesign webflow barrierefreie website niederösterreich agentur“

Der Alt-Text ist kein Platz für eine Aneinanderreihung von Keywords.

Rein dekorative Bilder sollten einen leeren Alt-Text erhalten, damit sie von Screenreadern übersprungen werden können.

9. Zugängliche Formulare

Formulare gehören zu den wichtigsten Conversion-Elementen einer Unternehmenswebsite.

Jedes relevante Feld sollte eine verständliche sichtbare Beschriftung besitzen.

Ein Platzhalter allein reicht häufig nicht aus, weil er beim Tippen verschwindet und teilweise einen zu geringen Kontrast besitzt.

Zusätzlich wichtig sind:

• klar erkennbare Pflichtfelder
• verständliche Fehlermeldungen
• korrekte Feldtypen
• logische Tab-Reihenfolge
• ausreichend große Eingabeflächen
• nachvollziehbare Datenschutzhinweise
• sichtbare Bestätigung nach dem Absenden

Fehler sollten möglichst direkt beim betroffenen Feld erklärt werden.

Statt:

„Fehler beim Absenden“

ist beispielsweise hilfreicher:

„Bitte gib eine gültige E-Mail-Adresse ein.“

10. Navigation und mobile Menüs

Eine Navigation muss nicht nur mit der Maus funktionieren.

Prüfe:

• Kann das Menü über die Tastatur geöffnet werden?
• Ist der aktuelle Fokus sichtbar?
• Kann das Menü wieder geschlossen werden?
• Ist die Reihenfolge der Elemente logisch?
• Bleibt der Fokus nicht unbemerkt hinter einem geöffneten Menü?
• Sind Untermenüs verständlich benannt?
• Funktioniert die Bedienung auf kleinen Bildschirmen?

Komplexe Mega-Menüs oder mehrstufige Dropdowns benötigen besonders sorgfältige Tests.

Eine visuell elegante Navigation ist nicht automatisch eine gut bedienbare Navigation.

11. Animationen und Bewegung

Animationen können Inhalte unterstützen, aber auch Barrieren erzeugen.

Problematisch können sein:

• automatisch startende Bewegung
• dauerhaft animierte Hintergründe
• starke Parallax-Effekte
• blinkende Elemente
• Inhalte, die nur durch Animation sichtbar werden
• Animationen, die den Tastaturfokus beeinflussen
• schnelle oder überraschende Bewegungen

Nutzer, die in ihrem Betriebssystem reduzierte Bewegung eingestellt haben, sollten nach Möglichkeit eine ruhigere Darstellung erhalten.

In Webflow kann dies je nach Aufbau über eigenes CSS oder angepasste Interaktionslogik berücksichtigt werden.

Wichtige Inhalte sollten auch dann verfügbar bleiben, wenn Animationen nicht ausgeführt werden.

12. Videos und Audioinhalte

Videos mit gesprochenen Inhalten sollten geeignete Alternativen anbieten.

Je nach Inhalt können dazu gehören:

• Untertitel
• Transkript
• Audiodeskription
• verständliche Beschreibung
• bedienbarer Player
• Möglichkeit zum Pausieren

Automatisch startende Videos mit Ton sollten vermieden werden.

Auch rein visuelle Informationen innerhalb eines Videos benötigen eine geeignete textliche oder akustische Alternative, wenn sie zum Verständnis wesentlich sind.

13. Verständliche Sprache und Inhalte

Digitale Barrierefreiheit betrifft nicht nur Technik.

Inhalte sollten möglichst:

• klar formuliert
• sinnvoll gegliedert
• mit aussagekräftigen Überschriften versehen
• frei von unnötigem Fachjargon
• mit verständlichen Handlungsaufforderungen ausgestattet sein

Lange Textblöcke können durch Absätze, Zwischenüberschriften und passende Aufzählungen strukturiert werden.

Bei komplexen Themen kann eine kurze Zusammenfassung helfen.

14. Dokumente und Downloads

Eine zugängliche Website kann weiterhin Barrieren enthalten, wenn verlinkte PDF-Dokumente oder andere Downloads nicht zugänglich sind.

Prüfe daher auch:

• Angebotsunterlagen
• Produktinformationen
• Preislisten
• Formulare
• Broschüren
• Geschäftsberichte
• Speisekarten
• Veranstaltungsprogramme

Ein barrierearmes HTML-Dokument ist häufig leichter zugänglich als ein schlecht strukturiertes PDF.

Werden wichtige Informationen ausschließlich als Download angeboten, muss auch das Dokument entsprechend geprüft werden.

15. Cookie-Banner und externe Tools

Cookie-Consent-Lösungen, Buchungssysteme, Chat-Widgets und andere externe Komponenten können neue Barrieren erzeugen.

Kontrolliere:

• vollständige Tastaturbedienung
• sichtbaren Fokus
• verständliche Beschriftungen
• ausreichende Kontraste
• logische Reihenfolge
• Schließen ohne Maus
• Verhalten bei Vergrößerung
• Screenreader-Ausgabe

Auch wenn ein externes Tool von einem Drittanbieter stammt, beeinflusst es die Zugänglichkeit der gesamten Website.

Die Auswahl solcher Dienste sollte deshalb nicht ausschließlich nach Funktionsumfang und Design erfolgen.

Reicht ein automatischer Barrierefreiheitstest aus?

Nein.

Automatische Prüfwerkzeuge können bestimmte technische Probleme erkennen, beispielsweise:

• fehlende Alt-Texte
• unzureichende Kontraste
• fehlende Formularbeschriftungen
• bestimmte Strukturfehler
• ungültige ARIA-Attribute

Andere Probleme benötigen eine manuelle Bewertung:

• Ist die Überschriftenstruktur inhaltlich sinnvoll?
• Sind Linktexte verständlich?
• Funktioniert die vollständige Tastaturbedienung?
• Ist die Fokusreihenfolge logisch?
• Sind Fehlermeldungen hilfreich?
• Ist die Sprache verständlich?
• Können komplexe Komponenten mit Screenreadern bedient werden?

Eine belastbare Prüfung verbindet daher automatische Tests mit manuellen Kontrollen.

So kannst du eine Webflow-Website prüfen

1. Tastaturtest

Lege die Maus zur Seite und navigiere ausschließlich mit:

• Tab
• Umschalt + Tab
• Enter
• Leertaste
• Pfeiltasten
• Escape

Prüfe dabei, ob alle wichtigen Funktionen erreichbar und bedienbar sind.

2. Fokus prüfen

Kontrolliere, ob jederzeit sichtbar ist, welches Element gerade ausgewählt ist.

Der Fokus sollte:

• gut erkennbar
• nicht abgeschnitten
• nicht von anderen Elementen verdeckt
• in logischer Reihenfolge geführt sein

3. Zoom und Textvergrößerung

Vergrößere die Website deutlich.

Prüfe, ob:

• Texte lesbar bleiben
• Inhalte nicht abgeschnitten werden
• keine horizontalen Scrollprobleme entstehen
• Buttons weiterhin erreichbar sind
• Formulare nutzbar bleiben
• Navigationen funktionieren

4. Kontraste messen

Verwende ein geeignetes Kontrastprüfwerkzeug und kontrolliere:

• Fließtext
• große Überschriften
• Links
• Buttons
• Formularränder
• Fokuszustände
• Fehlermeldungen
• Icons mit wichtiger Funktion

5. Screenreader-Test

Teste zentrale Seiten zumindest stichprobenartig mit einem Screenreader.

Prüfe:

• Seitentitel
• Überschriften
• Navigation
• Linktexte
• Bilder
• Formulare
• Fehlermeldungen
• dynamische Komponenten

6. Automatische Analyse

Automatische Werkzeuge können eine erste technische Übersicht liefern.

Ein gutes Ergebnis bedeutet jedoch nicht automatisch vollständige Barrierefreiheit. Ebenso muss nicht jede automatische Warnung tatsächlich einen echten Fehler darstellen.

Ergebnisse sollten fachlich eingeordnet werden.

7. Test durch reale Nutzer

Besonders wertvoll sind Tests mit Menschen, die assistive Technologien im Alltag verwenden.

Sie erkennen häufig Probleme, die in technischen Checklisten und automatischen Tests nicht sichtbar werden.

Typische Fehler bei Webflow-Websites

Häufige Probleme sind:

• Überschriften werden nach Schriftgröße statt Hierarchie gewählt
• Div-Elemente werden als klickbare Buttons nachgebaut
• Fokuszustände werden aus gestalterischen Gründen entfernt
• Slider funktionieren nicht vollständig mit der Tastatur
• Links besitzen nur den Text „Mehr erfahren“
• Formularfelder verwenden ausschließlich Platzhalter
• Bilder enthalten Keyword-Alt-Texte
• Animationen verstecken wichtige Inhalte
• mobile Menüs können nicht sauber geschlossen werden
• ARIA-Attribute werden ohne klare Funktion ergänzt
• externe Widgets werden nicht geprüft
• Farbkontraste werden nur visuell eingeschätzt

Viele dieser Fehler entstehen nicht durch Webflow selbst, sondern durch die konkrete Design- und Entwicklungsentscheidung.

Kann eine bestehende Webflow-Website nachträglich verbessert werden?

Ja. Viele Barrieren lassen sich auch bei einer bestehenden Website reduzieren.

Typische Optimierungen sind:

• Überschriftenhierarchie korrigieren
• semantische Elemente ergänzen
• Linktexte überarbeiten
• Kontraste verbessern
• Fokuszustände sichtbar machen
• Formulare beschriften
• Alt-Texte prüfen
• Navigation überarbeiten
• Animationen reduzieren
• Skip-Link ergänzen
• externe Komponenten austauschen
• PDF-Dokumente prüfen
• Tastaturbedienung verbessern

Bei grundlegenden Problemen kann allerdings ein größerer Umbau erforderlich sein.

Das gilt besonders, wenn Komponenten, Navigationen oder Interaktionen von Beginn an nicht zugänglich geplant wurden.

Ist eine vollständig barrierefreie Website garantiert möglich?

Eine pauschale Garantie sollte mit Vorsicht betrachtet werden.

Websites verändern sich laufend:

• neue Inhalte werden veröffentlicht
• Bilder werden ausgetauscht
• externe Tools werden aktualisiert
• rechtliche Anforderungen entwickeln sich weiter
• Redakteure ergänzen neue Seiten
• Browser und assistive Technologien verändern sich

Barrierefreiheit ist deshalb kein einmaliger Zustand, der nach dem Launch dauerhaft abgeschlossen ist.

Sinnvoller ist ein fortlaufender Prozess aus:

1. Anforderungen definieren
2. zugänglich gestalten
3. sauber entwickeln
4. automatisch und manuell testen
5. dokumentieren
6. nach dem Launch regelmäßig kontrollieren

Fazit: Webflow kann eine gute Grundlage sein

Mit Webflow lassen sich viele wichtige Anforderungen an eine zugängliche Website umsetzen.

Dazu gehören semantische Strukturen, Alt-Texte, Formularbeschriftungen, Tastaturfokus, responsive Layouts und individuelle Kontraste.

Die Plattform allein erzeugt jedoch keine Barrierefreiheit.

Entscheidend sind:

• klare Informationsarchitektur
• zugängliches Design
• semantische Entwicklung
• verständliche Inhalte
• sorgfältig aufgebaute Komponenten
• manuelle und automatische Tests
• regelmäßige Kontrolle nach dem Launch

Unternehmen sollten digitale Barrierefreiheit deshalb nicht erst am Ende eines Projekts prüfen. Je früher sie in Strategie, Design und Entwicklung berücksichtigt wird, desto effizienter lässt sie sich umsetzen.

Barrierefreiheit von Beginn an berücksichtigen

Du planst eine neue Webflow-Website oder möchtest einen bestehenden Webauftritt zugänglicher gestalten? In einem unverbindlichen Erstgespräch klären wir, welche Anforderungen für dein Projekt wichtig sind und welche Bereiche fachlich geprüft werden sollten.