Website barrierefrei machen: Die Schritt-für-Schritt-Anleitung 2026 (Inklusive Checklisten)

Seit dem 28. Juni 2025 müssen private Unternehmen in Deutschland ihre Websites barrierefrei gestalten. Das verlangt das Barrierefreiheitsstärkungsgesetz(BFSG), das die Anforderungen des EAA in deutsches Recht überführt. Wer das nicht tut, riskiert Bußgelder bis 100.000 Euro pro Fall. In diesem Leitfaden zeigen wir dir Schritt für Schritt, wie du deine Website barrierefrei machst, mit einer praktischen Checkliste für Bilder, Formulare, Tastaturbedienung, Kontraste und Überschriften. So wird deine digitale Präsenz nicht nur gesetzeskonform und zugänglich, sondern inklusiv für alle Nutzer:innen. Türen öffnen, die immer schon hätten offenstehen sollen.

Die Kernpunkte auf einen Blick

• Was ist eine barrierefreie Website?       Eine Website, deren Inhalte alle Menschen nutzen können, unabhängig von Seh-, Hör-, motorischen oder kognitiven Einschränkungen.

• Wer ist betroffen?                                       Private Unternehmen in den vom BFSG erfassten Bereichen seit 28.06.2025, plus öffentliche Stellen über BITV 2.0.

• Wo fängst du an?                                       Audit, Priorisierung, Umsetzung, Test, Erklärung zur Barrierefreiheit, laufende Pflege.

• Die wichtigsten Standards                       WCAG 2.2 Stufe AA, BFSG, EAA, BITV 2.0, EN 301 549.

• Häufigste Barrieren                              Fehlende Alternativtexte, schlechte Kontraste, nicht tastaturbedienbare Elemente, unbeschriftete Formulare, nicht-semantisches HTML.

• Risiko bei Verstößen                              Bußgelder bis 100.000 Euro pro Fall, Marktrücknahmen, UKlaG- Klagen, Imageschäden.

Was bedeutet „barrierefreie Website“?

Eine barrierefreie Website ist eine Website, deren Inhalte alle Menschen nutzen können, unabhängig von Sehen, Hören, Bewegen oder kognitiven Fähigkeiten. Allein in Deutschland leben etwa 7,9 Millionen Menschen mit einer anerkannten Schwerbehinderung [Statistisches Bundesamt, 2023].

Konkret profitieren von einer barrierefreien Website:

• Menschen mit Sehbeeinträchtigung oder Blindheit (nutzen Screenreader und Braille-Zeile)

• Menschen mit motorischen Einschränkungen (Tastatur, Sprachsteuerung statt Maus)

• Menschen mit Hörbeeinträchtigungen (Untertitel, Transkripte)

• Menschen mit kognitiven Einschränkungen oder Legasthenie (klare Sprache, logische Strukturen)

• Ältere Menschen, Sprachlerner:innen und Multitasker:innen (bessere Lesbarkeit und alternative Eingabemöglichkeiten)

Welche WCAG-Anforderungen sind für Websites relevant?

Die Web Content Accessibility Guidelines fassen alles in vier Prinzipien zusammen, kurz POUR. Mehr Details in unserem Beitrag zu WCAG 2.2.

• Wahrnehmbar. Farbkontraste, Alternativtexte, Untertitel.

• Bedienbar. Volle Tastaturbedienung, sichtbarer Fokus, genug Zeit für Eingaben.

• Verständlich. Einfache Sprache, logische Überschriften-Hierarchie, hilfreiche Fehlermeldungen.

• Robust. Semantisches HTML, ARIA als Ergänzung statt Ersatz.

Für die meisten Websites ist WCAG-Stufe AA der richtige Zielwert. Genau diese Anforderungen verlangt auch das BFSG, damit deine Inhalte für alle zugänglich werden.

Wer muss seine Website barrierefrei machen?

Das BFSG gilt seit dem 28. Juni 2025 für private Unternehmen in E-Commerce, Banking, Verkehr, Telekommunikation, E-Books und audiovisuellen Mediendiensten. Kleinstunternehmen unter 10 Mitarbeiter:innen und 2 Millionen Euro Umsatz sind teilweise befreit. Öffentliche Stellen fallen unter die BITV 2.0. In Österreich und der Schweiz gelten vergleichbare Rahmen über BaFG und BehiG.

Auch wenn du nicht direkt unter das BFSG fällst, lohnt sich die Umsetzung. Du gewinnst Reichweite, verbesserst dein SEO und stärkst dein Image. Mehr zur EU-Richtlinie EAA, aus der das BFSG abgeleitet ist, findest du in unserem rechtlichen Leitfaden.

Warum jetzt?

Vier Gründe, warum du das Thema nicht weiter aufschieben solltest:

• Recht: Bußgelder bis 100.000 Euro pro Fall, Marktrücknahmen, UKlaG-Klagen.

• Umsatz: 80,7 Prozent der Konsument:innen brechen Online-Vorgänge bei Barrieren ab. Wir haben die Zahlen gesammelt.

• SEO: Semantische Struktur und Alternativtexte verbessern dein Ranking.

• Zukunft: AI-Agenten lesen denselben Accessibility Tree wie Screenreader. Wer sauber arbeitet, gewinnt doppelt.

In sechs Schritten zur barrierefreien Website

So gehst du strukturiert vor:

1. Audit deiner aktuellen Website. Automatisierte Scans, manuelle Prüfung der kritischen Flows, idealerweise Tests mit echten Nutzer:innen. Mehr im Leitfaden zum Testen.

2. Priorisierung. Nach Schwere, Reichweite und Geschäftsrelevanz sortieren. Quick Wins zuerst, große Umbauten in Releases planen.

3. Umsetzung der wichtigsten Barrieren. Die häufigsten Patterns zuerst (siehe unten), Design, Redaktion und Entwicklung koordiniert einbinden.

4. Testen. Mit Screenreadern (NVDA, VoiceOver, TalkBack), idealerweise zusätzlich mit echten Menschen mit Behinderungen über unser User-Testing.

5. Erklärung zur Barrierefreiheit veröffentlichen. Mit Status, Feedback-Möglichkeit und Roadmap, prominent im Footer verlinkt. Die Erklärung zur Barrierefreiheit ist auch rechtlich gefordert.

6. Laufende Pflege. Schulungen über die Accessiway Academy, automatisiertes Monitoring im CI/CD, regelmäßige Stichproben.

Welche Elemente solltest du zuerst optimieren?

Wenn du nicht alle Inhalte gleichzeitig schaffst, konzentriere dich auf die größten Hebel. Eine sinnvolle Checkliste für inklusive Nutzer:innen-Erlebnisse:

• Kritische Flows: Login, Checkout, Kontaktformular, Suche. Hier entscheidet sich Umsatz und Compliance.

• Wiederkehrende Komponenten: Header, Footer, Hauptnavigation, Cookie-Banner. Einmal richtig gebaut, profitiert die ganze Seite.

• Top-Traffic-Seiten: Startseite, meistbesuchte Produktseiten, beliebteste Blogartikel.

• Formulare und PDFs: Beides wird in fast jedem Audit getestet.

• Später: selten besuchte Archiv-Seiten und interne Tools.

Die häufigsten Barrieren und wie du sie behebst

Hier sind die wichtigsten technischen Anpassungen für barrierefreie Inhalte und Funktionen, mit konkreten Beispielen für die praktische Umsetzung deiner Inhalte:

Alternativtexte für Bilder und Icons

Screenreader lesen Bilder über das alt-Attribut. Ohne Alternativtext bleibt das Bild für blinde Nutzer:innen unsichtbar.

• Informative Bilder: kurze, aussagekräftige Beschreibung (max. 125 Zeichen).

• Dekorative Bilder: leeres alt-Attribut (alt="").

• Icons mit Funktion: alt-Text oder aria-label, das die Funktion beschreibt.

• Vermeide „Bild von“ oder „Foto von“ am Anfang.

Tastaturbedienbarkeit und sichtbarer Fokus

• Wer keine Maus nutzen kann, navigiert mit der Tastatur.

• Jedes interaktive Element per Tab erreichbar, in logischer Reihenfolge.

• Sichtbarer Fokus, CSS outline niemals einfach entfernen.

• Aus Modals mit Esc rauskommen, keine Tastatur-Fallen.

Farbkontraste prüfen

WCAG 2.2 verlangt mindestens 4,5:1 für normalen Text, 3:1 für großen Text.

• Nutze einen Kontrast-Checker wie WebAIM Contrast Checker.

• Prüfe auch Buttons, Links und Formularfelder, nicht nur Fließtext.

• Farbe darf nie die einzige Informationsquelle sein, ergänze Symbole oder Text.

Formulare barrierefrei gestalten

Formulare sind oft die kritischsten Stellen einer Website. Hier brechen Nutzer:innen am häufigsten ab.

• Sichtbare Labels: label-Element für jedes Feld, programmatisch verknüpft, Placeholder ist kein Label.

• Pflichtfelder erkennbar: nicht nur über Farbe, sondern mit Sternchen oder Text.

• Klare Fehlermeldungen: hilfreich formuliert, mit aria-describedby ans Feld gebunden.

• Volle Tastaturbedienung: vom ersten bis zum letzten Feld.

Barrierefreie Texte und Überschriften

Klare Sprache und logische Struktur helfen allen, vor allem Screenreader-Nutzer:innen, die per Überschriften-Sprung navigieren.

• Eine h1 pro Seite, danach h2 bis h6 in logischer Reihenfolge.

• Keine Ebenen überspringen, Überschriften sind Struktur, nicht Stilmittel.

• Kurze Sätze, aktive Sprache, aussagekräftige Linktexte (nicht „Hier klicken“).

Semantisches HTML

Nutze die richtigen HTML-Elemente für die richtigen Aufgaben. Browser und Hilfsmittel verstehen sie automatisch.

• Ein Button ist ein <button>, kein gestyltes <div>.

• Listen sind <ul> oder <ol>, Navigation gehört in <nav>, Hauptinhalt in <main>.

• ARIA ist Ergänzung, kein Ersatz für sauberes HTML.

Barrierefreie PDFs und Videos

Auch deine Dokumente und Medien zählen mit:

• PDFs: getaggt, logische Lesereihenfolge, Alternativtexte. Mehr in unserem Beitrag zur Barrierefreiheit digitaler Dokumente.

• Videos: Untertitel sind Pflicht, Audio-Beschreibungen empfohlen.

• Audio: Transkripte bereitstellen.

• Für komplexe PDF-Bibliotheken: PDF-Solution-Suite.

Wie testest du am Ende?

Eine verlässliche Prüfung kombiniert drei Methoden:

• Automatisierte Tools (accesiway scanner, WAVE, Lighthouse, axe DevTools). Sie finden etwa 30 Prozent der Probleme.

• Manuelle Screenreader-Prüfung mit NVDA, VoiceOver oder TalkBack. Damit erkennst du, was Tools übersehen.

• Nutzer-Tests mit Menschen mit Behinderungen. Der wertvollste Schritt, weil hier echte Reibungspunkte sichtbar werden.

Eine komplette Acht-Schritte-Checkliste findest du in unserem Leitfaden zum Testen.

Warum Overlays allein nicht reichen

Vielleicht hast du schon von 1-Klick-Lösungen oder Overlays gehört, die per Knopfdruck Barrierefreiheit versprechen. Das Versprechen hält nicht:

• Overlays überlagern Probleme, sie beheben sie nicht im Code.

• Die Europäische Kommission hat 2023 klargestellt: Overlays allein bringen keine Compliance.

• In den USA gibt es zahlreiche Klagen gegen Websites, die nur auf Overlays setzen.

Wir nutzen unser Barrierefreiheits-Widget deshalb nie als Ersatz, sondern als Teil eines vollständigen Compliance-Pakets: sauberer Code, Audit, Remediation, Erklärung zur Barrierefreiheit, laufendes Monitoring.

Wann brauchst du Experten?

• DIY ist realistisch bei kleinen Websites, statischen Inhalten, einfachen Formularen.

• Expert:innen lohnen sich bei dynamischen E-Commerce-Anwendungen, großen PDF-Bibliotheken, mehrsprachigen Sites, komplexen Checkouts.

Typische Kosten im DACH-Raum:

• Audit: 600 bis 3.000 Euro.

• Remediation: 1.500 Euro (einfach) bis 15.000 Euro (komplex).

• Monitoring: 100 bis 500 Euro pro Monat.

Unsere Audit- und Remediation-Pakete sind speziell auf den BFSG-Kontext zugeschnitten.

Der Bonus: AI-Agenten lesen denselben Baum

AI-Agenten wie OpenAI Atlas, Microsoft Playwright MCP und Vercels agent-browser navigieren Websites über denselben Accessibility Tree, den auch Screenreader nutzen. Was Screenreader-Nutzer:innen lesen können, können auch Agenten lesen. Eine schwache Implementierung blockiert beide.

Ein konkretes Beispiel:

• Ein:e Nutzer:in bittet einen AI-Agenten, ein Produkt in deinem Shop zu kaufen.

• Dein „In den Warenkorb“-Button ist als <div> mit JavaScript umgesetzt, ohne semantische Rolle, ohne Label.

• Im Baum erscheint der Button als generic ohne Namen. Der Agent findet ihn nicht und bricht ab.

• Als <button>In den Warenkorb</button> implementiert, hätte der Agent ihn sofort gefunden.

Wer heute sauber für Screenreader arbeitet, gewinnt morgen sowohl Menschen mit Behinderungen als auch AI-Agenten.

Häufig gestellte Fragen (FAQ)

Was bedeutet Barrierefreiheit für Websites?

Deine Website ist für alle nutzbar, unabhängig von Sehen, Hören, Bewegen oder kognitiven Fähigkeiten. Konkret: bedienbar mit Tastatur, kompatibel mit Screenreadern, klare Sprache, ausreichende Kontraste, semantisches HTML.

Welche häufigen Barrieren gibt es auf Websites?

Sechs Klassiker: nur per Maus bedienbare Inhalte, unsichtbarer Fokus, optisch statt semantisch gestylte Überschriften, Formulare ohne Labels, Bilder ohne Alt-Text, zu geringe Kontraste.

Welche Elemente solltest du zuerst optimieren?

Beginne mit kritischen Flows (Login, Checkout, Kontakt), dann wiederkehrende Komponenten, Top-Traffic-Seiten und Formulare. Archiv-Seiten und interne Tools später.

Wie machst du Bilder mit Alternativtext barrierefrei?

Informative Bilder bekommen einen kurzen Alternativtext im alt-Attribut (max. 125 Zeichen). Dekorative Bilder: alt="". Icons mit Funktion brauchen alt oder aria-label.

Wie stellst du Tastaturbedienbarkeit und sichtbaren Fokus sicher?

Jedes interaktive Element per Tab erreichbar, in logischer Reihenfolge. Sichtbaren Fokus nicht entfernen. Modals mit Esc schließbar. Teste selbst: Maus weglegen, mit Tab navigieren.

Wie schreibst du barrierefreie Texte und Überschriften?

Eine h1 pro Seite, dann h2 bis h6 in logischer Reihenfolge ohne Sprünge. Überschriften sind Struktur, kein Stil. Kurze Sätze, aussagekräftige Linktexte.

Wie gestaltest du Formulare barrierefrei?

Sichtbares label-Element für jedes Feld, programmatisch verknüpft. Pflichtfelder mit Text markieren. Fehlermeldungen mit aria-describedby ans Feld binden. Placeholder ersetzt kein Label.

Wie prüfst du Kontraste und Farben auf Barrierefreiheit?

WCAG-Anforderungen: mindestens 4,5:1 für normalen Text, 3:1 für großen Text. Nutze einen Kontrast-Checker wie WebAIM. Prüfe auch Buttons und Links. Farbe darf nie die einzige Informationsquelle sein.

Wie prüft man, ob eine Website barrierefrei ist?

Kombiniere drei Methoden: automatisierte Tools (axe, WAVE, Lighthouse) finden etwa 30 Prozent, manuelle Screenreader-Prüfung deckt den Rest auf, Tests mit Menschen mit Behinderungen zeigen reale Reibungspunkte.

Reicht ein Accessibility-Widget aus, oder brauchst du mehr?

Nein. 1-Klick-Lösungen überlagern Probleme, lösen sie nicht. Die EU-Kommission hat 2023 klargestellt: Overlays allein bringen keine Compliance. Ein Widget ist sinnvolle Ergänzung, aber kein Ersatz für sauberen Code und Audit.

Was kostet es, eine Website barrierefrei zu machen?

Im DACH-Raum: Audit 600 bis 3.000 Euro, Remediation 1.500 Euro (einfach) bis 15.000 Euro (komplex), laufendes Monitoring 100 bis 500 Euro pro Monat. Strukturierte Pakete sind günstiger als Einzelleistungen.

Welche Strafen drohen, wenn deine Website nicht barrierefrei ist?

Bis zu 100.000 Euro pro Fall nach BFSG. Marktaufsichtsbehörden können Anordnungen erlassen oder Dienste untersagen. Verbraucherverbände klagen nach UKlaG. Der Imageschaden ist oft größer als das Bußgeld.