Webseiten, die jeder benutzen kann.

Wir bauen Webseiten, die den WCAG 2.1 AA Standard erfüllen, BFSG-konform sind und trotzdem modern aussehen. Zum Beispiel diese hier.

Spezifikation

Standard
WCAG 2.1 AA
Gesetz
BFSG · seit 28.06.2025
Prüfung
axe, Lighthouse + manuell
Ergebnis
Report + Maßnahmenplan
Nachweis
Erklärung zur Barrierefreiheit
01 — Warum jetzt Die Zahlen

Barrierefreiheit ist kein Nice-to-have. Sie ist die Grundlage.

Jeder Mensch soll deine Webseite nutzen können — unabhängig von Seh-, Hör-, Motorik- oder kognitiver Einschränkung. Das ist kein Luxus. Das ist Handwerk.

Menschen mit anerkannter Behinderung in Deutschland — rund 16 % der Bevölkerung
13 Mio.
Statistisches Bundesamt
Das BFSG gilt. Eine Übergangsfrist gibt es nicht mehr.
28.06.2025
Bundesgesetzblatt I Nr. 28
der Top-1-Mio.-Webseiten haben WCAG-Fehler
96,8 %
WebAIM Million 2024
Höchstes Bußgeld bei Verstößen gegen das BFSG
100.000 €
§ 37 BFSG
02 — Prinzipien 8 Bausteine · WCAG 2.1 AA

Acht Bausteine einer barrierefreien Webseite.

01 — Struktur, die Maschinen verstehen

Semantisches HTML

Screenreader, Suchmaschinen und Assistenztechnologien navigieren über Landmarks und Überschriften. Ohne saubere Struktur bleibt alles nur ein Klumpen div.

  • Landmark-Elemente: header, nav, main, article, aside, footer
  • Eindeutige Heading-Hierarchie ohne Sprünge
  • ARIA nur dort, wo HTML nicht ausreicht
  • Listen, Tabellen und Formulare mit nativen Elementen
  • 1.3.1 Info and Relationships
  • 2.4.6 Headings and Labels
  • 4.1.2 Name, Role, Value

02 — Jede Funktion ohne Maus

Keyboard-Navigation

Rund 15 % aller Nutzer navigieren ohne Maus — motorisch eingeschränkt, per Screenreader oder schlicht am Laptop unterwegs. Jede Interaktion muss mit Tab, Enter und Leertaste funktionieren.

  • Logische Tab-Reihenfolge entlang des Leseflusses
  • Sichtbare Focus-Indikatoren (kein outline:none)
  • Skip-Links für schnelle Navigation
  • Keine Keyboard-Traps in Modals und Dropdowns
  • 2.1.1 Keyboard
  • 2.1.2 No Keyboard Trap
  • 2.4.3 Focus Order
  • 2.4.7 Focus Visible

03 — Lesbar für alle Augen

Ausreichende Kontraste

Mindestens 4,5:1 für normalen Text, 3:1 für große Schrift und grafische Elemente. Im Light- und im Dark-Mode. Im Sonnenlicht wie im Flugzeug.

  • 4,5:1 Mindest-Kontrast Body-Text
  • 3:1 für Headlines ≥ 24 px und Icons
  • Getestet in Light- und Dark-Mode
  • Kontrast auch bei Hover- und Focus-Zuständen
  • 1.4.3 Contrast (Minimum)
  • 1.4.11 Non-text Contrast

04 — Bilder, die man hören kann

Alternative Texte

Screenreader lesen alt-Attribute vor. Ein gutes Alt beschreibt, was zu sehen ist — nicht das Dateiformat. Dekorative Bilder bekommen ein leeres alt="" und verschwinden aus der Vorlesen-Spur.

  • Beschreibende Alt-Texte für Inhaltsbilder
  • Leeres alt="" für rein dekorative Grafiken
  • Komplexe Grafiken mit Langbeschreibung
  • Icons mit aria-label oder sr-only-Text
  • 1.1.1 Non-text Content

05 — Von 320 px bis 4K

Responsive & zoombar

Über 60 % der Besucher sind mobil. Viele zoomen zudem den Text. Die Seite muss bis 200 % Zoom ohne horizontales Scrollen funktionieren — auf jedem Viewport.

  • Mobile-First-Layout ab 320 px
  • Volle Funktion bei 200 % Zoom
  • Relative Einheiten (rem, em, %) statt fester Pixel
  • Keine Inhalte hinter horizontalem Scroll
  • 1.4.4 Resize Text
  • 1.4.10 Reflow
  • 1.4.12 Text Spacing
Interaktive Demo: Viewport-Auswahl Desktop, Tablet, Mobile und 200 % Zoom
StartLeistungenKontakt
200 %
Lesbar.
Text skaliert auf 200 %, Layout bricht um, kein horizontaler Scroll.

06 — Fehler, die man versteht

Formulare mit Klarheit

Formulare sind der Conversion-Flaschenhals. Ohne verbundene Labels, klare Fehler und aria-Attribute werden sie für viele unbedienbar — und verlieren bares Geld.

  • Label per for/id fest mit jedem Feld verbunden
  • Fehlermeldungen via aria-describedby + aria-invalid
  • Erforderliche Felder mit required und sichtbarem Hinweis
  • Autocomplete-Attribute für schnelleres Ausfüllen
  • 1.3.5 Identify Input Purpose
  • 3.3.1 Error Identification
  • 3.3.2 Labels or Instructions
  • 4.1.3 Status Messages

07 — Animationen mit Respekt

Reduced Motion

Menschen mit vestibulären Störungen reagieren auf starke Bewegungen mit Übelkeit. Wer das System-Setting „Bewegung reduzieren“ aktiviert hat, bekommt bei uns eine statische Seite — ohne Funktionsverlust.

  • prefers-reduced-motion: reduce wird respektiert
  • Keine auto-playenden Parallax- oder Scroll-Effekte
  • Statische Alternativen für bewegte Inhalte
  • Animationen unter 5 Sekunden oder pausierbar
  • 2.2.2 Pause, Stop, Hide
  • 2.3.1 Three Flashes
  • 2.3.3 Animation from Interactions
Interaktiver Toggle, der die Animation startet und stoppt

Probier's aus — das ist das gleiche Prinzip wie prefers-reduced-motion.

08 — Niemals nur Farbe

Farb-unabhängig

Rund 9 % aller Männer haben eine Farbfehlsichtigkeit. Informationen dürfen nie ausschließlich über Farbe kommuniziert werden — immer zusätzlich über Icon, Text oder Muster.

  • Status-Indikatoren mit Icon + Text + Farbe
  • Fehler nicht nur rot, sondern mit Symbol
  • Diagramme mit Schraffuren oder Beschriftung
  • Getestet mit Farbfehlsichtigkeits-Simulator
  • 1.4.1 Use of Color
Zwei Panels — nur Farbe vs. Farbe + Icon + Text, mit Farbfehlsichtigkeits-Simulation
Nur Farbe
  • Server A
  • Server B
  • Server C
+ Icon + Text
  • Server A Offline
  • Server B Warnung
  • Server C OK

Klick probiert Rot-Grün-Schwäche — links verschmelzen die Farben, rechts bleibt alles lesbar.

03 — Schnelltest 8 Fragen · 1 Minute

Wie barrierefrei ist deine Webseite?

Beantworte 8 Fragen ehrlich. Am Ende weißt du, wo du stehst.

Barrierefreiheits-Schnelltest
  • 01 Kannst du deine gesamte Webseite nur mit der Tastatur bedienen?

  • 02 Ist bei jedem interaktiven Element ein Focus-Indikator sichtbar?

  • 03 Erfüllen alle Texte den WCAG-Kontrast von 4,5:1?

  • 04 Haben alle inhaltlichen Bilder aussagekräftige Alt-Texte?

  • 05 Sind alle Formularfelder mit Labels verknüpft und Fehler klar beschrieben?

  • 06 Funktioniert deine Webseite bei 200 % Zoom ohne horizontalen Scroll?

  • 07 Respektiert deine Seite prefers-reduced-motion?

  • 08 Hast du eine öffentliche Erklärung zur Barrierefreiheit?

0 von 8 beantwortet
04 — Vorgehen 4 Schritte bis zur Erklärung

Vier Schritte zur konformen Webseite.

  1. Schritt 01

    Audit

    Automatisierte Tests (axe, Lighthouse) + manuelle Keyboard- und Screenreader-Prüfung. Ergebnis: strukturierter Report mit allen Fundstellen.

  2. Schritt 02

    Priorisierung

    Wir gewichten nach Impact und Aufwand, gruppieren nach Komponenten und geben dir einen realistischen Maßnahmenplan inklusive Aufwandsschätzung.

  3. Schritt 03

    Umsetzung

    Barrierefreiheit wird in Sprints abgearbeitet. Du siehst den Fortschritt Sprint für Sprint — ohne monatelange Blackbox.

  4. Schritt 04

    Verifikation

    Abschlusstest mit allen Tools plus manuelle Kontrolle. Zum Schluss liefern wir die Erklärung zur Barrierefreiheit für deine Webseite.

05 — FAQ

BFSG und Barrierefreiheit — häufige Fragen.

Deine Frage ist nicht dabei? Frag NOVA — oder ruf uns an.

Was ist das BFSG und wer ist davon betroffen?

Das Barrierefreiheitsstärkungsgesetz (BFSG) gilt seit dem 28.06.2025 und verpflichtet Unternehmen im B2C-Bereich, ihre digitalen Produkte und Dienstleistungen barrierefrei zu gestalten. Betroffen sind insbesondere Online-Shops, Buchungssysteme, Banken-Apps, Streaming-Dienste und andere Dienstleistungen für Endverbraucher.

Gilt das BFSG auch für reine B2B-Webseiten?

Reine B2B-Angebote sind vom BFSG ausgenommen. Sobald eine Webseite jedoch auch an Endverbraucher verkauft oder diese als Zielgruppe adressiert, fällt sie unter das Gesetz. Im Zweifel prüfen wir das gerne gemeinsam mit dir.

Welche Strafen drohen bei Nicht-Compliance?

Verstöße gegen das BFSG können mit Bußgeldern von bis zu 100.000 € geahndet werden. Im Extremfall kann die Marktüberwachungsbehörde die Einstellung des Angebots anordnen. Zusätzlich drohen Abmahnungen und Reputationsschäden.

Was ist der Unterschied zwischen WCAG 2.1 AA und AAA?

WCAG 2.1 AA ist der weltweit anerkannte Standard für barrierefreie Webseiten und die Basis für das BFSG. AAA stellt noch strengere Anforderungen (z. B. Kontrast 7:1 statt 4,5:1), ist aber oft nicht für ganze Seiten umsetzbar. Wir zielen standardmäßig auf AA — punktuell auf AAA, wo sinnvoll.

Wie läuft ein Barrierefreiheits-Audit bei Rocket Space ab?

Wir prüfen deine Webseite in vier Schritten: automatisierte Tests mit axe DevTools und Lighthouse, manuelle Keyboard- und Screenreader-Tests, Kontrast- und Zoom-Analyse sowie eine priorisierte Maßnahmenliste. Das Ergebnis erhältst du als PDF-Report mit konkreten Handlungsempfehlungen.

Brauche ich eine „Erklärung zur Barrierefreiheit" auf meiner Webseite?

Für unter das BFSG fallende Angebote ist eine öffentlich zugängliche Erklärung zur Barrierefreiheit Pflicht. Sie dokumentiert den Stand der Umsetzung, bekannte Einschränkungen und einen Feedback-Kanal. Wir liefern die Erklärung als Bestandteil unserer Audits.

Kostet eine barrierefreie Webseite mehr?

Wenn Barrierefreiheit von Anfang an mitgedacht wird, entstehen kaum Mehrkosten — sie ist Teil sauberen Handwerks. Teuer wird es erst, wenn man nachträglich reparieren muss. Deshalb bauen wir seit Jahren alle unsere Webseiten standardmäßig WCAG 2.1 AA-konform.

Kann Rocket Space meine bestehende Webseite barrierefrei machen?

Ja. Wir führen ein Audit durch, priorisieren die Fundstellen nach Impact und Aufwand und setzen sie in Sprints um. Bei stark veralteten Seiten ist ein kompletter Relaunch oft günstiger als das Nachrüsten — das ergibt sich aus dem Audit.