Barrierefreie Website: Was das BFSG für Unternehmen bedeutet

Man kann eine Website mit geschlossenen Augen bedienen. Nicht im übertragenen Sinn – wörtlich. Screenreader lesen vor, was auf dem Bildschirm steht, und die Tastatur ersetzt die Maus. Vorausgesetzt, jemand hat daran gedacht: Ohne Alternativtexte bleibt ein Bild stumm, ohne sichtbaren Fokusrahmen weiß niemand, wo er gerade steht, und ein Formularfeld ohne Beschriftung ist ein Rätsel.

Kurz gesagt: Seit dem 28. Juni 2025 ist digitale Barrierefreiheit für viele Unternehmen Pflicht – nicht für alle. Das BFSG betrifft vor allem Online-Shops, Buchungs- und Verbraucherdienste, und die Kleinstunternehmen-Ausnahme greift enger, als viele hoffen. Dieser Beitrag klärt die Betroffenheit, erklärt die technischen Anforderungen und zeigt die Umsetzung in Contao – mit Code, Templates und den Stellen, an denen es in der Praxis klemmt. Er ersetzt keine Rechtsberatung.

Das BFSG gilt seit dem 28. Juni 2025. Es verpflichtet Hersteller, Händler und Dienstleister, bestimmte Produkte und digitale Dienstleistungen barrierefrei anzubieten. Grundlage ist die EU-Richtlinie 2019/882, die europaweit einheitliche Anforderungen schafft. Ziel ist, dass digitale Angebote von möglichst allen Menschen genutzt werden können – unabhängig von Seheinschränkungen, motorischen Einschränkungen oder anderen Barrieren.

Für Websites bedeutet das eine wichtige Unterscheidung: Nicht jede Seite ist betroffen. Überall dort jedoch, wo online gekauft, gebucht oder ein Vertrag abgeschlossen wird, greifen die Anforderungen.

Maßgeblich ist die Funktion einer Website, nicht ihre Größe. Unter das BFSG fallen insbesondere:

• Online-Shops und andere Angebote im elektronischen Geschäftsverkehr
• Bank- und Zahlungsdienste für Verbraucher
• Telekommunikationsdienste
• Personenbeförderung mit Ticket- und Buchungssystemen
• E-Books und zugehörige Leseanwendungen

Reine Firmen- oder Broschüren-Websites ohne Verkaufs- oder Buchungsfunktion zählen in der Regel nicht dazu. Auch reine B2B-Angebote, die sich ausschließlich an andere Unternehmen richten, liegen meist außerhalb des Anwendungsbereichs. Sobald allerdings eine Verkaufs-, Buchungs- oder Vertragsfunktion für Endkunden hinzukommt, ist eine Prüfung angeraten.

Eine Ausnahme existiert – doch sie ist enger gefasst, als viele hoffen. Als Kleinstunternehmen gilt, wer weniger als zehn Beschäftigte hat und zugleich höchstens zwei Millionen Euro Jahresumsatz oder eine Jahresbilanzsumme von höchstens zwei Millionen Euro erreicht. Beide Bedingungen müssen gemeinsam erfüllt sein.

Entscheidend ist eine Einschränkung, die häufig übersehen wird: Die Ausnahme gilt nur für Dienstleistungen, nicht für Produkte. Wer als sehr kleines Unternehmen etwa eine buchbare Dienstleistung online anbietet, kann darunterfallen. Für Produkte – und für viele Konstellationen im Handel – greift die Ausnahme hingegen nicht. Da die Abgrenzung im Einzelfall schwierig sein kann, empfiehlt sich im Zweifel eine rechtliche Prüfung; dieser Beitrag ersetzt keine Rechtsberatung.

Typisches Szenario – so verläuft ein solcher Fall in der Praxis.

Ein Fachhändler mit sieben Mitarbeitern und 1,8 Millionen Euro Umsatz ist überzeugt, unter die Kleinstunternehmen-Ausnahme zu fallen. Beide Schwellen liegen unter der Grenze, die Rechnung scheint aufzugehen. Der Haken steckt im Detail: Der Händler betreibt einen Online-Shop – und die Ausnahme gilt nur für Dienstleistungen, nicht für den Verkauf von Produkten an Verbraucher.

Der Check der Website dauert eine Stunde und fördert fünf Punkte zutage, die exemplarisch für fast jeden Shop stehen:

• Der „In den Warenkorb"-Button ist ein <div> mit Klick-Handler – per Tastatur nicht erreichbar.
• Produktbilder tragen Dateinamen statt Alternativtexte.
• Fehlermeldungen im Bestellformular erscheinen rot am Seitenanfang, ohne Bezug zum Feld.
• Der Fokusrahmen wurde global mit outline: none entfernt.
• Das Kontrastverhältnis der Preisangaben liegt bei 3,1 : 1 – unter dem geforderten Wert.

Behoben ist das in zwei Arbeitstagen, weil es sich um Standardfehler handelt, nicht um konzeptionelle Probleme. Die Erkenntnis, die bleibt: Die Frage „Sind wir betroffen?" wird nicht nach Mitarbeiterzahl beantwortet, sondern nach der Funktion der Website. Wer verkauft, bucht oder Verträge abschließt, sollte prüfen – im Zweifel rechtlich, dieser Beitrag ersetzt keine Rechtsberatung.

Die technischen Anforderungen orientieren sich an der europäischen Norm EN 301 549, die wiederum auf die international anerkannten Web Content Accessibility Guidelines (WCAG 2.1) in der Konformitätsstufe AA verweist. In der Praxis geht es um gut umsetzbare Grundlagen:

• ausreichende Farbkontraste zwischen Text und Hintergrund
• aussagekräftige Alternativtexte für Bilder
• eine logische Struktur der Überschriften
• vollständige Bedienbarkeit per Tastatur
• klar beschriftete Formularfelder mit verständlichen Fehlermeldungen
• verständliche Sprache und eine nachvollziehbare Navigation

Vieles davon ist solides Web-Handwerk und deckt sich mit dem, was moderne, gut gepflegte Websites ohnehin auszeichnet.

Zuständig ist eine länderübergreifende Marktüberwachungsstelle, die sich seit Anfang 2026 in der aktiven Kontrollphase befindet. Geprüft wird auf zwei Wegen: aktiv durch systematische, teils automatisierte Kontrollen und reaktiv durch die Bearbeitung von Beschwerden. Bei Verstößen drohen Anordnungen zur Nachbesserung sowie Bußgelder – je nach Fall bis zu 10.000 Euro, in bestimmten Konstellationen bis zu 100.000 Euro.

Hinzu kommt ein zweites Risiko: Seit Anfang 2026 sind vermehrt wettbewerbsrechtliche Abmahnungen zu beobachten, im Durchschnitt im Bereich von rund 2.700 Euro pro Fall. Deren rechtliche Grundlage ist vor deutschen Gerichten allerdings noch nicht abschließend geklärt. Zusätzlich erhöht sich der Druck auf europäischer Ebene: Die EU-Kommission hat Deutschland 2026 förmlich zur vollständigen Umsetzung der Richtlinie aufgefordert.

Barrierefreiheit ist mehr als eine Rechtsfrage. In Deutschland leben rund 7,8 Millionen schwerbehinderte Menschen; werden vorübergehende und altersbedingte Einschränkungen mitgezählt, fällt der Kreis der Betroffenen deutlich größer aus. Eine zugängliche Website erschließt damit Reichweite, die andernfalls ungenutzt bleibt.

Hinzu kommt ein willkommener Nebeneffekt: Viele Maßnahmen für Barrierefreiheit zahlen unmittelbar auf die Suchmaschinenoptimierung ein. Saubere Semantik, sinnvolle Alternativtexte, eine klare Struktur und kurze Ladezeiten helfen Menschen und Suchmaschinen gleichermaßen – und zunehmend auch KI-gestützten Suchsystemen, die Inhalte maschinell auslesen. Barrierefreiheit, gute Nutzerführung und Sichtbarkeit gehören damit eng zusammen.

Ein pragmatischer Einstieg beginnt mit einer Bestandsaufnahme. Zunächst ist zu klären, ob und mit welchen Funktionen eine Website überhaupt unter das BFSG fällt. Anschließend lohnt der Blick auf die kritischen Seiten – etwa Kaufabschluss, Kontaktformular oder Buchungsstrecke –, denn dort wirken Barrieren am stärksten.

Viele Schwachstellen lassen sich mit überschaubarem Aufwand beheben: Kontraste anpassen, Alternativtexte ergänzen, die Tastaturbedienung sicherstellen, Formulare verständlich beschriften. Ein dokumentierter Prüf- und Maßnahmenplan schafft zusätzlich Sicherheit, falls Nachweise verlangt werden. Wo Unsicherheit bleibt, hilft eine fachliche Prüfung durch eine erfahrene Agentur oder Fachstelle weiter.

Contao bringt vieles mit, was für Barrierefreiheit nötig ist – vorausgesetzt, es wird genutzt. Die folgenden Punkte decken den Großteil der WCAG-Anforderungen ab, die in der Praxis tatsächlich schiefgehen.

1. Alternativtexte erzwingen statt erhoffen

Alternativtexte liegen in Contao in den Datei-Metadaten (?do=files). Wer sie zentral pflegt, hat sie überall. Prüfen lässt sich der Bestand mit einer einzigen Abfrage:

-- Alle Bilder ohne Alternativtext finden
SELECT path, meta
FROM tl_files
WHERE extension IN ('jpg','jpeg','png','webp','svg')
  AND (meta IS NULL OR meta NOT LIKE '%alt%');

Rein dekorative Bilder bekommen bewusst ein leeres alt="" – dann überspringt der Screenreader sie. Ein fehlendes Attribut dagegen führt dazu, dass der Dateiname vorgelesen wird: „D-S-C-Unterstrich-4-7-1-1-Punkt-J-P-G".

2. Sichtbarer Tastaturfokus

Der häufigste Designfehler steckt in einer einzigen CSS-Zeile: outline: none. Damit verschwindet der Fokusrahmen – und mit ihm die Orientierung für alle, die per Tastatur navigieren. Die saubere Lösung setzt einen eigenen, gut sichtbaren Fokus:

/* Fokus nur bei Tastaturnutzung, nicht beim Mausklick */
:focus:not(:focus-visible) { outline: none; }

:focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Sprungmarke zum Inhalt – erscheint beim ersten Tabulator */
.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 1rem; top: 1rem;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: #fff; color: #000;
}

3. Formulare, die man auch blind ausfüllen kann

Contao-Formulare erzeugen Labels automatisch – solange das Feld einen Namen hat und nicht per CSS versteckt wird. Kritisch sind Fehlermeldungen: Sie müssen dem Feld zugeordnet und angekündigt werden. Im Template form_row.html5 genügt dafür wenig:

<div class="widget widget-<?= $this->class ?>">
  <label for="ctrl_<?= $this->id ?>">
    <?= $this->label ?>
    <?php if ($this->mandatory): ?>
      <span class="mandatory" aria-hidden="true">*</span>
      <span class="invisible">Pflichtfeld</span>
    <?php endif ?>
  </label>

  <?php if ($this->hasErrors()): ?>
    <p class="error" id="err_<?= $this->id ?>" role="alert">
      <?= $this->getErrorAsString() ?>
    </p>
  <?php endif ?>

  <?= $this->generateWithError(false) ?>
</div>

Wichtig ist zusätzlich das Attribut aria-describedby="err_…" am Eingabefeld – so liest der Screenreader die Fehlermeldung direkt beim Feld vor, nicht irgendwo am Seitenanfang. Und: Pflichtfelder nie nur durch Farbe kennzeichnen.

4. Struktur, Sprache, Kontrast

• Genau eine h1 je Seite, danach lückenlose Hierarchie – Contao-Inhaltselemente erlauben die Auswahl der Überschriftenebene; sie sollte nicht nach Optik gewählt werden.
• <html lang="de"> im Seitenlayout setzen, sonst liest der Screenreader deutsche Texte mit englischer Aussprache vor.
• Kontrastverhältnis mindestens 4,5 : 1 für normalen Text – graues Hellgrau auf Weiß fällt fast immer durch.
• Interaktive Elemente als <button> oder <a> auszeichnen, nicht als <div onclick>: Nur echte Elemente sind per Tastatur erreichbar.
• Akkordeons und Slider brauchen aria-expanded, aria-controls und Bedienbarkeit per Enter und Leertaste.

5. Prüfen – automatisiert und von Hand

# Automatisierte Prüfung über die Kommandozeile
npx @axe-core/cli https://www.beispiel.de --exit

# Oder für mehrere Seiten in der Continuous Integration
npx pa11y-ci --sitemap https://www.beispiel.de/sitemap.xml

Automatische Werkzeuge finden erfahrungsgemäß rund ein Drittel der Probleme – Kontraste, fehlende Alternativtexte, Strukturfehler. Den Rest findet nur der Selbstversuch: Maus weglegen und die Website einmal komplett mit der Tabulatortaste bedienen. Wer dabei nicht bis zum Absenden des Kontaktformulars kommt, hat sein wichtigstes Ticket bereits gefunden.

Das BFSG macht digitale Barrierefreiheit für einen großen Teil der wirtschaftlich aktiven Websites verbindlich – und die Kontrollen haben begonnen. Wer betroffen ist, sollte die eigenen Angebote prüfen und die wichtigsten Hürden zeitnah abbauen. Selbst dort, wo keine Pflicht besteht, bleibt Barrierefreiheit eine sinnvolle Investition: in Reichweite, Nutzerfreundlichkeit und Sichtbarkeit. Ein wartbares CMS wie Contao bietet dafür eine solide Grundlage, auf der sich Barrierefreiheit dauerhaft pflegen lässt.

Die wichtigsten Fragen zum Barrierefreiheitsstärkungsgesetz – kurz und sachlich beantwortet.