Barrierefreiheit im Webdesign: Pflicht, Umsetzung & Checkliste 2026

Stellen Sie sich vor, ein potenzieller Kunde besucht Ihre Website – und kann sie nicht nutzen. Der Kontrast ist zu niedrig, Bilder haben keine Beschreibungen, die Navigation funktioniert nur per Maus. Für rund 10 Millionen Menschen mit Behinderung in Deutschland ist das Alltag. [Quelle 6] Dazu kommen Millionen weitere mit temporären Einschränkungen: ein gebrochener Arm, eine vergessene Brille, grelles Sonnenlicht auf dem Smartphone. Barrierefreiheit im Webdesign betrifft nicht eine Nische. Sie betrifft alle. Und seit dem 28. Juni 2025 ist sie für viele Unternehmen auch rechtlich verpflichtend. [Quelle 1] In diesem Leitfaden erfahren Sie, was das konkret für Ihr Unternehmen bedeutet, welche Maßnahmen Sie umsetzen müssen und wie Barrierefreiheit Ihnen gleichzeitig bei SEO hilft.

Was bedeutet Barrierefreiheit im Webdesign?

Barrierefreiheit – im Englischen „Accessibility" oder kurz a11y – bedeutet, dass eine Website von allen Menschen genutzt werden kann. Unabhängig davon, ob jemand blind ist, eine motorische Einschränkung hat, schlecht hört oder mit kognitiven Herausforderungen lebt. Konkret heißt das: Ein Screenreader kann den Seiteninhalt vorlesen. Die komplette Navigation funktioniert per Tastatur. Videos haben Untertitel. Farben allein transportieren keine Information.

Das klingt nach viel Aufwand. In der Praxis sind es aber oft einfache Maßnahmen, die einen enormen Unterschied machen. Ein korrektes HTML-Heading-System, sinnvolle Alt-Texte für Bilder, ausreichende Farbkontraste – das sind keine revolutionären Eingriffe, sondern Handwerk. Gutes Webdesign war schon immer inklusiv gedacht. Nur haben es viele Unternehmen lange ignoriert. Das Barrierefreiheitsstärkungsgesetz sorgt jetzt dafür, dass „Ignorieren" keine Option mehr ist. [Quelle 4]

Barrierefreie Website Pflicht 2025/2026 – gesetzliche Grundlagen und Ausnahmen

Das Barrierefreiheitsstärkungsgesetz (BFSG) setzt die europäische Richtlinie (European Accessibility Act) in deutsches Recht um. Seit dem 28. Juni 2025 müssen Produkte und Dienstleistungen, die im elektronischen Geschäftsverkehr angeboten werden, barrierefrei zugänglich sein. [Quelle 1] Das betrifft Online-Shops, Buchungsplattformen, Banking-Apps, aber auch Unternehmenswebsites, über die Dienstleistungen verkauft oder vermittelt werden.

Wer ist betroffen? Grundsätzlich alle Unternehmen, die digitale Produkte oder Dienstleistungen an Endverbraucher (B2C) verkaufen. Reine B2B-Angebote ohne direkten Verbraucherkontakt sind ausgenommen.

Welche Ausnahmen gibt es? Kleinstunternehmen mit weniger als 10 Beschäftigten und einem Jahresumsatz oder einer Jahresbilanzsumme von höchstens 2 Millionen Euro können ausgenommen sein – allerdings nur, wenn sie keine Dienstleistungen im elektronischen Geschäftsverkehr erbringen. [Quelle 1] Ein kleiner Online-Shop mit 5 Mitarbeitern fällt also trotzdem unter das BFSG. Außerdem gibt es eine Härtefall-Klausel: Wenn die Umsetzung eine unverhältnismäßige Belastung darstellt, kann eine Ausnahme beantragt werden. Die Beweislast liegt beim Unternehmen.

Bei Verstößen drohen Bußgelder bis zu 100.000 Euro. Zusätzlich können Verbraucherverbände abmahnen. Das Risiko ist real.

Die 4 Prinzipien der Barrierefreiheit (WCAG) einfach erklärt

Die Web Content Accessibility Guidelines (WCAG) sind der internationale Standard für barrierefreie Webinhalte. Das BFSG verweist auf die harmonisierte europäische Norm EN 301 549, die wiederum auf WCAG 2.1 Level AA basiert. [Quelle 2] Die vier Grundprinzipien sind leicht zu merken:

Diese vier Prinzipien sind kein theoretisches Konstrukt. Sie bilden die Struktur, nach der jede einzelne Maßnahme eingeordnet wird. Wenn Sie bei der Umsetzung unsicher sind, fragen Sie sich: Ist dieser Inhalt wahrnehmbar, bedienbar, verständlich und robust? Wenn Sie eine dieser Fragen mit Nein beantworten müssen, gibt es Handlungsbedarf.

Barrierefreies Webdesign Checkliste: 12 konkrete Maßnahmen

Allgemeine Prinzipien sind gut. Konkrete Maßnahmen sind besser. Hier sind 12 Punkte, die Sie bei jedem Webprojekt abarbeiten sollten – mit Hinweisen zur technischen Umsetzung:

1. Semantisches HTML nutzen: Verwenden Sie <nav>, <main>, <article>, <aside> statt nur <div>. Screenreader erkennen so die Seitenstruktur.
2. Überschriften-Hierarchie einhalten: Nur ein <h1> pro Seite, danach logisch <h2>, <h3> etc. Keine Ebenen überspringen.
3. Alt-Texte für alle Bilder: Beschreiben Sie, was das Bild zeigt. Dekorative Bilder bekommen ein leeres alt="".
4. Farbkontrast prüfen: Mindestens 4,5:1 für normalen Text, 3:1 für großen Text. Tools wie der WebAIM Contrast Checker helfen.
5. Tastaturnavigation sicherstellen: Testen Sie Ihre Website komplett ohne Maus. Jedes interaktive Element muss per Tab erreichbar sein.
6. Fokus-Indikatoren sichtbar machen: Entfernen Sie niemals den Browser-Fokus-Rahmen per outline: none ohne Ersatz.
7. ARIA-Attribute gezielt einsetzen: aria-label, aria-expanded, aria-live – aber nur, wenn HTML-Semantik nicht ausreicht. Zu viel ARIA ist schädlich.
8. Formulare korrekt labeln: Jedes <input> braucht ein zugeordnetes <label>. Platzhaltertexte ersetzen kein Label.
9. Videos mit Untertiteln: Idealerweise Untertitel und eine Audiodeskription. Automatische Untertitel sind ein Anfang, aber selten ausreichend.
10. Responsive und zoombar: Text muss bis 200 % vergrößerbar sein, ohne dass Inhalte verloren gehen.
11. Bewegung reduzierbar: Animationen nur abspielen, wenn prefers-reduced-motion nicht gesetzt ist.
12. Sprache deklarieren: <html lang="de"> korrekt setzen, bei fremdsprachigen Absätzen lang-Attribute verwenden.

Diese Liste ist kein Ersatz für einen vollständigen WCAG-Audit. Aber sie deckt die häufigsten Fehler ab, die wir bei Kundenwebsites sehen.

Barrierefreiheit überprüfen: Tools und Testmethoden

Kein Tool ersetzt einen manuellen Test. Aber automatisierte Prüfungen finden schnell die offensichtlichen Probleme. Hier ein Vergleich der wichtigsten Tools für den deutschen Markt:

Unser Rat: Starten Sie mit WAVE und axe für einen schnellen Überblick. Testen Sie dann manuell per Tastatur und mit einem Screenreader (z. B. NVDA für Windows, VoiceOver für Mac). Für die rechtssichere Dokumentation empfiehlt sich ein professioneller BITV-Test.

Barrierefreie Website Beispiele aus der Praxis

Theorie ist das eine, Praxis das andere. Einige Websites machen es vorbildlich: Die Seite der Aktion Mensch (aktion-mensch.de) ist ein häufig zitiertes Beispiel im deutschsprachigen Raum – logische Überschriftenstruktur, hohe Kontraste, komplette Tastaturbedienbarkeit. Auch die Deutsche Bahn hat in den letzten Jahren massiv in die Barrierefreiheit ihres Buchungsportals investiert, mit Fokus auf Screenreader-Kompatibilität und vereinfachte Buchungsstrecken.

Was diese Beispiele gemeinsam haben: Barrierefreiheit wurde nicht nachträglich draufgesetzt, sondern war Teil des Designprozesses von Anfang an. [Quelle 3] Genau das ist der Punkt. Wenn Sie Barrierefreiheit erst nach dem Launch „irgendwie noch einbauen", wird es teurer, fehleranfälliger und oft halbherzig. Wer sie von der ersten Wireframe-Skizze mitdenkt, spart Zeit und Geld.

Was kostet eine barrierefreie Website? Investition und ROI

Die häufigste Frage, die wir bei PAKU Media hören: „Was kostet das?" Die ehrliche Antwort: Es kommt drauf an. Aber wir können Ihnen Orientierungswerte geben.

Bei einem neuen Webprojekt liegt der Mehraufwand für Barrierefreiheit nach WCAG 2.1 AA bei etwa 10–20 % der Gesamtkosten. Bei einer Website, die ohnehin 15.000 Euro kostet, reden wir also über 1.500 bis 3.000 Euro zusätzlich. Das ist überschaubar. Bei einer bestehenden Website nachträglich Barrierefreiheit herzustellen, kann dagegen 30–50 % der ursprünglichen Entwicklungskosten betragen – oft mehr, wenn die Code-Basis chaotisch ist.

Und der ROI? Rechnen Sie so: In Deutschland leben rund 10 Millionen Menschen mit anerkannter Behinderung. [Quelle 6] Dazu kommen ältere Menschen mit nachlassender Sehkraft oder Feinmotorik. Wenn Sie diese Zielgruppen ausschließen, verlieren Sie Umsatz. Gleichzeitig sinkt durch bessere Usability die Absprungrate für alle Nutzer. Und die SEO-Vorteile (dazu gleich mehr) bringen zusätzlichen organischen Traffic. Barrierefreiheit ist keine Ausgabe. Sie ist eine Investition mit messbarem Rückfluss.

Barrierefreiheit und SEO: Warum beides zusammengehört

Hier wird es für viele Unternehmen richtig interessant. Barrierefreiheit und SEO-Optimierung teilen sich eine erstaunlich große Schnittmenge. Denken Sie an das, was Suchmaschinen lieben: saubere HTML-Struktur, beschreibende Alt-Texte, schnelle Ladezeiten, mobile Bedienbarkeit, klare Überschriftenhierarchie. Das ist exakt das, was auch barrierefreie Websites auszeichnet.

Semantisches HTML hilft dem Googlebot, Inhalte richtig einzuordnen. Alt-Texte machen Bilder für die Google Bildersuche auffindbar. Eine logische Heading-Struktur stärkt die thematische Relevanz. Und gute Core Web Vitals – die durch schlanken, barrierefreien Code oft besser ausfallen – sind ein direkter Ranking-Faktor. Barrierefreiheit gehört 2026 zu den wichtigsten Webdesign-Trends, und das nicht nur aus rechtlichen Gründen. [Quelle 5]

Wir sehen bei unseren Kundenprojekten regelmäßig: Websites, die nach WCAG-Standards optimiert werden, verbessern sich parallel in den organischen Rankings. Nicht weil Google Barrierefreiheit direkt misst, sondern weil die zugrundeliegenden technischen Maßnahmen identisch sind. Wer barrierefreies Webdesign macht, macht automatisch besseres SEO. Und wer gutes SEO macht, ist oft schon halb barrierefrei. Beides zusammen zu denken, ist der klügste Ansatz – und genau das tun wir bei PAKU Media für Unternehmen im DACH-Raum.