BFSG für Handwerker: Brauche ich eine barrierefreie Webseite?

BFSG und Handwerk: Wer ist betroffen?

Viele Handwerksbetriebe denken, das Barrierefreiheitsstärkungsgesetz (BFSG) betrifft nur große Online-Shops. Das ist ein Irrtum. Sobald du digitale Dienstleistungen anbietest – also Online-Terminbuchung, Konfiguratoren, Angebotsrechner oder einen Webshop für Ersatzteile – greift das Gesetz nach § 1 BFSG.

Ein Klempner mit reiner Visitenkarten-Webseite ist deutlich weniger betroffen als ein Tischler mit Online-Möbelkonfigurator. Aber auch eine einfache Seite mit Kontaktformular kann unter die Regelung fallen, wenn darüber Aufträge angefragt werden.

Seit Juni 2025 ist das BFSG in Kraft. Die Marktüberwachungsbehörden können Bußgelder bis 100.000 EUR verhängen. Parallel dazu steigt das Abmahnrisiko durch spezialisierte Kanzleien.

Die rechtliche Grundlage: § 1 BFSG und die Kleinstunternehmer-Ausnahme

§ 1 BFSG definiert den Anwendungsbereich: Betroffen sind Produkte und Dienstleistungen, die nach dem 28. Juni 2025 in den Verkehr gebracht werden. Dazu zählen ausdrücklich Webseiten und Apps, über die Dienstleistungen erbracht oder Waren verkauft werden. Weitere Informationen finden Sie im BFSG-Glossar.

Gute Nachricht für kleine Betriebe: Unternehmen mit weniger als 10 Mitarbeitern und unter 2 Mio. EUR Jahresumsatz sind als Kleinstunternehmen nach § 1 Abs. 3 BFSG teilweise ausgenommen. Aber Vorsicht: Diese Ausnahme schützt nicht vor Abmahnungen nach dem Allgemeinen Gleichbehandlungsgesetz (AGG).

Grundlegende Barrierefreiheit – Kontraste nach WCAG SC 1.4.3, Alt-Texte für Bilder, korrekte Sprachauszeichnung – sollte deshalb jeder Handwerker umsetzen, unabhängig von der Betriebsgröße.

Kontaktformulare barrierefrei gestalten

Das Kontaktformular ist das Herzstück jeder Handwerker-Webseite. Kunden schicken darüber Anfragen für Kostenvoranschläge, Reparaturen oder Beratungstermine. Ein nicht barrierefreies Formular schließt Menschen mit Behinderungen von diesem Zugang aus.

Die häufigsten Fehler: Eingabefelder haben nur Platzhalter-Text statt echte <label>-Elemente (Verstoß gegen WCAG SC 1.3.1 – Info and Relationships). Pflichtfelder sind nur durch Farbe markiert, nicht durch Text oder aria-required (Verstoß gegen SC 1.3.3 – Sensory Characteristics). Und Fehlermeldungen erscheinen ohne Bezug zum betroffenen Feld.

So machst du es richtig: Jedes Feld bekommt ein sichtbares Label. Pflichtfelder werden mit "(Pflichtfeld)" oder einem Sternchen plus Legende gekennzeichnet. Fehlermeldungen erscheinen direkt am Feld und werden per aria-describedby verknüpft. Mehr dazu in unserem Ratgeber Formulare barrierefrei gestalten.

Angebotsrechner und Konfiguratoren

Immer mehr Handwerker bieten Online-Angebotsrechner an – für Zaunbau, Malerarbeiten, Fliesenlegen oder Dachsanierungen. Diese interaktiven Tools fallen klar unter § 1 BFSG, weil sie eine digitale Dienstleistung darstellen.

Typische Barrieren: Schieberegler (Range-Slider) sind nicht per Tastatur bedienbar (Verstoß gegen WCAG SC 2.1.1 – Keyboard). Ergebnis-Berechnungen werden dynamisch eingeblendet, ohne dass Screenreader davon erfahren (Verstoß gegen SC 4.1.3 – Status Messages). Dropdown-Menüs für Materialauswahl fehlen ARIA-Labels.

Lösung: Verwende native HTML-Elemente (<select>, <input type="range">) statt Custom-Widgets. Dynamische Ergebnisse erhalten ein aria-live="polite"-Attribut, damit Screenreader Änderungen ankündigen. Teste den gesamten Rechner einmal nur mit der Tastatur durch – Tab, Enter, Pfeiltasten.

Bildergalerien: Referenzprojekte richtig präsentieren

Vorher-Nachher-Galerien und Referenzfotos sind für Handwerker verkaufsentscheidend. Aber ohne Barrierefreiheit sind sie für viele Nutzer unbrauchbar.

Jedes Bild braucht einen beschreibenden Alt-Text nach WCAG SC 1.1.1 – nicht nur "Bild 1" oder "Referenzprojekt". Gute Beispiele: "Fertig verlegtes Eichenparkett in Wohnzimmer mit offener Küche" oder "Badezimmer nach Komplettsanierung mit bodengleicher Dusche". Lies unseren Ratgeber Alt-Texte richtig schreiben für weitere Tipps.

Lightbox-Galerien müssen per Tastatur bedienbar sein: Öffnen, Blättern und Schließen muss ohne Maus funktionieren (SC 2.1.1). Der Schließen-Button braucht ein aria-label="Galerie schließen". Beim Öffnen der Lightbox muss der Fokus in die Lightbox wechseln, beim Schließen zurück zum auslösenden Element (SC 2.4.3 – Focus Order).

Google Maps barrierefrei einbinden

Fast jede Handwerker-Webseite zeigt eine eingebettete Google-Karte mit dem Firmenstandort. Das Problem: Ein iframe mit Google Maps ist für Screenreader-Nutzer schwer zugänglich und für Tastaturnutzer eine Fokusfalle.

Best Practice: Gib deine vollständige Adresse immer auch als Text auf der Seite an – oberhalb oder unterhalb der Karte. Der iframe erhält ein title-Attribut, z. B. "Karte: Standort Tischlerei Müller in Hamburg-Bergedorf". Ergänze optional einen Link zu Google Maps, damit Nutzer die Karte in einem separaten Fenster öffnen können.

Wenn die Karte rein dekorativ ist, kannst du sie alternativ als statisches Bild mit Alt-Text einbinden – das vermeidet die Fokusfalle komplett.

Online-Terminbuchung: So geht es richtig

Viele Handwerker setzen inzwischen auf Online-Terminbuchung über Tools wie Calendly, Microsoft Bookings oder eigene Lösungen. Sobald du Online-Termine anbietest, ist das eine digitale Dienstleistung nach § 1 BFSG.

Achte darauf: Der Kalender muss per Tastatur navigierbar sein (SC 2.1.1). Ausgewählte Zeitfenster müssen visuell und programmatisch erkennbar sein (SC 4.1.2 – Name, Role, Value). Bestätigungs-E-Mails sollten als Text formatiert sein, nicht als Bild. Mehr zur barrierefreien Buchung findest du in unserem Artikel Booking & Reservierung barrierefrei.

Schritt für Schritt: Handwerker-Webseite barrierefrei machen

Du musst nicht alles auf einmal umsetzen. Folge diesem Fahrplan:

Schritt 1 – Status prüfen: Nutze den kostenlosen BFSG-Scanner von bf-check.de, um den Ist-Zustand deiner Webseite zu erfassen. In 30 Sekunden weißt du, wo die größten Lücken sind.

Schritt 2 – Quick Wins umsetzen: Alt-Texte für alle Bilder ergänzen. Kontraste auf mindestens 4,5:1 für normalen Text bringen (SC 1.4.3). Formular-Labels hinzufügen. Das schafft ein Webdesigner in 2–4 Stunden.

Schritt 3 – Tastaturnavigation testen: Navigiere deine gesamte Webseite nur mit Tab, Enter und Pfeiltasten. Jedes Element muss erreichbar und bedienbar sein. Achte auf sichtbare Fokus-Indikatoren (SC 2.4.7 – Focus Visible).

Schritt 4 – Formulare und Rechner prüfen: Kontaktformulare, Angebotsrechner und Buchungstools einzeln durchtesten. Labels, Fehlermeldungen und dynamische Inhalte kontrollieren.

Schritt 5 – Dokumentieren: Halte in einer Erklärung zur Barrierefreiheit fest, welchen Stand deine Webseite hat und welche Maßnahmen du planst. Das zeigt guten Willen und schützt bei Beschwerden.

Was auf Handwerker-Webseiten oft schiefgeht

Kontaktformulare ohne Labels (nur Platzhalter-Text), Vorher-Nachher-Galerien ohne Alt-Texte, eingebettete Google Maps ohne Textalternative, Telefonnummern nur als Bild, und dunkle Schrift auf dunklem Holz-Hintergrund. Die gute Nachricht: Diese Fehler sind alle in unter einer Stunde behoben.

Weitere typische Stolperfallen: PDF-Dokumente (Angebote, Auftragsbestätigungen) ohne Textstruktur. Videos von Referenzprojekten ohne Untertitel. Und Hamburger-Menüs, die auf mobilen Geräten nicht per Tastatur geöffnet werden können.

Hinweis: Dieser Artikel dient der allgemeinen Information und ersetzt keine Rechtsberatung. Die rechtliche Bewertung hängt vom Einzelfall ab – insbesondere davon, welche digitalen Dienstleistungen du konkret anbietest. Bei Unsicherheit wende dich an einen spezialisierten Rechtsanwalt.

Kostenloser Erstcheck: Lohnt sich das?

Auf jeden Fall. Ein kostenloser BFSG-Scan bei bf-check.de dauert 30 Sekunden und zeigt dir sofort, ob deine Webseite die wichtigsten Kriterien erfüllt. Wenn ja: Alles gut.

Wenn nein: Du weißt genau, was zu tun ist, bevor sich ein Abmahn-Anwalt meldet. Der Scan prüft Kontraste, Alt-Texte, Formular-Labels und Tastaturzugänglichkeit – also genau die Punkte, die auf Handwerker-Webseiten am häufigsten fehlen.

Häufig gestellte Fragen