Wichtiger Hinweis: Dieser Ratgeber erklärt die Grundzüge des Barrierefreiheitsstärkungsgesetzes allgemein und nach bestem Wissen. Er ist keine Rechtsberatung und ersetzt keine Prüfung Ihres Einzelfalls. Ob und in welchem Umfang Ihr Unternehmen betroffen ist, hängt von Ihrem Angebot, Ihren Kunden und Ihrer Unternehmensgröße ab. Bei Unsicherheit klären Sie die Frage mit einer Rechtsanwältin oder einem Rechtsanwalt, idealerweise mit Erfahrung im IT- oder Wettbewerbsrecht.
Was regelt das Barrierefreiheitsstärkungsgesetz?
Das Barrierefreiheitsstärkungsgesetz (BFSG) setzt den European Accessibility Act um, also die Richtlinie (EU) 2019/882 über die Barrierefreiheitsanforderungen für Produkte und Dienstleistungen. Alle EU-Mitgliedstaaten mussten diese Richtlinie in nationales Recht übertragen. In Deutschland gelten die Anforderungen seit dem 28. Juni 2025. Die technischen Details stehen ergänzend in einer Verordnung zum Gesetz (BFSGV).
Neu ist vor allem, wen das Gesetz trifft. Bisher waren Pflichten zur digitalen Barrierefreiheit in Deutschland weitgehend auf öffentliche Stellen beschränkt, etwa über die Barrierefreie-Informationstechnik-Verordnung (BITV 2.0). Mit dem BFSG gelten erstmals verbindliche Anforderungen auch für private Unternehmen, allerdings nicht für alle und nicht für jede Website.
Das Gesetz erfasst bestimmte Produkte und Dienstleistungen, die sich an Verbraucher richten. Zu den Dienstleistungen gehören unter anderem:
- Dienstleistungen im elektronischen Geschäftsverkehr: Angebote, bei denen Verbraucher über eine Website oder App einen Vertrag abschließen. Typisch sind Online-Shops, Online-Buchungen von Terminen, Kursen oder Reisen und Verträge, die vollständig online geschlossen werden.
- Bankdienstleistungen für Verbraucher, etwa Online-Banking und Kontoeröffnung.
- Telekommunikationsdienste, E-Books und die dafür bestimmte Software.
- Bestimmte Elemente der Personenbeförderung, zum Beispiel Websites, Apps und elektronische Tickets von Verkehrsunternehmen.
- Den Zugang zu audiovisuellen Mediendiensten.
Auf der Produktseite geht es um Geräte wie Computer, Smartphones, Geldautomaten, Fahrkartenautomaten oder E-Book-Lesegeräte. Für die meisten mittelständischen Unternehmen ist dieser Teil weniger relevant als die Frage nach dem elektronischen Geschäftsverkehr.
Der entscheidende Begriff ist also nicht „Website“, sondern Verbrauchervertrag über eine Website oder App. Eine Website ist nicht allein deshalb erfasst, weil es sie gibt. Sie ist dann im Fokus, wenn über sie Verträge mit Privatpersonen angebahnt und geschlossen werden.
Wichtig ist außerdem die Ausnahme für Kleinstunternehmen. Unternehmen mit weniger als 10 Beschäftigten und höchstens 2 Millionen Euro Jahresumsatz oder Jahresbilanzsumme sind von den Anforderungen an Dienstleistungen ausgenommen. Für Kleinstunternehmen, die Produkte herstellen oder in Verkehr bringen, gilt diese Ausnahme nicht in gleicher Weise. Wer knapp an der Grenze liegt oder wächst, sollte die eigene Einordnung regelmäßig prüfen.
Überwacht wird die Einhaltung durch die Marktüberwachungsbehörden der Länder, die dafür eine gemeinsame Stelle eingerichtet haben. Sie können Mängel beanstanden, Fristen zur Behebung setzen und in letzter Konsequenz die Einstellung einer Dienstleistung verlangen. Verbraucher und Verbände können die Behörden auf Mängel hinweisen. Ob Verstöße zusätzlich wettbewerbsrechtlich abgemahnt werden können, wird in der Fachdiskussion unterschiedlich beurteilt. Für bestimmte Konstellationen sieht das Gesetz außerdem Übergangsregeln vor, die Sie im Einzelfall prüfen lassen sollten.
Betroffenheits-Check: Muss Ihre Website barrierefrei sein?
Die meisten Geschäftsführer stellen sich drei Fragen: Verkaufen wir an Privatpersonen oder nur an Unternehmen? Wird auf unserer Website ein Vertrag geschlossen oder nur informiert? Und wie groß sind wir? Aus der Kombination ergibt sich eine erste Einschätzung. Die folgende Tabelle ist eine Orientierung, keine verbindliche rechtliche Bewertung.
| Kunden | Vertragsschluss online | Unternehmensgröße | Erste Einschätzung |
|---|---|---|---|
| Verbraucher (B2C) | Ja, z. B. Shop, Buchung, Online-Abo | 10 oder mehr Beschäftigte oder mehr als 2 Mio. Euro Umsatz bzw. Bilanzsumme | Sehr wahrscheinlich betroffen. Der Bestell- oder Buchungsweg muss die Anforderungen erfüllen. |
| Verbraucher (B2C) | Ja | Kleinstunternehmen (unter 10 Beschäftigte und höchstens 2 Mio. Euro) | Von den Dienstleistungsanforderungen ausgenommen. Barrierefreiheit bleibt empfehlenswert. |
| Verbraucher (B2C) | Nein, nur Information, Telefon, Kontaktformular | Beliebig | Nach verbreiteter Einschätzung nicht direkt erfasst. Im Einzelfall prüfen, besonders bei Terminbuchung oder Angebotsanfrage mit verbindlichem Charakter. |
| Verbraucher und Unternehmen gemischt | Ja, Shop steht allen offen | Kein Kleinstunternehmen | Wahrscheinlich betroffen, weil Verbraucher tatsächlich bestellen können. |
| Nur Unternehmen (B2B) | Ja, z. B. B2B-Shop mit Prüfung der Gewerbekunden | Beliebig | In der Regel nicht erfasst, wenn Verbraucher wirksam ausgeschlossen sind. Prüfen, wie zuverlässig dieser Ausschluss ist. |
| Nur Unternehmen (B2B) | Nein, nur Information und Anfrage | Beliebig | Nicht erfasst. Barrierefreiheit kann trotzdem Anforderung von Großkunden oder öffentlichen Auftraggebern sein. |
Drei Situationen verdienen besondere Aufmerksamkeit, weil sie in der Praxis oft falsch eingeschätzt werden.
Der „eigentlich B2B“-Shop
Viele Hersteller und Großhändler sagen „wir verkaufen nur an Gewerbe“, betreiben aber einen Shop, in dem jede Person mit E-Mail-Adresse bestellen kann. Ein Hinweis wie „Nur für Gewerbetreibende“ im Footer reicht dann möglicherweise nicht. Entscheidend ist, ob Verbraucher tatsächlich Verträge schließen können. Lassen Sie prüfen, ob Ihr Registrierungs- und Bestellprozess Verbraucher wirksam ausschließt, oder planen Sie die Barrierefreiheit gleich mit ein.
Die Informationswebsite mit Buchungsfunktion
Eine Physiotherapiepraxis, ein Handwerksbetrieb oder ein Bildungsträger hat eine klassische Unternehmenswebsite, aber mit eingebettetem Buchungstool oder Online-Anmeldung. Der informierende Teil steht dann nach verbreiteter Einschätzung nicht im Mittelpunkt, der Buchungs- oder Anmeldeweg aber sehr wohl. Und für Nutzer beginnt dieser Weg nicht erst im Buchungs-Widget, sondern auf der Seite, von der aus sie es erreichen.
Externe Dienstleister im Bestellprozess
Shop-Systeme, Zahlungsanbieter, Terminbuchungs-Software oder Cookie-Banner stammen meist von Dritten. Verantwortlich gegenüber den Verbrauchern bleibt trotzdem der Anbieter der Dienstleistung, also Sie. Fragen Sie Ihre Software-Anbieter schriftlich, wie ihr Produkt die Anforderungen erfüllt und ob es eine Konformitätsaussage gibt.
Checkliste: Fragen für Ihre Einordnung
- Können Privatpersonen auf unserer Website oder in unserer App einen Vertrag abschließen, etwas kaufen, buchen oder ein Abo starten?
- Prüfen wir vor einer Bestellung zuverlässig, dass es sich um einen Gewerbekunden handelt?
- Liegen wir unter 10 Beschäftigten und gleichzeitig bei höchstens 2 Mio. Euro Umsatz oder Bilanzsumme?
- Welche Teile des Bestell- oder Buchungswegs stammen von Drittanbietern?
- Haben wir Kunden oder Auftraggeber, die Barrierefreiheit vertraglich verlangen, unabhängig vom Gesetz?
Was bedeutet „barrierefrei“ bei einer Website konkret?
Das Gesetz selbst formuliert die Anforderungen allgemein. Den praktischen Maßstab liefert die harmonisierte europäische Norm EN 301 549. Für Websites verweist sie auf die Web Content Accessibility Guidelines (WCAG) 2.1 in der Stufe AA, herausgegeben vom World Wide Web Consortium (W3C). Wer WCAG 2.1 AA erfüllt, erfüllt nach allgemeiner Praxis die technischen Anforderungen an Websites. Inzwischen gibt es die WCAG 2.2, die einige Kriterien ergänzt. Wer heute neu baut, orientiert sich sinnvollerweise gleich an 2.2, weil sie 2.1 vollständig enthält.
Die WCAG ordnen alle Anforderungen vier Prinzipien zu. Diese Prinzipien sind leichter zu verstehen als die einzelnen Erfolgskriterien und helfen, im Alltag die richtigen Fragen zu stellen.
| Prinzip | Was es bedeutet | Alltagsbeispiel |
|---|---|---|
| Wahrnehmbar | Alle Inhalte müssen mit mindestens einem Sinn erfasst werden können. | Eine blinde Kundin hört über ihren Screenreader „Produktfoto: Akku-Bohrschrauber, 18 Volt, mit zwei Akkus im Koffer“ statt nur „Bild“. Ein Kunde mit Sehschwäche kann die hellgraue Preisangabe lesen, weil der Kontrast ausreicht. |
| Bedienbar | Alle Funktionen müssen auch ohne Maus und ohne Zeitdruck nutzbar sein. | Ein Nutzer mit Zittern in der Hand bedient den Shop nur mit der Tastatur. Er kann sich mit der Tab-Taste durch das Menü bewegen, sieht immer, wo er gerade ist, und wird nicht nach zwei Minuten aus dem Warenkorb geworfen. |
| Verständlich | Inhalte und Bedienung müssen nachvollziehbar und vorhersehbar sein. | Ein älterer Kunde füllt das Bestellformular aus, gibt die Postleitzahl falsch ein und erhält die Meldung „Bitte geben Sie eine fünfstellige Postleitzahl ein“ direkt am Feld, statt eines roten Rahmens ohne Erklärung. |
| Robust | Der Code muss so sauber sein, dass auch Hilfstechnologien ihn korrekt auslesen. | Ein selbst gebauter Button aus einem div sieht aus wie ein Button, wird vom Screenreader aber nicht als solcher angesagt. Ein echtes button-Element funktioniert mit jeder Hilfstechnologie. |
Barrierefreiheit betrifft also nicht nur blinde Menschen. Sie betrifft Menschen mit Sehschwäche, Farbfehlsichtigkeit, motorischen Einschränkungen, Hörbehinderung, kognitiven Einschränkungen und Leseschwierigkeiten. Und sie betrifft Situationen, die jeder kennt: das Smartphone in praller Sonne, der gebrochene Arm, das Video im Großraumbüro ohne Kopfhörer.
Barrierefreiheit ist außerdem keine Designfrage allein. Ein Teil der Arbeit liegt im Design (Farben, Schriftgrößen, Abstände, Zustände), ein Teil in der Umsetzung (semantisches HTML, Fokussteuerung, Formularlogik) und ein wesentlicher Teil in der Redaktion (Alternativtexte, verständliche Sprache, Überschriften). Ohne alle drei Seiten wird eine Website nicht barrierefrei.
Welche Mängel sind am häufigsten und wie beheben Sie sie?
Die gute Nachricht: Ein großer Teil der Probleme auf typischen Unternehmenswebsites wiederholt sich. Wer die folgenden acht Bereiche systematisch angeht, beseitigt die meisten Barrieren, auf die Nutzer tatsächlich stoßen.
| Bereich | Typischer Mangel | So beheben Sie ihn | Wer ist zuständig |
|---|---|---|---|
| Kontrast | Hellgraue Schrift auf Weiß, weiße Schrift auf Fotos, blasse Platzhalter in Formularen. | Normaler Text braucht ein Kontrastverhältnis von mindestens 4,5:1, großer Text und Bedienelemente wie Rahmen von Eingabefeldern mindestens 3:1. Farben im Design-System einmal prüfen und festschreiben. | Design |
| Alternativtexte | Bilder ohne Alt-Text, Alt-Texte wie „IMG_4711“ oder „Bild“, Logos ohne Text. | Informative Bilder beschreiben, was für den Zusammenhang wichtig ist. Rein dekorative Bilder erhalten ein leeres Alt-Attribut (alt=""), damit Screenreader sie überspringen. | Redaktion |
| Tastaturbedienung | Menüs öffnen sich nur bei Mausbewegung, Fokus ist unsichtbar, Nutzer bleiben in Slidern oder Pop-ups gefangen. | Alle Funktionen mit Tab, Enter, Leertaste und Pfeiltasten erreichbar machen. Einen deutlich sichtbaren Fokusrahmen gestalten, nicht per CSS entfernen. Logische Reihenfolge sicherstellen. | Entwicklung, Design |
| Formulare | Platzhalter statt Beschriftung, Pflichtfelder nur durch Farbe markiert, Fehlermeldungen ohne Text. | Jedes Feld mit sichtbarem, verknüpftem label. Pflichtfelder in Textform kennzeichnen. Fehlermeldungen konkret und am Feld, mit Hinweis zur Korrektur. Passende Autovervollständigung aktivieren. | Entwicklung, Redaktion |
| Überschriftenstruktur | Überschriften nach Optik gewählt, H1 fehlt oder kommt mehrfach vor, Ebenen werden übersprungen. | Eine H1 pro Seite, darunter H2 und H3 in logischer Gliederung. Größe und Gewicht über CSS steuern, nicht über die Überschriftenebene. | Redaktion, Entwicklung |
| Videos | Imagefilm ohne Untertitel, Autoplay mit Ton, Player nicht per Tastatur bedienbar. | Untertitel für gesprochene Inhalte, bei wichtigen visuellen Informationen eine Audiodeskription oder eine beschreibende Textfassung. Kein Autoplay mit Ton. Barrierefreien Player wählen. | Marketing, Entwicklung |
| PDFs | AGB, Preislisten oder Bestellformulare als eingescannte oder ungetaggte PDFs. | Für den Bestellprozess relevante Informationen als HTML-Seite anbieten. Wo PDFs nötig sind, mit Tags, Lesereihenfolge und Dokumentsprache erzeugen (PDF/UA als Orientierung). | Redaktion, Vertrieb |
| Cookie-Banner | Banner per Tastatur nicht erreichbar, Fokus bleibt dahinter, Buttons schlecht lesbar. | Banner muss beim Laden den Fokus erhalten, per Tastatur vollständig bedienbar sein und ausreichend Kontrast haben. Beim Consent-Anbieter nach Barrierefreiheit fragen und selbst testen. | Entwicklung, Datenschutz |
Konkrete Formulierungen für Alternativtexte
Alternativtexte sind die Stelle, an der Redaktionen am häufigsten unsicher sind. Die Faustregel: Schreiben Sie, was ein Mensch am Telefon sagen würde, wenn er Ihnen das Bild in diesem Zusammenhang beschreiben müsste.
- Schwach: „Produktbild“. Besser: „Edelstahl-Spülbecken mit zwei Becken und Abtropffläche links“.
- Schwach: „Team“. Besser: „Fünf Mitarbeitende des Kundendienstes vor dem Firmengebäude“, oder
alt="", wenn das Bild nur Stimmung erzeugt. - Schwach: „Grafik Lieferzeiten“. Besser: Die Aussage der Grafik in Worten, etwa „Lieferung innerhalb Deutschlands in zwei bis drei Werktagen, nach Österreich und in die Schweiz in vier bis sechs Werktagen“.
- Bei Links und Buttons, die nur aus einem Symbol bestehen: die Funktion beschreiben, also „Warenkorb öffnen“, nicht „Einkaufswagen-Symbol“.
Konkrete Formulierungen für Fehlermeldungen
Fehlermeldungen entscheiden darüber, ob jemand eine Bestellung abschließt. Barrierefrei heißt hier: Text statt Farbe, konkret statt allgemein, direkt am Feld und für Screenreader angesagt. Statt „Ungültige Eingabe“ schreiben Sie „Die E-Mail-Adresse muss ein @-Zeichen enthalten, zum Beispiel name@firma.de“. Statt „Pflichtfeld“ schreiben Sie „Bitte geben Sie Ihre Telefonnummer an, damit wir Sie bei Rückfragen zur Lieferung erreichen“. Mehr zu Feldern, Layout und Formulierungen finden Sie im Ratgeber Formular Optimierung: Fields, Layout und Microcopy.
Auch die Schrift spielt eine Rolle. Zu kleine Grundschriftgrößen, sehr dünne Schnitte und lange Zeilen erschweren das Lesen erheblich. Hinweise zur Auswahl lesbarer Schriften gibt der Ratgeber zur Typografie für B2B-Websites. Bei PDFs, die Sie ohnehin pflegen, lohnt der Blick in den Ratgeber zu Datenblatt-SEO und PDFs, denn sauber strukturierte PDFs sind für Suchmaschinen und Screenreader gleichermaßen besser lesbar.
Was gehört in die Erklärung zur Barrierefreiheit?
Viele Unternehmen haben von der „Erklärung zur Barrierefreiheit“ gehört, weil öffentliche Stellen sie nach der BITV 2.0 veröffentlichen müssen. Für Unternehmen, die unter das BFSG fallen, ist die Pflicht etwas anders gefasst: Dienstleister müssen Informationen darüber bereitstellen, wie ihre Dienstleistung die Barrierefreiheitsanforderungen erfüllt. Diese Informationen sind nach dem Gesetz in den Allgemeinen Geschäftsbedingungen oder auf andere deutlich wahrnehmbare Weise zugänglich zu machen, und sie müssen selbst barrierefrei sein.
In der Praxis hat sich eine eigene Seite bewährt, die im Footer verlinkt ist, etwa unter „Barrierefreiheit“, und auf die Ihre AGB verweisen. Der genaue Pflichtinhalt ergibt sich aus dem Gesetz und seiner Anlage. Als Orientierung enthalten gute Erklärungen folgende Bausteine:
- Beschreibung der Dienstleistung in allgemein verständlicher Sprache: was Kunden auf der Website tun können, zum Beispiel Produkte auswählen, bestellen, bezahlen, Termine buchen.
- Erläuterungen zur Durchführung, also wie die Dienstleistung genutzt wird, soweit das für das Verständnis nötig ist.
- Beschreibung, wie die Anforderungen erfüllt werden, etwa der zugrunde gelegte Standard (EN 301 549, WCAG 2.1 AA) und die wichtigsten Merkmale: Tastaturbedienung, Alternativtexte, Untertitel, Kontraste.
- Bekannte Einschränkungen, ehrlich benannt, mit Angabe, bis wann sie behoben werden sollen oder welche Alternative es gibt, etwa Bestellung per Telefon oder E-Mail.
- Kontaktmöglichkeit für Rückmeldungen zu Barrieren, mit E-Mail-Adresse und Telefonnummer.
- Hinweis auf die zuständige Marktüberwachungsbehörde, an die sich Verbraucher wenden können.
- Datum der letzten Prüfung und Methode, zum Beispiel Selbstbewertung oder Prüfung durch externe Fachleute.
Ein Beispiel für eine nüchterne, ehrliche Formulierung bei bekannten Einschränkungen: „Die Produktvideos auf unseren Kategorieseiten haben derzeit noch keine Untertitel. Wir ergänzen sie bis Ende des nächsten Quartals. Die Inhalte der Videos finden Sie bis dahin als Text in der jeweiligen Produktbeschreibung.“
Vermeiden Sie Pauschalaussagen wie „Unsere Website ist vollständig barrierefrei“, wenn Sie das nicht geprüft haben. Eine Erklärung, die offensichtlich nicht stimmt, ist eher ein Risiko als ein Schutz.
Wie testen Sie Ihre Website selbst auf Barrierefreiheit?
Eine vollständige Prüfung nach WCAG 2.1 AA ist Arbeit für Fachleute. Einen belastbaren ersten Eindruck verschaffen Sie sich aber an einem Nachmittag selbst, mit kostenlosen Werkzeugen. Wichtig vorab: Automatische Tests finden nur einen Teil der Probleme. Ob ein Alternativtext sinnvoll ist oder eine Fehlermeldung verständlich, kann kein Werkzeug beurteilen. Deshalb kombiniert der folgende Ablauf automatische und manuelle Prüfungen.
Wählen Sie zuerst fünf bis zehn repräsentative Seiten aus: Startseite, eine Kategorieseite, eine Produkt- oder Leistungsseite, Warenkorb, Kasse oder Buchungsformular, Kontaktformular, eine Seite mit Video und das Cookie-Banner. Bei Shops ist der Weg vom Produkt bis zur Bestellbestätigung das Wichtigste.
Schritt 1: Lighthouse für den Überblick
Öffnen Sie die Seite in Google Chrome, drücken Sie F12 für die Entwicklertools und wählen Sie den Reiter „Lighthouse“. Aktivieren Sie die Kategorie „Accessibility“ (Barrierefreiheit) und starten Sie die Analyse. Sie erhalten eine Punktzahl und eine Liste konkreter Fehler wie fehlende Alternativtexte, zu geringe Kontraste oder Formularfelder ohne Beschriftung. Die Punktzahl ist ein grober Indikator, kein Nachweis der Konformität. Auch 100 Punkte bedeuten nicht, dass eine Seite barrierefrei ist.
Schritt 2: WAVE für die visuelle Fehlersuche
WAVE ist ein kostenloses Werkzeug der Organisation WebAIM, als Browser-Erweiterung oder auf der Website wave.webaim.org. Es zeigt Fehler direkt im Seitenlayout an, mit Symbolen an der betroffenen Stelle. Besonders hilfreich ist die Ansicht der Überschriftenstruktur: Sie sehen auf einen Blick, ob die H1 fehlt oder Ebenen übersprungen werden.
Schritt 3: axe DevTools für die technische Tiefe
Die kostenlose Browser-Erweiterung axe DevTools von Deque prüft nach WCAG-Kriterien und erklärt jeden Fund mit Verweis auf das betroffene Erfolgskriterium. Das ist die Liste, die Sie Ihrer Entwicklung übergeben. axe meldet bewusst nur Probleme, die es sicher erkennt, und markiert unsichere Fälle zur manuellen Prüfung.
Schritt 4: Der Tastaturtest
Legen Sie die Maus beiseite. Klicken Sie einmal in die Adresszeile und drücken Sie dann wiederholt die Tab-Taste. Achten Sie auf vier Dinge:
- Sehen Sie bei jedem Schritt klar, welches Element gerade ausgewählt ist?
- Ist die Reihenfolge logisch, also von oben nach unten und von links nach rechts?
- Können Sie Menüs öffnen, Filter setzen, das Cookie-Banner bedienen und ein Produkt in den Warenkorb legen?
- Kommen Sie aus jedem Pop-up, Slider oder Chat-Fenster wieder heraus, etwa mit der Escape-Taste?
Spielen Sie dann eine komplette Bestellung oder Buchung nur mit der Tastatur durch. Wenn Sie an einer Stelle steckenbleiben, haben Sie einen der schwerwiegendsten Mängel gefunden, denn für Tastaturnutzer endet der Kauf genau dort.
Schritt 5: Ein kurzer Screenreader-Test
Auf dem Mac ist VoiceOver bereits eingebaut. Sie starten es mit Cmd + F5. Unter Windows ist NVDA kostenlos erhältlich. Auch iPhone (VoiceOver) und Android (TalkBack) bringen Screenreader mit. Für einen ersten Test genügt es, sich die Startseite und das Bestellformular vorlesen zu lassen. Hören Sie hin: Werden Bilder sinnvoll beschrieben? Werden Formularfelder mit ihrer Beschriftung angesagt? Erfahren Sie als Hörer, dass eine Fehlermeldung erschienen ist? Rechnen Sie damit, dass die Bedienung ungewohnt ist. Es geht nicht um perfekte Beherrschung, sondern um den Eindruck, ob die Seite überhaupt sinnvoll ausgelesen wird.
Schritt 6: Zoom und Kontrast prüfen
Vergrößern Sie die Seite im Browser auf 200 Prozent (Strg oder Cmd und Plus-Taste). Text muss lesbar bleiben, nichts darf abgeschnitten oder überlagert werden. Prüfen Sie einzelne Farbkombinationen mit dem kostenlosen Colour Contrast Analyser von TPGi oder dem Kontrastprüfer von WebAIM. Notieren Sie die Farbwerte, die durchfallen, damit sie im Design-System dauerhaft korrigiert werden.
Checkliste: Ergebnis Ihres Selbsttests dokumentieren
- Liste der geprüften Seiten mit Datum
- Export oder Screenshot der Lighthouse-, WAVE- und axe-Ergebnisse je Seite
- Notizen zum Tastaturtest: wo bleibt man hängen, wo ist der Fokus unsichtbar
- Notizen zum Screenreader-Test: was wird falsch oder gar nicht angesagt
- Durchgefallene Farbkombinationen mit Hex-Werten
- Einschätzung je Fund: blockiert er eine Bestellung oder Buchung, ja oder nein
Die letzte Spalte ist die wichtigste. Ein fehlender Alternativtext auf einem Stimmungsbild ist ärgerlich. Ein Bezahl-Button, der per Tastatur nicht erreichbar ist, verhindert den Vertragsschluss. Priorisieren Sie danach.
Welche Fehler machen Unternehmen bei der Umsetzung?
Seit das BFSG gilt, sind viele schnelle Lösungen auf dem Markt. Einige davon schaffen neue Probleme. Die folgenden Fehler begegnen in Projekten immer wieder.
Fehler 1: Sich auf ein Overlay-Tool verlassen
Overlay-Tools blenden per Skript ein Symbol ein, über das Nutzer Kontrast, Schriftgröße oder Vorlesefunktion einstellen können, und versprechen damit Barrierefreiheit per Knopfdruck. Strukturelle Mängel im Code, fehlende Beschriftungen oder unbedienbare Formulare beheben sie nicht zuverlässig. Menschen, die auf Hilfstechnologien angewiesen sind, haben ihre eigenen Einstellungen und Werkzeuge bereits auf dem Gerät. Fachverbände und Betroffenenorganisationen raten deshalb verbreitet davon ab, Overlays als Ersatz für eine saubere Umsetzung einzusetzen.
Fehler 2: Nur die Startseite prüfen
Die Startseite ist meist am besten gepflegt. Die Barrieren sitzen im Warenkorb, in der Kasse, im Buchungs-Widget, im Login. Genau diese Strecke ist für das BFSG entscheidend.
Fehler 3: Barrierefreiheit als einmaliges Projekt behandeln
Jeder neue Blogbeitrag, jedes neue Produktbild und jede neue Kampagnenseite kann neue Barrieren schaffen. Ohne Regeln für Redaktion und Freigabe verschlechtert sich eine geprüfte Website innerhalb weniger Monate wieder.
Fehler 4: Drittanbieter ungeprüft lassen
Shop-System, Zahlungsdienst, Cookie-Banner, Chat-Widget und Terminbuchung sind oft die größten Baustellen, weil Sie sie nicht selbst programmieren. Fordern Sie Konformitätsaussagen an und testen Sie trotzdem selbst. Bei der Wahl einer neuen Plattform gehört die Barrierefreiheit zu den Auswahlkriterien, wie im Vergleich Webflow, Framer und WordPress beschrieben.
Fehler 5: Design und Barrierefreiheit gegeneinander ausspielen
„Dann sieht es nicht mehr gut aus“ ist der häufigste Einwand. In der Praxis schränken die Anforderungen das Design kaum ein: ausreichende Kontraste, sichtbare Fokuszustände und klare Beschriftungen lassen sich hochwertig gestalten. Schwierig wird es nur, wenn Barrierefreiheit nachträglich in ein fertiges Design gepresst wird.
Fehler 6: Eine Erklärung veröffentlichen, die nicht stimmt
Eine Vorlage aus dem Internet zu kopieren und „vollständig barrierefrei“ zu behaupten, ist schnell erledigt. Wenn ein Nutzer oder eine Behörde das Gegenteil feststellt, steht die Aussage gegen Sie.
Warum lohnt sich Barrierefreiheit auch ohne gesetzliche Pflicht?
Wer nach dem Betroffenheits-Check feststellt, dass das BFSG nicht greift, kann die Sache ablegen. Es gibt aber gute Gründe, die wichtigsten Punkte trotzdem umzusetzen, und keiner davon hat mit Recht zu tun.
Ihre Kunden werden älter
Mit dem Alter lassen Sehschärfe, Kontrastwahrnehmung und Feinmotorik bei vielen Menschen nach. Das betrifft Privatkunden ebenso wie Einkäufer, Geschäftsführer und Inhaber in Ihrer Zielgruppe. Größere Schrift, starke Kontraste, klare Beschriftungen und große Klickflächen sind für diese Nutzer keine Sonderwünsche, sondern die Voraussetzung, dass sie Ihre Website mühelos lesen. Wer sich anstrengen muss, ruft eher den Wettbewerber an.
Suchmaschinen und KI-Systeme lesen wie ein Screenreader
Suchmaschinen sehen keine Bilder und keine Gestaltung, sie lesen Code und Text. Eine saubere Überschriftenstruktur, beschreibende Alternativtexte, Transkripte zu Videos und HTML statt eingescannter PDFs helfen Google, Bing und KI-Suchsystemen, Ihre Inhalte zu verstehen und richtig einzuordnen. Barrierefreiheit ersetzt keine Suchmaschinenoptimierung, aber die beiden Disziplinen überschneiden sich deutlich. Auch die Ladezeit spielt hinein: schlanke, semantisch gebaute Seiten sind meist schneller, wie der Ratgeber zu den Core Web Vitals erläutert.
Bessere Nutzbarkeit für alle
Klare Fehlermeldungen, verständliche Sprache, gut lesbare Kontraste und eine logische Struktur helfen jedem Nutzer, nicht nur Menschen mit Behinderung. Wer auf dem Smartphone in der Sonne bestellt oder schnell zwischen zwei Terminen eine Information sucht, profitiert genauso. Viele Maßnahmen der Barrierefreiheit sind gleichzeitig Maßnahmen für mehr Anfragen und weniger Abbrüche.
Ausschreibungen und Großkunden
Öffentliche Auftraggeber und große Unternehmen formulieren zunehmend Anforderungen an die Barrierefreiheit ihrer Lieferanten, etwa bei Portalen, Software oder Dokumentation. Wer hier vorbereitet ist, hat einen Punkt weniger, der in einer Ausschreibung zum Problem wird.
Der günstigste Zeitpunkt ist der nächste Relaunch
Barrierefreiheit nachträglich einzubauen ist deutlich aufwendiger, als sie von Anfang an mitzudenken. Wenn Sie ohnehin eine neue Website planen, nehmen Sie WCAG 2.1 AA, besser 2.2 AA, als Anforderung ins Lastenheft auf. Wie Sie eine neue Website von Ziel und Struktur bis zum Start planen, beschreibt der Leitfaden Neue Firmenwebsite planen.
Fahrplan: In zwölf Wochen zur barrierefreien Website
Für Unternehmen, die nach dem Check betroffen sind, empfiehlt sich ein strukturiertes Vorgehen. Die Anforderungen gelten bereits, deshalb geht es darum, die wichtigsten Barrieren zügig zu beseitigen und den Rest planbar abzuarbeiten. Der folgende Fahrplan ist ein Beispiel für eine mittelgroße Website mit Shop oder Buchungsstrecke. Je nach Umfang und Zustand dauert es kürzer oder länger.
| Zeitraum | Aufgabe | Ergebnis |
|---|---|---|
| Woche 1 | Betroffenheit klären, bei Unsicherheit rechtlich prüfen lassen. Verantwortliche Person benennen. | Schriftliche Einordnung, klare Zuständigkeit |
| Woche 2 | Bestandsaufnahme: Seiten und Prozesse festlegen, auf denen Verbraucher Verträge schließen. Drittanbieter auflisten. | Prüfumfang mit allen relevanten Seiten und Tools |
| Woche 3 bis 4 | Selbsttest wie oben beschrieben oder externe Prüfung nach WCAG 2.1 AA beauftragen. Konformitätsaussagen der Drittanbieter anfordern. | Mängelliste mit Schweregrad |
| Woche 5 | Priorisieren: zuerst alles, was eine Bestellung oder Buchung blockiert, dann wiederkehrende Fehler im Design-System, dann Einzelfälle. | Umsetzungsplan mit Reihenfolge und Aufwand |
| Woche 6 bis 9 | Umsetzung: Kontraste und Fokuszustände im Design-System, Formulare und Tastaturbedienung im Bestellprozess, Cookie-Banner, Alternativtexte, Überschriften. | Behobene Hauptmängel |
| Woche 10 | Nachtest der Bestellstrecke mit Tastatur und Screenreader, automatische Tests wiederholen. | Bestätigte Korrekturen, verbleibende Einschränkungen |
| Woche 11 | Informationen zur Barrierefreiheit verfassen, Seite veröffentlichen, in AGB und Footer verlinken. | Veröffentlichte Erklärung |
| Woche 12 | Redaktionsregeln festlegen (Alt-Texte, Überschriften, Videos, PDFs), Team schulen, Prüftermine für die Zukunft setzen. | Dauerhafter Prozess statt Einmalprojekt |
Was danach regelmäßig passiert
- Bei jeder neuen Seite oder Kampagne: kurzer Check mit WAVE oder axe vor der Veröffentlichung.
- Bei jedem neuen Tool im Bestellprozess: Tastaturtest und Nachfrage beim Anbieter vor der Einführung.
- Einmal im Jahr: vollständiger Test der Bestellstrecke und Aktualisierung der Erklärung zur Barrierefreiheit mit neuem Datum.
- Bei jeder Rückmeldung eines Nutzers: Barriere prüfen, beheben oder Alternative anbieten und antworten.
Wenn Sie Ihre Website ohnehin erneuern oder die Bestellstrecke grundlegend überarbeiten wollen, unterstützen wir Sie dabei, Barrierefreiheit von Beginn an in Design und Umsetzung einzuplanen: mehr dazu unter Webdesign.