Barrierefreie Website erstellen: der Leitfaden von der Planung bis zum Livegang

Die meisten Websites sind nicht barrierefrei. Die jährliche Untersuchung WebAIM Million fand im Februar 2026 auf 95,9 Prozent der eine Million meistbesuchten Startseiten automatisch erkennbare Fehler nach WCAG, im Schnitt 56 pro Seite. Gleichzeitig ist Barrierefreiheit für viele Onlineshops und Buchungsseiten seit dem 28. Juni 2025 Pflicht. Dieser Leitfaden zeigt, wie Sie eine barrierefreie Website erstellen, Schritt für Schritt von der Planung bis zum Livegang.

Barrierefreiheit: wer sie braucht und was sie bringt

Barrierefreie Websites lassen sich von allen Menschen nutzen: von blinden Menschen mit Screenreader, von Menschen, die nur die Tastatur bedienen können, von älteren Menschen mit nachlassender Sehkraft und von allen, die gerade das Smartphone in der Sonne benutzen. Rechtlich verpflichtet sind vor allem zwei Gruppen:

• Unternehmen, die über Website oder App Verträge mit Verbrauchern schließen, nach dem Barrierefreiheitsstärkungsgesetz. Wer genau betroffen ist und welche Ausnahmen gelten, steht im Beitrag Barrierefreie Website: Pflicht nach BFSG.
• Öffentliche Stellen nach BGG, BITV 2.0 und Landesrecht, mehr dazu unter Barrierefreie Webentwicklung für die öffentliche Hand.

Auch ohne Pflicht lohnt sich Barrierefreiheit: Klare Struktur, gute Kontraste und beschriftete Formulare verbessern die Nutzbarkeit für alle und helfen Suchmaschinen, Ihre Inhalte zu verstehen.

Der Maßstab: WCAG 2.2 Stufe AA

Die Web Content Accessibility Guidelines (WCAG) des W3C sind der weltweite Standard. Sie ordnen ihre Erfolgskriterien vier Prinzipien zu: Inhalte müssen wahrnehmbar, bedienbar, verständlich und robust sein. Jedes Kriterium hat eine Stufe, A, AA oder AAA. Rechtlich gefordert ist in Europa die Stufe AA.

Maßgeblich ist derzeit die europäische Norm EN 301 549 V3.2.1, die auf WCAG 2.1 verweist. Die WCAG 2.2 sind seit Oktober 2023 W3C-Standard und seit 2025 auch als ISO/IEC 40500:2025 veröffentlicht. Die neue Normfassung EN 301 549 V4.1.1 vom September 2026 baut auf WCAG 2.2 auf. Für neue Websites empfehlen wir deshalb gleich WCAG 2.2 Stufe AA. Neu in den Stufen A und AA sind sechs Kriterien:

Schritt für Schritt zur barrierefreien Website

1. Anforderungen festlegen

Schreiben Sie Barrierefreiheit von Beginn an in die Anforderungen, mit dem Standard, mit den wichtigsten Abläufen und mit der Prüfung vor dem Livegang als Abnahmekriterium. Legen Sie fest, welche Wege Nutzer am häufigsten gehen: Kontakt, Suche, Produkt bis Bestellung, Terminbuchung. Diese Abläufe werden später am gründlichsten geprüft.

2. Barrierefrei gestalten

Viele Barrieren entstehen im Design und lassen sich später nur mühsam beheben:

• Kontraste: Normaler Text mindestens 4,5:1 zum Hintergrund, großer Text ab etwa 24 Pixel oder 18,5 Pixel fett mindestens 3:1. Auch Bedienelemente wie Feldränder, Icons und Fokusrahmen brauchen mindestens 3:1. Zu wenig Kontrast ist mit 83,9 Prozent der häufigste Fehler in der WebAIM Million.
• Fokus: Jedes bedienbare Element braucht einen gut sichtbaren Fokuszustand, und der Fokus darf nicht hinter fixierten Elementen verschwinden.
• Klickflächen: mindestens 24 × 24 Pixel, für Touch-Bedienung besser deutlich größer.
• Farbe nicht allein: Fehler, Pflichtfelder oder Status nie nur über Farbe zeigen, sondern auch mit Text oder Symbol.
• Bewegung: Animationen sparsam und abschaltbar, wenn Nutzer im Betriebssystem reduzierte Bewegung eingestellt haben.
• Schrift und Zoom: Layouts, die bei 200 Prozent Vergrößerung und auf schmalen Bildschirmen ohne seitliches Scrollen umbrechen.

3. Sauber strukturieren und entwickeln

• Semantisches HTML: echte Überschriften in logischer Reihenfolge, Navigationsbereiche, Listen, Tabellen mit Kopfzeilen und echte Schaltflächen statt anklickbarer Container.
• Sprache angeben: Die Sprache der Seite gehört in den Code, damit Screenreader richtig vorlesen. Sie fehlt laut WebAIM Million noch auf 13,5 Prozent der Startseiten.
• Aussagekräftige Links und Schaltflächen: Leere Links und Schaltflächen ohne Text gehören mit 46,3 und 30,6 Prozent zu den häufigsten Fehlern, etwa bei Icons ohne Beschriftung.
• ARIA sparsam einsetzen: ARIA-Attribute ergänzen HTML, ersetzen es aber nicht. Seiten mit ARIA hatten in der WebAIM Million im Schnitt sogar mehr Fehler als Seiten ohne.
• Tastatur: Alle Funktionen per Tastatur erreichbar, in sinnvoller Reihenfolge und ohne Falle, aus der man nicht mehr herauskommt.

4. Inhalte barrierefrei aufbereiten

• Alternativtexte: Informative Bilder beschreiben, dekorative Bilder als solche kennzeichnen. Fehlende Alternativtexte fand WebAIM auf 53,1 Prozent der Startseiten.
• Videos: Untertitel für aufgezeichnete Videos, bei Bedarf Audiodeskription.
• Verständliche Sprache: kurze Sätze, klare Überschriften, Fachbegriffe erklären.
• Dokumente: PDF-Dateien mit Struktur, Lesereihenfolge und Alternativtexten, oder die Inhalte gleich als HTML-Seite.

5. Formulare und Anmeldung barrierefrei machen

Formulare sind der Ort, an dem aus Besuchern Kunden werden, und zugleich die häufigste Barriere. Jedes Feld braucht eine sichtbare Beschriftung, die auch technisch mit dem Feld verbunden ist. Fehlende Beschriftungen fand WebAIM auf 51 Prozent der Startseiten. Fehlermeldungen nennen den Fehler und den Weg zur Lösung. Bereits eingegebene Daten werden nicht erneut abgefragt, Zeitlimits lassen sich verlängern, und die Anmeldung kommt ohne Bilderrätsel aus.

6. Komponenten Dritter prüfen

Eine Website ist nur so barrierefrei wie ihr schwächstes Element. Prüfen Sie vor der Auswahl:

• Einwilligungsbanner, die per Tastatur bedienbar sind und den Fokus nicht einsperren
• Videoplayer, Karten, Chat-Widgets und Terminbuchungen
• Zahlungsanbieter im Bestellprozess, denn für Shops nach BFSG müssen auch Anmeldung und Zahlung barrierefrei sein

7. Vor dem Livegang prüfen

Automatische Werkzeuge finden nur einen Teil der Probleme. Kombinieren Sie sie mit Tests per Tastatur, Screenreader und Vergrößerung, für wichtige Projekte mit einer unabhängigen Prüfung. Wie Sie dabei vorgehen und welche kostenlosen Werkzeuge helfen, zeigt unser Beitrag Website auf Barrierefreiheit prüfen.

8. Erklärung veröffentlichen und im Alltag sichern

Wer unter das BFSG oder das Recht für öffentliche Stellen fällt, veröffentlicht eine Erklärung zur Barrierefreiheit, eine Gliederung dafür finden Sie im Beitrag Barrierefreiheitserklärung mit Muster. Danach entscheidet die Redaktion, ob die Website barrierefrei bleibt. Ein Redaktionssystem, das Alternativtexte und Überschriften einfordert, und eine kurze Schulung sind dafür mehr wert als jede spätere Prüfung.

Warum Plugins und Overlays nicht reichen

Viele Anbieter versprechen Barrierefreiheit per Skript: ein Symbol in der Ecke, ein paar Schalter für Kontrast und Schriftgröße, angeblich gesetzeskonform. Das hält nicht:

• Die Überwachungsstelle des Bundes (BFIT-Bund) schreibt, eine nicht barrierefreie Website werde durch ein Overlay-Tool nicht zwingend barrierefrei im Sinne der gesetzlichen Anforderungen, und solche Werkzeuge könnten neue Barrieren schaffen.
• Das Europäische Behindertenforum und die IAAP stellten 2023 gemeinsam fest, dass Overlays Websites weder barrierefrei noch konform mit EU-Recht machen und Hilfsmittel stören können.
• Die US-Handelsbehörde FTC verhängte 2025 gegen den Overlay-Anbieter accessiBe eine Strafe von 1 Million US-Dollar. Der Anbieter darf ohne Belege nicht mehr damit werben, sein Werkzeug mache Websites WCAG-konform.

Barrierefreiheit gehört in den Code und in die Inhalte, nicht in ein nachgeladenes Skript.

Was eine barrierefreie Website kostet

Eingeplante Barrierefreiheit ist Teil von Design und Entwicklung, kein großer Zusatzposten. Teuer wird es, wenn eine fertige Website nachträglich umgebaut werden muss: Farben, Komponenten und Formulare entscheiden sich früh, und jede spätere Änderung zieht Tests nach sich. Welche Faktoren den Preis einer Website sonst bestimmen, steht im Beitrag Was kostet eine Website?

Zusätzliche Kosten entstehen vor allem für:

• Eine unabhängige Prüfung: Für den BIK BITV-Test, ein in Deutschland verbreitetes Prüfverfahren, nennt der Anbieter als Beispiel 4.200 € netto für sieben Seiten plus 250 € Grundgebühr, bei einer Dauer von rund 4 bis 6 Wochen.
• Leichte Sprache und Gebärdensprache: für öffentliche Stellen Pflicht, für Unternehmen freiwillig.
• Untertitel und Audiodeskription: für eigene Videos.

Wer ohnehin einen Relaunch plant, kann Barrierefreiheit und Suchmaschinenoptimierung in einem Schritt angehen, dazu mehr in der Checkliste für den Website-Relaunch.

So unterstützt THEONEAGENCY

Wir berücksichtigen Barrierefreiheit in Design und Entwicklung von Anfang an: Kontraste, Fokuszustände und Klickflächen im Design, semantischer Code und beschriftete Formulare. Den Standard, die Tests vor dem Livegang und auf Wunsch eine unabhängige Prüfung nehmen wir als Abnahmekriterien ins feste Angebot auf. Sie können Ihre Website erstellen lassen, eine Website ist bei uns in 4 bis 6 Wochen live und beginnt bei rund 5.000 € netto. Für Shops gehört der barrierefreie Bestellprozess in die Anforderungen, wenn Sie Ihren Onlineshop erstellen lassen. Bei Apps prüfen Sie Bedienung und Kontraste schon im klickbaren Prototyp, wenn Sie eine App entwickeln lassen.

Eine erste Kostenschätzung erhalten Sie in rund drei Minuten im Projekt-Kalkulator, eine Antwort von uns innerhalb von 24 Stunden.

Hinweis: Dieser Beitrag ist eine allgemeine Information und keine Rechtsberatung.

Häufige Fragen

Was macht eine Website barrierefrei?

Eine Website ist barrierefrei, wenn alle Menschen sie ohne fremde Hilfe nutzen können, auch mit Screenreader, nur mit der Tastatur, mit starker Vergrößerung oder eingeschränktem Farbsehen. Den technischen Maßstab setzen die Web Content Accessibility Guidelines (WCAG) mit den Prinzipien wahrnehmbar, bedienbar, verständlich und robust, in der Praxis auf Stufe AA.

Nach welchem Standard sollte ich eine neue Website bauen?

Rechtlich maßgeblich ist derzeit die Norm EN 301 549 V3.2.1 mit den WCAG 2.1 in den Stufen A und AA. Für neue Projekte empfehlen wir WCAG 2.2 Stufe AA, denn die neue Fassung der Norm vom September 2026 baut bereits darauf auf. Die sechs neuen Kriterien der Stufen A und AA lassen sich zu Projektbeginn mit wenig Aufwand einplanen.

Reicht ein Barrierefreiheits-Plugin oder Overlay?

Nein. Overlay-Werkzeuge machen eine Website nicht barrierefrei im Sinne der gesetzlichen Anforderungen, so die Überwachungsstelle des Bundes für Barrierefreiheit von Informationstechnik. Sie können sogar neue Barrieren schaffen und Hilfsmittel stören. Die US-Handelsbehörde FTC verhängte 2025 eine Strafe von 1 Million US-Dollar gegen einen Anbieter wegen irreführender Versprechen.

Was kostet eine barrierefreie Website?

Wird Barrierefreiheit von Anfang an eingeplant, ist sie Teil von Design und Entwicklung und kein großer Zusatzposten. Teuer wird es, wenn eine fertige Website nachträglich umgebaut werden muss. Websites beginnen bei uns bei rund 5.000 € netto, den genauen Preis bestimmen Umfang und Funktionen. Für eine unabhängige Prüfung nach BIK BITV-Test nennt der Anbieter als Beispiel 4.200 € netto für sieben Seiten plus Grundgebühr.

Wie lange dauert es, eine barrierefreie Website zu erstellen?

Bei einem Neubau verlängert eingeplante Barrierefreiheit die Projektzeit kaum, eine Website ist bei uns in 4 bis 6 Wochen live. Für eine externe Prüfung nach BIK BITV-Test nennt der Anbieter rund 4 bis 6 Wochen. Inhalte in Leichter Sprache oder Gebärdensprache brauchen zusätzlich Vorlauf.