Barrierefreies Webdesign: Pflicht, Checkliste und Test Ihrer Website

Seit dem 28. Juni 2025 ist Barrierefreiheit im Netz für einen großen Teil der Wirtschaft kein freundliches Extra mehr, sondern eine Anforderung mit Gesetzestext dahinter. Trotzdem scheitert nach wie vor die überwiegende Mehrheit aller Startseiten an den grundlegendsten Prüfkriterien – meist an Kleinigkeiten, die in einer Stunde behoben wären. Dieser Artikel erklärt Ihnen, was barrierefreies Webdesign konkret bedeutet, wen die Pflicht trifft, wie Sie Ihre eigene Website testen und was die Umsetzung realistisch kostet. Am Ende des Testkapitels finden Sie ein Werkzeug, mit dem Sie Ihre Seite sofort prüfen können.

Was bedeutet eine barrierefreie Website?

Eine barrierefreie Website ist eine Website, die sich unabhängig von den Fähigkeiten und der Technik ihrer Besucher bedienen lässt. Das schließt Menschen ein, die nicht sehen und deshalb einen Screenreader verwenden, der ihnen den Quelltext vorliest. Menschen, die keine Maus führen können und sich mit der Tabulatortaste durch die Seite bewegen. Menschen mit starker Sehschwäche, die auf 200 Prozent zoomen. Menschen mit einer Rot-Grün-Schwäche, für die eine rot markierte Fehlermeldung schlicht nicht existiert. Und Menschen mit kognitiven Einschränkungen, denen ein verschachtelter Behördensatz den Zugang zur Information verstellt.

Der entscheidende Punkt: Barrierefreiheit ist keine zusätzliche Funktion, die man einer fertigen Website nachträglich anschraubt. Sie ist eine Eigenschaft des Quelltextes. Ein Button, der als <div> gebaut wurde, ist für die Tastatur nicht erreichbar – unabhängig davon, wie er aussieht. Ein Formularfeld ohne Label bleibt ein namenloses Eingabefeld, auch wenn daneben in grauer Schrift steht, was hineingehört.

Die vier Grundprinzipien der WCAG

Der weltweite Maßstab für barrierefreies Webdesign sind die Web Content Accessibility Guidelines (WCAG) des W3C. Sie ordnen alle Anforderungen vier Prinzipien zu, die im Englischen das Kürzel POUR ergeben:

• Wahrnehmbar: Jede Information muss über mehr als einen Sinneskanal zugänglich sein. Bilder brauchen Alternativtexte, Videos Untertitel, Farben eine zweite Auszeichnung neben der Farbe.
• Bedienbar: Alles, was mit der Maus geht, muss auch mit der Tastatur gehen. Nichts darf unter Zeitdruck stehen, nichts darf blitzen, und der Nutzer muss jederzeit wissen, wo er sich befindet.
• Verständlich: Sprache, Navigation und Verhalten der Seite müssen vorhersehbar sein. Formularfehler werden benannt, nicht nur eingefärbt.
• Robust: Der Quelltext muss so sauber sein, dass ihn auch assistive Technik korrekt interpretiert – heute und in fünf Jahren.

Konformitätsstufen: A, AA und AAA

Die WCAG teilen ihre Erfolgskriterien in drei Stufen ein. Für die Praxis in Deutschland ist ausschließlich die mittlere Stufe relevant: Sowohl die BITV 2.0 für öffentliche Stellen als auch die europäische Norm EN 301 549, auf die sich das Barrierefreiheitsstärkungsgesetz stützt, verlangen Stufe AA.

Stufe	Anspruch	Beispiel	Praxisrelevanz
A	Mindestanforderung	Bilder haben Alternativtexte, die Seite ist per Tastatur bedienbar	Notwendig, aber nicht ausreichend
AA	Gesetzlicher Maßstab	Kontrastverhältnis mindestens 4,5:1, Zoom auf 200 % ohne Informationsverlust, sichtbarer Tastaturfokus	Das ist Ihr Ziel
AAA	Höchststufe	Kontrast 7:1, Gebärdensprachvideos, Erklärung ungewöhnlicher Wörter	Kein Gesetz verlangt sie flächendeckend

Aktuell gilt in der harmonisierten Fassung der EN 301 549 der Verweis auf die WCAG in Version 2.1. Die Version 2.2 ist seit Oktober 2023 veröffentlicht und ergänzt vor allem Kriterien zur Bedienung mit Maus und Touch sowie zur Hilfe bei Formularen. Wer heute neu baut, sollte gleich gegen WCAG 2.2 AA prüfen – der Aufwand ist minimal, und die Norm zieht ohnehin nach.

Wen es betrifft – und warum das mehr Menschen sind, als Sie vermuten

In Deutschland leben rund acht Millionen Menschen mit einer anerkannten Schwerbehinderung. Das ist aber nur der harte Kern. Dazu kommen alle, die eine Lesebrille brauchen, alle mit einer Farbfehlsichtigkeit (rund acht Prozent der Männer), alle mit einem gebrochenen Arm, alle, die in der Bahn ohne Ton ein Video schauen, und alle, die ihre Website-Schrift auf 125 Prozent gestellt haben, weil der Monitor groß und weit weg ist.

Barrierefreiheit ist deshalb kein Randgruppenthema, sondern in weiten Teilen schlicht gute Handwerksarbeit. Der praktische Nebeneffekt: Fast alles, was einer Website Barrierefreiheit bringt – sauberes HTML, sinnvolle Überschriftenstruktur, aussagekräftige Linktexte, beschriftete Formulare – hilft auch Suchmaschinen. Ein Screenreader und ein Crawler lesen dieselbe Seite auf ziemlich ähnliche Weise.

Barrierefreie Website: Pflicht oder freiwillig? Die Gesetzeslage

Ob eine barrierefreie Website für Sie Pflicht ist, hängt an zwei Fragen: Sind Sie eine öffentliche Stelle? Und wenn nicht: Bieten Sie Verbrauchern eine Dienstleistung an, die unter das Barrierefreiheitsstärkungsgesetz fällt? Die beiden Regelwerke sind getrennt und stellen unterschiedliche Anforderungen.

Öffentliche Stellen: BITV 2.0

Behörden, Ministerien, Hochschulen, gesetzliche Krankenkassen, öffentlich-rechtliche Rundfunkanstalten und überwiegend öffentlich finanzierte Einrichtungen sind über das Behindertengleichstellungsgesetz und die Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) schon seit Jahren verpflichtet. Grundlage ist die EU-Richtlinie 2016/2102, umgesetzt in Bund und Ländern. Verlangt werden dort:

• Websites, Intranets und mobile Anwendungen nach EN 301 549, also im Kern WCAG 2.1 auf Stufe AA
• eine Erklärung zur Barrierefreiheit, die den Stand offen benennt – inklusive der Bereiche, die noch nicht barrierefrei sind
• ein Feedback-Mechanismus, über den Nutzer Barrieren melden können, sowie der Hinweis auf die zuständige Schlichtungsstelle
• auf der Startseite Erläuterungen in Leichter Sprache und in Deutscher Gebärdensprache

Privatwirtschaft: das Barrierefreiheitsstärkungsgesetz (BFSG)

Für Unternehmen gilt seit dem 28. Juni 2025 das Barrierefreiheitsstärkungsgesetz (BFSG). Es setzt die europäische Richtlinie 2019/882 – den European Accessibility Act – in deutsches Recht um; die technischen Anforderungen stehen in der zugehörigen Verordnung (BFSGV). Wer die harmonisierte Norm EN 301 549 einhält, kann sich auf die Konformitätsvermutung stützen: Man muss nicht nachweisen, dass die eigene Lösung barrierefrei ist, wenn man die Norm erfüllt.

Der wichtigste und am häufigsten missverstandene Punkt: Das BFSG verpflichtet nicht jede Website in Deutschland. Es erfasst bestimmte Produkte und bestimmte Dienstleistungen an Verbraucher. Ein reines Business-to-Business-Angebot fällt nicht darunter, eine reine Visitenkartenseite ohne Vertragsabschluss in der Regel ebenfalls nicht.

Wen die Pflicht konkret trifft

Fall	BFSG-pflichtig?	Begründung
Onlineshop für Endkunden	Ja	Dienstleistung im elektronischen Geschäftsverkehr – der Klassiker
Buchungs- oder Terminstrecke für Verbraucher	Ja	Vertragsabschluss auf elektronischem Weg mit Verbrauchern
Bank-, Zahlungs- und Versicherungsdienste für Verbraucher	Ja	Ausdrücklich im Gesetz genannt
E-Books, E-Book-Software und deren Verkauf	Ja	Ausdrücklich genannt, samt Lesegeräten
Telekommunikationsdienste, Messenger	Ja	Ausdrücklich genannt
Elemente des Personenverkehrs (Tickets, Fahrplanauskunft, Terminals)	Ja	Ausdrücklich genannt
Reine Imageseite ohne Bestell- oder Buchungsfunktion	Meist nein	Keine erfasste Dienstleistung – wirtschaftlich trotzdem sinnvoll
Reines B2B-Angebot ohne Verbrauchergeschäft	Nein	Das Gesetz zielt auf Verbraucher
Website einer Behörde oder Hochschule	Ja	Fällt bereits unter BITV 2.0 – und zwar strenger

Die Ausnahme für Kleinstunternehmen

Das BFSG nimmt Kleinstunternehmen von den Pflichten bei Dienstleistungen aus. Als Kleinstunternehmen gilt, wer weniger als 10 Beschäftigte hat und einen Jahresumsatz oder eine Jahresbilanzsumme von höchstens 2 Millionen Euro. Beide Bedingungen müssen zusammen erfüllt sein.

Übergangsfristen

Das Gesetz kennt Übergangsregelungen, die aber schmaler sind, als es oft dargestellt wird. Dienstleistungserbringer dürfen Produkte, die sie vor dem 28. Juni 2025 rechtmäßig eingesetzt haben, grundsätzlich noch bis zum 27. Juni 2030 weiterverwenden. Für Selbstbedienungsterminals gibt es je nach Inbetriebnahme längere Fristen. Für die Website selbst gilt diese Schonfrist nicht: Eine Dienstleistung, die heute erbracht wird, muss heute barrierefrei sein.

Was bei Verstößen droht

Zuständig ist die Marktüberwachungsstelle der Länder für die Barrierefreiheit von Produkten und Dienstleistungen (MLBF) mit Sitz in Magdeburg. Sie wird sowohl von Amts wegen als auch auf Hinweis von Verbrauchern tätig. Der Ablauf ist gestuft: Prüfung, Aufforderung zur Mängelbeseitigung, Fristsetzung. Erst wenn nichts passiert, folgen Maßnahmen – bis hin zur Untersagung der Dienstleistung. Bußgelder sind je nach Verstoß bis zu 100.000 Euro möglich. Dazu kommt das praktische Risiko: Verbände und Mitbewerber können abmahnen, und ein öffentlich dokumentierter Verstoß ist in keiner Branche gute Werbung.

Barrierefreie Website testen: So prüfen Sie Ihre Seite

Bevor Sie über Maßnahmen nachdenken, brauchen Sie einen Befund. Die gute Nachricht: Ein erster, belastbarer Eindruck ist in wenigen Minuten zu haben. Der Einstieg ist immer ein automatischer Test – er findet die mechanischen Fehler, die sich zuverlässig aus dem Quelltext ablesen lassen.

Der Check liest den ausgelieferten Quelltext Ihrer Seite und prüft ihn gegen 25 Regeln, die sich direkt auf WCAG-Erfolgskriterien zurückführen lassen: fehlende Alternativtexte, namenlose Schaltflächen, unbeschriftete Formularfelder, unterbundenes Zoomen, Überschriften mit Lücken, fehlende Seitenbereiche und einiges mehr. Zu jedem Befund steht dabei, was er bedeutet und was zu tun ist.

Was automatische Tests leisten – und was nicht

Kein Werkzeug der Welt prüft Barrierefreiheit vollständig. Je nach Untersuchung finden automatische Tests etwa 30 bis 40 Prozent der tatsächlichen Probleme. Der Grund ist einleuchtend: Ein Programm kann feststellen, dass ein Bild einen Alternativtext hat – ob dieser Text das Bild sinnvoll beschreibt, kann es nicht beurteilen. Es kann prüfen, ob eine Überschriftenebene übersprungen wurde – ob die Überschrift zum Absatz darunter passt, nicht.

Ein automatischer Test ist deshalb ein Rauchmelder, keine Brandschutzprüfung. Wenn er anschlägt, gibt es definitiv etwas zu tun. Wenn er schweigt, heißt das nur, dass die offensichtlichen Fehler weg sind. Die folgenden drei Tests machen Sie danach selbst – sie kosten nichts und finden mehr als jedes Werkzeug.

Test 1: Der Tastaturtest (fünf Minuten)

Legen Sie die Maus weg. Öffnen Sie Ihre Startseite und arbeiten Sie sich ausschließlich mit Tab, Shift+Tab, Enter und der Leertaste durch. Achten Sie auf vier Dinge:

• Sehen Sie jederzeit, wo Sie sind? Wenn der Fokus irgendwann unsichtbar wird, ist die Seite für Tastaturnutzer unbedienbar.
• Ist die Reihenfolge logisch? Der Fokus muss dem Lesefluss folgen und darf nicht quer über die Seite springen.
• Kommen Sie überall hin und wieder heraus? Besonders Menüs, Karussells, Cookie-Banner und Modals sind berüchtigt für Fokusfallen, aus denen man ohne Maus nicht mehr herausfindet.
• Funktioniert alles? Jedes Element, das auf einen Klick reagiert, muss auch auf Enter oder die Leertaste reagieren.

Erfahrungsgemäß fällt jede zweite Website spätestens beim Cookie-Banner durch. Das ist besonders bitter, weil der Banner das Erste ist, was der Nutzer erreicht – und weil er oft alles dahinter blockiert.

Test 2: Zoom auf 200 Prozent

Drücken Sie fünfmal Strg und +. Auf 200 Prozent Vergrößerung muss der gesamte Inhalt weiterhin lesbar und bedienbar sein, ohne dass Sie waagerecht scrollen müssen. Typische Fehler: Text, der aus seinem Kasten läuft, überlappende Elemente, ein Menü, das nicht mehr erreichbar ist, oder fest in Pixeln gesetzte Höhen, die den Text abschneiden.

Test 3: Eine Stichprobe mit dem Screenreader

Für Windows gibt es NVDA kostenlos, macOS und iOS bringen VoiceOver mit, Android TalkBack. Sie müssen nicht lernen, damit zu arbeiten wie ein blinder Nutzer – es reicht, sich die wichtigste Strecke Ihrer Seite vorlesen zu lassen: Startseite, ein Produkt oder eine Leistung, das Kontaktformular. Sie werden innerhalb von zwei Minuten hören, wo es hakt. Meistens ist es dieselbe Stelle, an der auch die Tastatur gescheitert ist.

Werkzeuge für die tägliche Arbeit

Werkzeug	Art	Wofür es gut ist
axe DevTools	Browser-Erweiterung	Der De-facto-Standard für automatische Prüfung im Browser, sehr wenige Fehlalarme
WAVE	Browser-Erweiterung / Web	Zeigt Befunde direkt im Layout – gut, um Kollegen ohne Technikhintergrund das Problem zu zeigen
Lighthouse	In Chrome eingebaut	Schneller Überblick samt Performance und SEO; deckt nur einen Teil der Kriterien ab
Accessibility Insights	Browser-Erweiterung	Führt durch die manuellen Prüfschritte, die kein Werkzeug automatisieren kann
NVDA	Screenreader (Windows)	Kostenlos, weit verbreitet – die Realitätsprobe
Colour Contrast Analyser	Desktop-Programm	Misst Kontraste zuverlässig, auch bei Text auf Bildern
axe-core in der CI	Testautomatisierung	Verhindert, dass behobene Fehler beim nächsten Release zurückkommen

Checkliste: barrierefreie Website in 15 Punkten

Diese Checkliste deckt die Fehler ab, die mir in der Praxis am häufigsten begegnen. Sie ersetzt keine vollständige Prüfung gegen alle Erfolgskriterien der WCAG, aber wer diese fünfzehn Punkte sauber abhakt, hat den weitaus größten Teil der realen Barrieren beseitigt.

Struktur und Quelltext

• 1. Sprache ist ausgezeichnet. <html lang="de">, fremdsprachige Passagen mit eigenem lang-Attribut.
• 2. Genau eine h1 pro Seite, danach lückenlos h2, h3 und so weiter. Überschriften sind Struktur, nicht Schriftgröße.
• 3. Seitenbereiche sind ausgezeichnet: header, nav, main, footer statt einer Wüste aus div-Elementen.
• 4. Ein Sprunglink zum Inhalt steht als erstes Element im body und wird bei Tastaturfokus sichtbar.
• 5. Jede Seite hat einen eigenen, aussagekräftigen Titel.

Sehen und Lesen

• 6. Kontrast mindestens 4,5:1 für normalen Text, 3:1 für große Schrift sowie für Bedienelemente und deren Zustände.
• 7. Farbe ist nie das einzige Merkmal. Fehler bekommen einen Text, Pflichtfelder eine Beschriftung, Diagramme eine Legende oder Beschriftung an der Linie.
• 8. Zoom bis 200 Prozent funktioniert ohne waagerechtes Scrollen und ohne abgeschnittenen Text. Relative Einheiten statt fester Pixelhöhen.
• 9. Alle Bilder haben ein alt-Attribut. Aussagekräftige Bilder bekommen eine Beschreibung, rein dekorative ein leeres alt="".

Bedienen

• 10. Alles ist per Tastatur erreichbar und wieder verlassbar – einschließlich Menü, Slider, Modal und Cookie-Banner.
• 11. Der Fokus ist immer deutlich sichtbar. outline: none ohne Ersatz ist der häufigste vermeidbare Fehler überhaupt.
• 12. Linktexte sagen, wohin sie führen. Zehnmal „mehr erfahren“ ist in der Linkliste eines Screenreaders wertlos.
• 13. Formularfelder haben echte Labels mit passendem for-Attribut. Ein Platzhalter ist kein Label.
• 14. Fehlermeldungen benennen das Problem im Klartext und stehen beim betroffenen Feld, nicht nur als roter Rahmen.

Medien und Organisation

• 15. Videos haben Untertitel, Audioinhalte ein Transkript, und nichts startet ungefragt mit Ton. Dazu: eine Erklärung zur Barrierefreiheit mit einem Weg, Barrieren zu melden.

Barrierefreie Website erstellen: die Umsetzung

Der größte Hebel liegt nicht in Spezialwissen, sondern in einer einzigen Haltung: Verwenden Sie das HTML-Element, das für die Aufgabe gedacht ist. Der weitaus größte Teil aller Barrieren entsteht dadurch, dass Entwickler Bedienelemente aus div– und span-Elementen nachbauen und dabei alles verlieren, was der Browser sonst gratis mitliefert.

Semantisches HTML: der größte Hebel

Vergleichen Sie diese beiden Schaltflächen. Sie sehen mit dem passenden CSS identisch aus:

<!-- Falsch: sieht aus wie ein Button, ist aber keiner. -->
<!-- Nicht fokussierbar, reagiert nicht auf Enter, wird als "Text" vorgelesen. -->
<div class="button" onclick="senden()">Absenden</div>

<!-- Richtig: Fokus, Tastaturbedienung und Rolle kommen vom Browser. -->
<button type="submit">Absenden</button>

Dasselbe gilt für Links (a statt eines klickbaren div), Auf- und Zuklappbares (details/summary), Tabellen (th mit scope) und Formulare (label, fieldset, legend). Jedes dieser Elemente bringt Rolle, Zustand, Tastaturverhalten und Fokusreihenfolge von sich aus mit.

Farben und Kontraste

Prüfen Sie Kontraste einmal grundsätzlich in Ihrem Design-System, nicht Seite für Seite. In der Praxis scheitern fast immer dieselben drei Stellen: helle Graustufen für Hilfstexte, die Hausfarbe als Textfarbe auf Weiß, und weißer Text auf einem hellen Verlauf oder Foto. Eine Marke bleibt eine Marke, auch wenn ihr Blau für Fließtext eine Nuance dunkler wird – auf dieser Website ist genau das der Grund, warum es zur Akzentfarbe eine dunklere Variante gibt.

Tastaturbedienung und sichtbarer Fokus

Der Fokusrahmen des Browsers ist selten schön, aber er ist funktional. Wenn er nicht ins Design passt, ersetzen Sie ihn – entfernen Sie ihn nicht:

/* Falsch: nimmt Tastaturnutzern jede Orientierung. */
:focus { outline: none; }

/* Richtig: eigener Fokusstil, nur wenn er gebraucht wird. */
:focus-visible {
    outline: 3px solid #005f88;
    outline-offset: 2px;
}

:focus-visible greift nur bei Tastaturbedienung, nicht beim Mausklick – damit ist der ästhetische Einwand gegen den Fokusrahmen praktisch erledigt.

Formulare

Formulare entscheiden über Ihre Anfragen, deshalb lohnt sich hier die meiste Sorgfalt. Jedes Feld braucht ein label mit passendem for. Zusammengehörende Optionen kommen in ein fieldset mit legend. Fehlermeldungen gehören als Text an das betroffene Feld und werden über aria-describedby mit ihm verknüpft. Und die Fehlerzusammenfassung sollte nach dem Absenden den Fokus bekommen – sonst merkt ein Screenreader-Nutzer gar nicht, dass etwas schiefgegangen ist.

Bilder, Videos und PDFs

Für Alternativtexte gibt es eine einfache Faustregel: Beschreiben Sie, was Sie am Telefon sagen würden, wenn Ihr Gegenüber das Bild nicht sieht. Trägt das Bild keine Information, gehört ein leeres alt="" hinein – das ist ausdrücklich richtig und nicht etwa nachlässig. Videos brauchen Untertitel; automatisch erzeugte sind ein Anfang, aber erst nach Korrektur eine Lösung.

Der wunde Punkt fast jeder Website sind PDF-Dateien. Preislisten, Formulare, Speisekarten und Datenblätter sind praktisch nie barrierefrei – und sie zählen mit. Der pragmatischste Weg ist meistens, den Inhalt als normale HTML-Seite anzubieten und das PDF nur noch als Download danebenzustellen. Das ist zusätzlich besser für Mobilgeräte und für die Suchmaschine.

ARIA: so wenig wie möglich

ARIA-Attribute können assistiver Technik zusätzliche Informationen geben. Sie werden aber massenhaft falsch eingesetzt, und dann richten sie mehr Schaden an, als sie nutzen. Die erste Regel von ARIA lautet wörtlich: Verwenden Sie kein ARIA, wenn es ein passendes HTML-Element gibt. Ein <div role="button" tabindex="0"> mit nachgebauter Tastaturlogik ist bestenfalls so gut wie ein <button> – nur mit deutlich mehr Code und mehr Fehlerquellen.

Barrierefreiheit in WordPress

WordPress selbst ist eine solide Grundlage: Der Core folgt eigenen Accessibility-Coding-Standards, und die Block-Ausgabe ist in den Grundzügen sauber. In meiner Arbeit mit WordPress kommen die Barrieren fast immer von außen dazu:

• Themes und Page Builder. Viele populäre Themes bauen Menüs, Slider und Tabs aus div-Elementen. Achten Sie auf das Schlagwort „accessibility-ready“ im offiziellen Theme-Verzeichnis – das ist geprüft und keine Selbstauskunft.
• Cookie-Banner. Der häufigste Totalausfall: nicht per Tastatur bedienbar, kein Fokus im Dialog, „Ablehnen“ als kontrastschwacher Text neben einem großen bunten Button.
• Formular-Plugins. Prüfen Sie, ob wirklich label-Elemente ausgegeben werden und ob Fehlermeldungen mit dem Feld verknüpft sind – viele Plugins liefern nur Platzhalter und farbige Rahmen.
• Slider und Karussells. Automatisch weiterlaufende Slider verstoßen gegen das Kriterium zu bewegten Inhalten und sind fast immer verzichtbar.
• Redaktionelle Gewohnheiten. Überschriften nach Optik statt nach Hierarchie wählen, Text als Bild einbinden, „hier klicken“ verlinken – das sind Schulungsthemen, keine Technikthemen.

Der teuerste Irrtum: Accessibility-Overlays

Irgendwann in diesem Prozess wird Ihnen jemand ein Skript anbieten, das Barrierefreiheit angeblich per Klick herstellt: ein kleines Symbol am Bildrand, dahinter ein Menü mit Kontrastmodus, Schriftvergrößerung und Vorlesefunktion, ab ein paar Dutzend Euro im Monat. Das klingt nach der Lösung für ein unangenehmes Problem. Es ist keine.

Ein Overlay legt sich über die Seite, statt sie zu reparieren. Der Quelltext darunter bleibt unverändert – und damit bleiben auch die Barrieren. Ein Button ohne Namen bekommt durch das Overlay keinen Namen. Ein Formularfeld ohne Label bleibt unbeschriftet. Schlimmer noch: Weil das Skript in die Seite eingreift, stört es die Hilfsmittel, die Betroffene ohnehin schon installiert und eingerichtet haben.

Betroffenenverbände und Fachleute raten seit Jahren einhellig davon ab; in Umfragen unter Screenreader-Nutzern schneiden Overlays regelmäßig schlecht ab. In den USA sind Seiten, die ein Overlay einsetzen, in großer Zahl verklagt worden – teils gerade deshalb. Und Anfang 2025 verhängte die US-Handelsaufsicht FTC gegen einen der bekanntesten Anbieter eine Millionenstrafe wegen irreführender Werbeaussagen.

Was kostet barrierefreies Webdesign?

Der Aufwand hängt fast vollständig vom Zustand der Ausgangsbasis ab. Eine Website mit sauberem, semantischem HTML lässt sich in ein paar Tagen auf Stufe AA bringen. Eine, die aus verschachtelten Page-Builder-Elementen besteht, kann in der Summe teurer werden als ein Neubau. Die folgenden Spannen sind Erfahrungswerte aus meinen Projekten – zur Einordnung der Gesamtkosten hilft der Artikel Was kostet eine Website?:

Ausgangslage	Typischer Aufwand	Was dabei passiert
Neue Website, von Anfang an barrierefrei geplant	0 bis 10 % Mehraufwand	Semantisches Markup, geprüfte Farbpalette, Tastaturtests im laufenden Projekt – kaum mehr Arbeit als sauberes Handwerk ohnehin bedeutet
Bestehende Website, technisch solide	1 bis 3 Tage	Audit, Alt-Texte, Labels, Kontraste, Fokusstile, Sprunglink – die klassische Nacharbeit
Bestehende Website mit Page Builder	3 bis 10 Tage	Zusätzlich Menü, Slider, Tabs und Cookie-Banner ersetzen oder umbauen
Onlineshop mit Bestell- und Zahlungsstrecke	ab 5 Tagen aufwärts	Die Kaufstrecke ist der kritische Pfad und braucht eigene Tests mit Screenreader und Tastatur
Audit ohne Umsetzung	0,5 bis 2 Tage	Priorisierter Befundbericht, mit dem Ihr Team selbst weiterarbeiten kann

Wichtiger als jede Tagespauschale ist die Reihenfolge. Beginnen Sie mit den Barrieren, die Menschen komplett aussperren – nicht bedienbare Formulare, unerreichbare Menüs, Fokusfallen. Danach kommen die Punkte, die die Nutzung erschweren, und erst zum Schluss die Feinarbeit. Wer alles auf einmal will, macht meist gar nichts. Steht ohnehin ein Relaunch an, ist das der günstigste Moment: Dann kostet Barrierefreiheit fast nichts extra.

Erklärung zur Barrierefreiheit: was hineingehört

Für öffentliche Stellen ist die Erklärung zur Barrierefreiheit Pflicht und in ihrem Aufbau vorgegeben. Für Unternehmen nach dem BFSG gehören Informationen zur Barrierefreiheit der Dienstleistung in die Allgemeinen Geschäftsbedingungen beziehungsweise die Angaben zur Dienstleistung. Unabhängig von der Rechtslage ist eine eigene, verlinkte Seite die beste Lösung – sie zeigt, dass das Thema ernst genommen wird, und gibt Betroffenen einen Weg zu Ihnen. Hinein gehören:

• Der Stand der Barrierefreiheit: vollständig, teilweise oder nicht konform – und ehrlich benannt, welche Bereiche noch nicht so weit sind.
• Die Gründe für die nicht barrierefreien Teile und, falls vorhanden, eine barrierefreie Alternative (etwa: Preisliste als HTML-Seite statt nur als PDF).
• Ein Kontaktweg zum Melden von Barrieren mit einer Zusage, wie schnell Sie antworten – und dieser Weg selbst muss barrierefrei sein.
• Das Datum der letzten Überprüfung und wie geprüft wurde (Selbsttest oder externe Prüfung).
• Bei öffentlichen Stellen zusätzlich der Hinweis auf die zuständige Schlichtungsstelle.

Häufige Fragen zu barrierefreiem Webdesign

Was bedeutet eine barrierefreie Website genau?

Dass alle Inhalte und Funktionen unabhängig von körperlichen Fähigkeiten und eingesetzter Technik nutzbar sind: mit Screenreader, nur per Tastatur, bei starker Sehschwäche, bei Farbfehlsichtigkeit und bei motorischen Einschränkungen. Technischer Maßstab sind die WCAG auf Stufe AA, die in Deutschland über die BITV 2.0 und über die Norm EN 301 549 rechtliche Wirkung entfalten.

Ist eine barrierefreie Website Pflicht?

Für öffentliche Stellen seit Jahren, ohne Ausnahme. Für Unternehmen seit dem 28. Juni 2025 über das Barrierefreiheitsstärkungsgesetz – aber nur, wenn Sie erfasste Produkte oder Dienstleistungen an Verbraucher anbieten. Ein Onlineshop ist praktisch immer betroffen, eine reine Imageseite ohne Bestell- oder Buchungsfunktion in der Regel nicht. Kleinstunternehmen mit weniger als 10 Beschäftigten und höchstens 2 Millionen Euro Umsatz sind bei Dienstleistungen ausgenommen.

Wie kann ich meine Website auf Barrierefreiheit testen?

In drei Schritten: Erst ein automatischer Test – zum Beispiel mit dem Check weiter oben in diesem Artikel oder mit axe DevTools im Browser. Dann der Tastaturtest ohne Maus. Zuletzt eine Stichprobe mit einem Screenreader wie NVDA. Die Werkzeuge finden die mechanischen Fehler, die beiden manuellen Tests finden alles Übrige.

Was kostet eine barrierefreie Website?

Von Anfang an mitgeplant kostet Barrierefreiheit fast nichts extra – sie ist dann ein Teil sauberer Arbeit. Nachträglich hängt der Aufwand am Zustand des Quelltextes: bei einer technisch soliden Seite ein bis drei Tage, bei einer Page-Builder-Seite deutlich mehr. Details dazu stehen im Kostenkapitel weiter oben.

Reicht ein barrierefreies WordPress-Theme?

Nein, aber es ist eine gute Grundlage. Ein Theme mit dem Merkmal „accessibility-ready“ liefert saubere Grundstrukturen. Barrieren entstehen anschließend durch Plugins, Cookie-Banner, Formulare, Slider und redaktionelle Gewohnheiten – das Theme kann davon nichts verhindern.

Bringt Barrierefreiheit auch SEO-Vorteile?

Indirekt und deutlich. Saubere Überschriftenhierarchien, aussagekräftige Linktexte, Alternativtexte, semantische Auszeichnung und schnelle, schlanke Seiten sind für Suchmaschinen dieselben Qualitätssignale wie für assistive Technik – genau wie eine schnelle Website. Ein Ranking-Faktor „Barrierefreiheit“ existiert nicht, aber fast jede Maßnahme zahlt auf mehrere davon ein.

Gilt das BFSG auch für bestehende Websites?

Ja. Es gibt keinen Bestandsschutz für Websites. Die Übergangsfrist bis 2030 betrifft Produkte, die vor dem Stichtag rechtmäßig im Einsatz waren – nicht die Dienstleistung, die Sie heute über Ihre Website erbringen.

Was passiert, wenn ich nichts tue?

Sofort passiert meist nichts. Die Marktüberwachungsstelle wird auf Hinweis oder von Amts wegen tätig, fordert zur Beseitigung auf und setzt eine Frist. Erst danach folgen Maßnahmen bis hin zu einem Bußgeld von bis zu 100.000 Euro oder der Untersagung der Dienstleistung. Der wahrscheinlichere Schaden ist allerdings der leisere: Besucher, die Ihr Formular nicht ausfüllen können, beschweren sich nicht – sie kaufen woanders.