Barrierefreie Website für KMU: BFSG und Praxischeck

Digitale Barrierefreiheit bedeutet, dass Menschen eine Website unabhängig von Sehvermögen, Motorik oder eingesetzter Technik verstehen und bedienen können. Das ist mehr als ein Kontrastwert – und für manche Angebote zusätzlich eine rechtliche Anforderung.

Barrierefreiheit beginnt bei echten Nutzungssituationen

Eine Website kann optisch ruhig wirken und trotzdem schwer bedienbar sein: Das Menü funktioniert nur mit der Maus, der Fokus verschwindet, Fehlermeldungen werden nur rot eingefärbt oder Texte brechen bei Vergrößerung aus dem Bildschirm.

Barrierefreiheit fragt deshalb nicht nur, wie eine Seite aussieht. Entscheidend ist, ob Informationen wahrnehmbar, Bedienelemente erreichbar, Abläufe verständlich und Inhalte mit unterschiedlichen Browsern sowie Hilfsmitteln robust nutzbar sind.

Gilt das Barrierefreiheitsstärkungsgesetz für jede Unternehmenswebsite?

Nein. Der Anwendungsbereich hängt von Angebot, Zielgruppe, Unternehmensgröße und konkreter digitaler Dienstleistung ab. Das Barrierefreiheitsstärkungsgesetz (BFSG) gilt für die betroffenen Produkte und Dienstleistungen grundsätzlich seit dem 28. Juni 2025. Das BFSG nennt in § 1 unter anderem Dienstleistungen im elektronischen Geschäftsverkehr, die Verbrauchern angeboten werden.

Der Begriff ist genauer als „jede Website mit Kontaktformular“. Nach den Begriffsbestimmungen in § 2 geht es um eine digital und auf individuelle Anfrage erbrachte Dienstleistung im Hinblick auf den Abschluss eines Verbrauchervertrags. Die tatsächlichen Prozesse des Angebots müssen deshalb mitgeprüft werden.

Zudem enthält § 3 Absatz 3 BFSG eine Ausnahme für Kleinstunternehmen, die Dienstleistungen anbieten oder erbringen. Als Kleinstunternehmen gilt dabei ein Unternehmen mit weniger als zehn Beschäftigten und höchstens zwei Millionen Euro Jahresumsatz oder höchstens zwei Millionen Euro Jahresbilanzsumme. Diese Ausnahme gilt nicht pauschal für sämtliche Produkte, Unternehmen oder Websites.

Die Bundesfachstelle erläutert den Anwendungsbereich für Onlineabschlüsse und Buchungen in ihren FAQ zum elektronischen Geschäftsverkehr.

Diese Einordnung ersetzt keine Rechtsberatung. Wer Verträge, Buchungen oder Zahlungen für Verbraucher online anbietet, sollte den eigenen Fall fachlich prüfen lassen. Unabhängig von der Pflicht verbessert eine zugänglichere Website häufig die Bedienbarkeit für alle.

1. Struktur und Inhalte verständlich aufbauen

Überschriften, Listen, Absätze und Regionen sollten nicht nur optisch, sondern auch technisch ihre Bedeutung tragen. Eine große, fett gesetzte Zeile ist für assistive Technik nicht automatisch eine Überschrift.

Prüfen Sie:

• Gibt es eine klar erkennbare Hauptüberschrift?
• Folgen Unterüberschriften einer verständlichen Hierarchie?
• Sind Navigation, Hauptinhalt und Footer klar ausgezeichnet?
• Beschreiben Linktexte ihr Ziel auch außerhalb des Satzes?
• Bleibt die Reihenfolge beim Vorlesen logisch?
• Wird einfache, konkrete Sprache verwendet?

Eine klare Inhaltsstruktur hilft nicht nur Screenreadern. Sie erleichtert auch das Überfliegen auf kleinen Bildschirmen und macht Website-Texte verständlicher.

2. Die gesamte Seite mit Tastatur bedienen

Testen Sie jede wichtige Seite ohne Maus:

1. Mit Tab vorwärts durch alle Bedienelemente gehen.
2. Mit Shift + Tab wieder zurückgehen.
3. Menüs, Dialogfenster, Formulare und aufklappbare Bereiche öffnen.
4. Mit Escape geöffnete Ebenen schließen.
5. Kontrollieren, ob der Fokus jederzeit sichtbar bleibt.

Es darf keine Stelle geben, an der der Fokus gefangen bleibt oder hinter einem eingeblendeten Dialog verschwindet. Bei einem geschlossenen Dialog sollte er sinnvoll zum auslösenden Button zurückkehren.

3. Kontrast, Textvergrößerung und Umbruch prüfen

Ein einzelner Kontrastwert reicht nicht. Relevant sind Fließtext, Buttons, Eingabefelder, Fokusrahmen, Icons und Fehlermeldungen. Informationen dürfen außerdem nicht ausschließlich durch Farbe vermittelt werden.

Vergrößern Sie den Text auf 200 Prozent und prüfen Sie zusätzlich den Umbruch bei einer schmalen Browserbreite. Dieser sogenannte Reflow sollte Inhalte lesbar halten, ohne dass Besucher horizontal durch ganze Textzeilen scrollen müssen. Besonders anfällig sind:

• starre Kartenhöhen;
• zu breite Überschriften;
• Navigationsleisten mit vielen Links;
• Tabellen ohne mobile Lösung;
• Buttons mit abgeschnittenen Beschriftungen;
• fest positionierte Elemente.

4. Bilder und Medien sinnvoll beschreiben

Ein Alternativtext erklärt die Funktion oder Aussage eines relevanten Bildes. Er muss nicht jedes sichtbare Detail aufzählen. Rein dekorative Elemente sollten von assistiver Technik ignoriert werden.

Bei Videos können Untertitel, Transkript oder Audiodeskription erforderlich sein. Automatisch startende Bewegung sollte pausierbar sein und die Systemeinstellung für reduzierte Bewegung respektieren.

5. Formulare vollständig testen

Ein zugängliches Formular braucht mehr als Platzhalter:

• sichtbare, technisch verknüpfte Labels;
• erkennbare Pflichtfelder;
• verständliche Hinweise vor der Eingabe;
• konkrete Fehlermeldungen am betroffenen Feld;
• programmatisch gesetzten Fehlerstatus;
• Fokus auf den ersten relevanten Fehler;
• eine Statusmeldung nach dem Absenden.

Testen Sie nicht nur den Erfolgsfall. Offline-Zustand, Timeout, Serverfehler und eine zu große Eingabe müssen ebenfalls verständlich reagieren.

6. Automatische Tests richtig einordnen

Automatisierte Prüfungen finden beispielsweise fehlende Namen, bestimmte Kontrastprobleme oder ungültige ARIA-Zustände. Sie erkennen aber nicht zuverlässig, ob ein Alternativtext inhaltlich passt, die Fokusreihenfolge sinnvoll ist oder eine Rückmeldung verständlich formuliert wurde.

Die WCAG 2.2 formuliert testbare Erfolgskriterien unter den vier Grundprinzipien wahrnehmbar, bedienbar, verständlich und robust. Dieser WCAG-orientierte Praxischeck ersetzt jedoch keine Konformitätsprüfung gegen die Verordnung zum BFSG und den für das konkrete Angebot maßgeblichen technischen Standard.

Eine belastbare Prüfung kombiniert:

• automatisierte Tests;
• Tastaturbedienung;
• Textzoom und Reflow;
• die Systemeinstellung für weniger Bewegung und kontrastreiche Systemfarben;
• Vorleseprogramme wie NVDA oder VoiceOver;
• reale Mobilgeräte;
• vollständige Nutzerwege statt nur einzelner Komponenten.

7. Verbesserungen sinnvoll priorisieren

Beginnen Sie mit Barrieren, die Menschen vollständig von Informationen oder Abschlüssen ausschließen:

1. nicht bedienbare Navigation und Dialoge;
2. Formulare ohne Labels oder verständliche Fehler;
3. fehlender oder unsichtbarer Tastaturfokus;
4. unlesbare Kontraste und abgeschnittener Inhalt;
5. unbeschriftete Steuerelemente;
6. nicht pausierbare Bewegung;
7. redaktionelle Detailverbesserungen.

Verknüpfen Sie jede Korrektur mit einem reproduzierbaren Test. Eine Launch-Checkliste sollte Barrierefreiheit deshalb nicht als einmaligen Punkt, sondern als wiederholbare Abnahme behandeln.

Was in ein Angebot gehört

Wenn Barrierefreiheit Teil eines Projekts ist, sollte das Angebot konkret benennen:

• angestrebter Standard und Konformitätsniveau;
• geprüfte Seitentypen und Prozesse;
• Browser, Geräte und Assistenztechnik;
• automatische und manuelle Tests;
• Umgang mit Inhalten von Dritten;
• Verantwortlichkeit für spätere redaktionelle Änderungen;
• Dokumentation gefundener und behobener Barrieren.

Die pauschale Aussage „barrierefrei programmiert“ ist ohne Prüfrahmen kaum belastbar.

Fazit

Eine barrierefreie Website entsteht aus verständlichen Inhalten, sauberer Technik und realen Bedienungstests. Klären Sie zuerst den rechtlichen Anwendungsbereich, behandeln Sie Zugänglichkeit aber nicht nur als Pflicht. Tastatur, Fokus, Reflow, Formulare und assistive Technik machen sehr schnell sichtbar, wo Menschen heute noch ausgeschlossen werden.