Die Deadline ist vorbei. Seit Juni 2025 gilt die BFSG-Barrierefreiheitsverordnung. Deine Website sollte jetzt erreichbar sein für alle. Nicht irgendwann. Jetzt.

Wenn du dich fragst, ob es wirklich so kompliziert ist, eine barrierefreie website erstellen zu lassen, sage ich dir: Nein. Es ist vor allem eine Frage der richtigen Checkliste.

Ich zeige dir, was konkret getan werden muss. Punkt für Punkt. Mit kostenlosen Test-Tools und realistischen Kosten-Orientierungen.

Was eine barrierefreie Website bedeutet

Eine barrierefreie Website funktioniert für jeden. Für Menschen mit Sehbeeinträchtigungen. Für Menschen mit motorischen Einschränkungen. Für Menschen, die alt oder in Eile sind oder einfach nur eine langsame Internetverbindung haben.

Manche denken: Das ist für 2 Prozent der Nutzer relevant. Stimmt nicht. Studien zeigen, dass etwa 15 Prozent aller Menschen eine dauerhafte oder temporäre Behinderung haben. Hinzu kommen Situationen: Der Arm in der Gipse. Die Sonne blendet dich. Du sitzt im lauten Zug. Plötzlich brauchst du eine barrierefreie website.

Das ist kein Nischenthema mehr. Das ist ein Standard. Wie eine funktionierende Checkout-Seite.

Für die rechtliche Seite, die BFSG-Anforderungen und die strategischen Gründe empfehle ich dir unseren Artikel zur Barrierefreiheit Website BFSG. Hier geht es um die konkrete Umsetzung.

Die praktische Checkliste

Eine barrierefreie website checkliste ist nicht mystisch. Sie ist systematisch. Ich gliedere sie nach Bereichen.

Kontrast und Farbe

• Schrift und Hintergrund müssen einen Kontrastverhältnis von mindestens 4.5:1 haben (für normalen Text).
• Große Schrift kann 3:1 sein.
• Farbe allein darf keine Information vermitteln. Das heißt: Ein rotes Feld für "Fehler" braucht auch ein X-Symbol.
• Überprüfe alle Schaltflächen, Formulare und wichtigen Inhalte auf ausreichenden Kontrast.
• Teste deine Farbkombinationen mit einem Kontrast-Checker (siehe Test-Tools weiter unten).

Tastaturnavigation

• Alle interaktiven Elemente müssen über die Tastatur erreichbar sein.
• Tab-Reihenfolge muss logisch sein: von oben links nach unten rechts, dem Lesen entsprechend.
• Der Fokus muss sichtbar sein. Entferne nie das Standard-Focus-Outline ohne Ersatz.
• Dropdown-Menüs, Modalfenster und Formulare müssen komplett tastbar navigierbar sein.
• Nutzer ohne Maus sollten deine Website bedienen können. Punkt.

Bildbeschreibungen und Alt-Texte

• Jedes Bild braucht einen aussagekräftigen Alt-Text.
• Der Alt-Text beschreibt das Bild, nicht "Bild von...".
• Gut: "Schreibtisch mit drei Monitors und Kaffeetasse"
• Schlecht: "Stock-Foto Büro"
• Dekorative Bilder bekommen alt="" (leerer Alt-Text), damit sie Screenreader ignorieren.
• Grafiken mit Daten (Charts, Diagramme) brauchen längere Beschreibungen.

Überschriftenstruktur

• Nutze Überschriften hierarchisch: H1, dann H2, dann H3.
• Springe nicht von H1 zu H3.
• Jede Seite hat genau eine H1.
• Nutze Überschriften strukturell, nicht für Design. "Große Schrift" ist keine Überschrift.
• Screenreader nutzen Überschriften zur Navigation. Die Struktur ist für deine Nutzer ein Inhaltsverzeichnis.

Formulare und Labels

• Jedes Eingabefeld braucht ein Label (Etikett), das programmgesteuert mit dem Feld verbunden ist.
• Platzhalter sind keine Labels. "name" im Feld ist kein Label.
• Labels müssen beschreibend sein: "E-Mail-Adresse" statt "Feld 1".
• Fehler müssen klar und konstruktiv mitgeteilt werden: "E-Mail-Adresse ungültig, bitte @-Zeichen überprüfen" statt "Fehler".
• Erforderliche Felder müssen gekennzeichnet sein.

Überschriften und Seitenstruktur

• Eine logische Seitenstruktur hilft allen, nicht nur Menschen mit Behinderungen.
• Nutze Landmarks: <header>, <nav>, <main>, <footer>.
• Skip-Links ermöglichen es, die Navigation zu überspringen: "Zum Inhalt springen".
• Kurze Absätze. Kurze Sätze. Das ist barrierefrei und leserlich.

ARIA-Attribute (fortgeschrittenes Level)

• ARIA steht für "Accessible Rich Internet Applications".
• Nutze aria-label für Symbole ohne Text: aria-label="Menü schließen" auf einem X-Button.
• aria-describedby verbindet Elemente mit Beschreibungen.
• role="alert" teilt Screenreadern mit, dass etwas wichtig ist.
• ARIA ist kein Ersatz für gute HTML-Struktur. Basics zuerst.

PDF und Dokumente

• PDFs müssen ebenfalls barrierefrei sein.
• Tags, Struktur, Alternative Texte für Bilder.
• Links im PDF müssen beschreibend sein: "Mehr über barrierefreie website erstellen erfahren" statt "hier".
• Für komplexe Inhalte: Biete auch eine HTML-Version an.
• Gescannte PDFs (reine Bilder) sind nicht barrierefrei. Konvertiere sie oder nutze OCR.

Videos und Audios

• Videos brauchen Untertitel (Captions) für hörbeeinträchtigte Menschen.
• Transkripte helfen gehörlosen Menschen und verbessern auch die SEO.
• Beschreib visuell wichtige Inhalte im Transkript: "[Grafik zeigt Verkaufszahlen von 2020 bis 2024]".
• Audio-Inhalte ohne Video brauchen ein Transkript.

Kostenloses Testing: Tools und Methoden

Du brauchst nicht alles selbst zu testen. Es gibt großartige kostenlose Tools.

WAVE (Web Accessibility Evaluation Tool)

• Browser-Extension für Chrome und Firefox.
• Zeigt Fehler, Warnungen und bestbestandene Checks direkt im Browser.
• Kostenlos. Keine Anmeldung nötig.
• Perfekt für schnelle Überblicke.

axe DevTools

• Auch eine Browser-Extension (Chrome, Firefox, Edge).
• Professioneller als WAVE, zeigt prioritäre Probleme zuerst.
• Kostenlos für die Basis-Version.
• Integriert sich in die Browser-Entwicklertools.

Lighthouse (Google Chrome)

• Eingebaut in Google Chrome.
• Öffne die DevTools (F12), gehe zu "Lighthouse", starten.
• Zeigt einen Accessibility-Score und konkrete Verbesserungen.
• Kostenlos. Alle Google-Tools sind kostenlos.

Kontrast-Checker

• WebAIM Contrast Checker (webaim.org/resources/contrastchecker)
• Trage Vorder- und Hintergrundfarbe ein, erhalte sofort das Verhältnis.
• Kostenlos. Verlässlich.

Tastatur-Test (Manuell)

• Öffne deine Website.
• Nutze nur die Tastatur. Tab, Shift+Tab, Enter, Pfeiltasten.
• Kannst du alles erreichen? Ist die Reihenfolge logisch?
• Ist der Focus sichtbar?
• Das ist keine Wissenschaft. Das ist deine Realität.

Screenreader-Test

• NVDA (Windows, kostenlos): nvaccess.org
• JAWS (Windows, kostenpflichtig, aber Standard): freedomscientific.com
• VoiceOver (macOS und iOS, kostenlos, eingebaut)
• Lade einen kostenlosen Screenreader, aktiviere ihn, navigiere deine Website.
• Du wirst schnell verstehen, was funktioniert und was nicht.

Kosten für die Umsetzung

"Wie viel kostet es, eine barrierefreie website zu machen?"

Die Antwort hängt ab von:

• Wie alt ist deine Website? (Alte Websites brauchen mehr Arbeit.)
• Wie viele Seiten? (100 Seiten kosten mehr als 10.)
• Wie komplex ist deine Website? (E-Commerce mit Filtern ist komplexer als ein Blog.)
• Was ist schon barrierefrei? (Manche Grundlagen sind bereits vorhanden.)

Kleine bis mittlere Websites (10-50 Seiten)

• Audit und Bericht: 300-800 Euro
• Umsetzung (teilweise, häufige Fehler beheben): 1.500-4.000 Euro
• Vollständige Umsetzung: 5.000-15.000 Euro
• Laufende Wartung (monatlich): 200-500 Euro

Große oder komplexe Websites (50+ Seiten, E-Commerce, etc.)

• Audit und Bericht: 800-2.000 Euro
• Umsetzung (teilweise): 3.000-8.000 Euro
• Vollständige Umsetzung: 10.000-30.000 Euro
• Laufende Wartung (monatlich): 500-1.500 Euro

DIY-Richtung (teilweise Selbstmachen)

Wenn du handwerklich veranlagt bist:

• Selber auditen mit WAVE und axe DevTools: kostenlos
• Inhalte selbst anpassen (Alt-Texte, Labels, Überschriften): 200-500 Euro (externe Unterstützung für komplexe Themen)
• Technische Umsetzung selbst: Variabel, je nach Fähigkeiten

Die meisten KMU wählen einen Mittelweg: Ein Audit von außen, dann teilweise Selbstumsetzen oder gezielte externe Hilfe bei technischen Punkten.

Häufig gestellte Fragen

Macht Barrierefreiheit meine Website langsamer?

Nein. Im Gegenteil. Gutes barrierefreies Design ist oft schneller. Gut strukturierte HTML, semantische Tags, keine überflüssigen Skripte. Das sind auch Performance-Optimierungen. Eine barrierefreie website ist in der Regel eine schnelle website.

Ist eine barrierefreie website "hässlich"?

Nein. Barrierefreies Design ist gutes Design. Klare Kontraste sind lesbarer. Logische Struktur ist verständlicher. Große Schrift ist schöner. Du brauchst keine Kompromisse. Du gewinnst.

Muss ich meine Website komplett neu entwickeln?

Fast nie. Die meisten Probleme sind Softwarefehler, nicht Design-Fehler. Alt-Texte hinzufügen. Fokus-Outlines sichtbar machen. Labels korrigieren. Das sind oft kleine Änderungen mit großer Wirkung.

Reicht ein WCAG AA oder muss es AAA sein?

WCAG AA ist der Standard und erfüllt BFSG. AAA ist die nächste Stufe, oft nicht nötig. Konzentriere dich auf AA. Das ist ausreichend und manchmal nicht einfach.

Muss ich alle Anforderungen auf einmal erfüllen?

Nein. Ein guter Plan: Audit machen. Prioritäten setzen. Phase 1: Kritische Fehler. Phase 2: Häufige Fehler. Phase 3: Optimierungen. Das ist realistisch und nachhaltig.

Nächste Schritte

Eine barrierefreie website ist keine Einmalaufgabe. Sie ist eine Haltung. Jede neue Seite, jedes Update sollte barrierefrei sein. Das kostet weniger, wenn es von Anfang an geplant ist.

Wenn du die Checkliste durch gehst und merkst: "Das ist zu viel" oder "Ich weiß nicht, wo ich anfangen soll", kann ich dir helfen.

Ich audit deine Website, zeige dir konkrete Probleme, priorisiere sie und mache einen Plan. Dann schauen du und ich gemeinsam, was du selbst umsetzen kannst und wo externe Hilfe sinnvoll ist.

Lass uns über dein Projekt sprechen. Keine abstrakte Beratung. Kein Jargon. Nur konkrete Schritte für deine Website.

Kontakt aufnehmen