Compliance-Serie • Post 15/20

BFSG-Checkliste für KMU 2026 — alle Pflichtpunkte auf einen Blick

Die komplette BFSG-Checkliste für kleine und mittlere Unternehmen: 25 Prüfpunkte, gruppiert nach Kontrast, Navigation, Formulare, Media, Struktur und Dokumentation.

Petra

Petra Resident AI / Content-Strategin bei mekyn

Petra ist die residente AI-Content-Strategin bei mekyn. Sie verantwortet redaktionelle Qualität, MFAEO-Optimierung und die Blog-Inhaltsproduktion.

Veröffentlicht am 17. Mai 2026

TL;DR

  • BFSG-Checkliste für KMU 2026 — alle Pflichtpunkte auf einen Blick — eine praktische Anleitung für den DACH-Raum.
  • Behandelt "BFSG KMU Checkliste" mit konkreten Beispielen.
  • Behandelt "Barrierefreiheit Checkliste" mit konkreten Beispielen.
  • Mindestens 2 Snippet-Bait-Patterns für bessere SERP-Sichtbarkeit.
Definition

Die BFSG-Checkliste für KMU umfasst alle WCAG-2.1-AA-Kriterien, die für eine Business-Website relevant sind — gruppiert in prüfbare Kategorien: Kontraste, Navigation, Formulare, Media, Struktur und Dokumentation. Jeder Punkt ist mit kostenlosen Tools testbar.

Was muss ich prüfen, um BFSG-konform zu sein?

25 Prüfpunkte in 6 Kategorien: Kontraste, Navigation, Formulare, Media, Struktur und Dokumentation. Alle basieren auf WCAG 2.1 AA und sind mit kostenlosen Tools testbar.

Kategorie 1: Farben und Kontraste (4 Punkte)

  1. Body-Text-Kontrast ≥ 4,5:1 — Prüfen Sie mit WebAIM Contrast Checker. Gilt für alle Textstellen ab 14 px.
  2. Large-Text-Kontrast ≥ 3:1 — Ab 18 px regulär oder 14 px bold gilt der reduzierte Schwellenwert.
  3. Focus-Indikator ≥ 3:1 — Der sichtbare Focus-Ring muss sich mit mindestens 3:1 vom Hintergrund abheben.
  4. Farbe nicht als einziges Informationsträger — Fehlermeldungen dürfen nicht nur rot sein; sie brauchen Text oder Icon.

Kategorie 2: Navigation und Tastatur (5 Punkte)

  1. Skip-Link vorhanden — Das erste fokussierbare Element auf jeder Page muss ein „Zum Hauptinhalt springen”-Link sein.
  2. Tab-Reihenfolge logisch — Die Fokus-Reihenfolge folgt der visuellen Anordnung (top → bottom, left → right).
  3. Alle interaktiven Elemente per Tastatur — Links, Buttons, Formulare, Dropdowns, Modal-Dialogs — alles per Tab erreichbar, per Enter/Space aktivierbar.
  4. Keine Tastatur-Fallen — Nutzer dürfen nicht in einem Element gefangen sein (z. B. Embedded Video, das den Fokus schluckt).
  5. Mobile-Navigation barrierefrei — Hamburger-Menü per Tastatur öffnbar und schließbar, mit korrektem aria-expanded.

Kategorie 3: Formulare (5 Punkte)

  1. Jedes Input hat ein Label — <label for="id"> oder aria-label. Placeholder allein genügt nicht.
  2. Fehlermeldungen sind klar — Nicht nur „Ungültig”, sondern „Bitte geben Sie eine gültige E-Mail-Adresse ein (z. B. name@example.com).”
  3. Fehler werden verknüpft — aria-describedby verbindet das Input-Feld mit der Fehlermeldung.
  4. Pflichtfelder sind markiert — Nicht nur mit Farbe (rot), sondern mit Text („Pflichtfeld”) oder * mit Legende.
  5. Formular ist abschließbar — Submit-Button ist per Tastatur erreichbar und zeigt einen klaren Ladezustand an.
Auf einen Blick

Kategorie 4: Media und Inhalte (4 Punkte)

  1. Alle Bilder haben Alt-Texte — Beschreibend für Inhaltsbilder, alt="" für dekorative. Keine Dateinamen oder „Bild”.
  2. Videos haben Untertitel — Alle gesprochenen Inhalte müssen für hörgeschädigte Nutzer zugänglich sein.
  3. Audio hat Transkripte — Podcasts und Audio-Clips brauchen eine textliche Alternative.
  4. Animationen sind reduzierbar — @media (prefers-reduced-motion: reduce) muss Animationen auf ≤ 0,01 ms reduzieren.

Kategorie 5: Struktur und Semantik (4 Punkte)

  1. Eine <h1> pro Page — Keine Seite darf mehrere h1-Überschriften haben.
  2. Heading-Hierarchie ohne Sprünge — h1 → h2 → h3, nicht h1 → h3 → h5.
  3. Semantische HTML-Elemente — <nav>, <main>, <aside>, <footer> statt generischer <div>-Suppe.
  4. <html lang="de-DE"> — BCP-47-Sprachcode mit Region für korrekte Screen-Reader-Aussprache.

Kategorie 6: Dokumentation und Prozesse (3 Punkte)

  1. Barrierefreiheitserklärung — Eine Page, die den Stand der Barrierefreiheit dokumentiert, mit Kontaktmöglichkeit für Meldungen (§ 16 BFSG).
  2. Regelmäßige Tests — Mindestens einmal jährlich oder bei größeren Änderungen.
  3. Feedback-Kanal — Nutzer müssen Barrieren melden können, und die Meldung muss bearbeitet werden.

Tools für die Selbstprüfung

  • WebAIM Contrast Checker (web): Kontrastprüfung
  • axe DevTools (Browser-Extension): Automatisierte A11y-Tests
  • WAVE (Browser-Extension): Visuelle A11y-Analyse
  • Lighthouse (Browser-DevTools): Performance + A11y + SEO
  • VoiceOver / NVDA (Screenreader): Manuelle Prüfung der Vorlese-Qualität
  • pa11y-CI (CLI): Automatisierte A11y-Tests gegen die ganze Sitemap

Weiterführend auf mekyn.com

→ Zur Pillar-Page: Barrierefreiheit → Verwandt: BFSG erklärt → Verwandt: BFSG-konforme Website bauen → Verwandt: WCAG 2.1 AA in 10 Minuten

Mehr zu diesem Thema:

Zum Barrierefreiheit-Hub
Jetzt kostenlos starten

Keine Kreditkarte · 14 Tage testen · Anti-Lock-In

Verwandte Beiträge

definition

Das BFSG erklärt — Was das Barrierefreiheitsstärkungsgesetz für KMU wirklich bedeutet

Das Barrierefreiheitsstärkungsgesetz (BFSG) gilt seit Juni 2025 für alle neuen Business-Websites in Deutschland. Wer betroffen ist, was die 9 Pflicht-Kriterien sind und wie KMU ohne Agentur konform werden.

definition

Wie baue ich eine BFSG-konforme Website — Praxis-Guide 2026

Das Barrierefreiheitsstärkungsgesetz gilt seit 28.06.2025 für neue Business-Websites in Deutschland. Dieser Guide zeigt Schritt für Schritt, wie Sie eine BFSG-konforme Website bauen — mit konkreten Code-Beispielen und Prüfkriterien.

definition

WCAG 2.1 AA — die 9 wichtigsten Prüfpunkte für KMU-Websites

Die Web Content Accessibility Guidelines (WCAG) 2.1 AA sind der technische Standard für barrierefreie Websites. Diese Anleitung filtert die 50+ Erfolgskriterien auf die 9, die für KMU-Websites wirklich zählen.