Viele Probleme sind nicht sichtbar
Eine Seite kann optisch aufgeräumt wirken und trotzdem fehlerhafte Semantik, unklare ARIA-Attribute oder versteckte Bedienprobleme enthalten.
BFSG‑Checkliste
BFSG‑Checkliste für Websites: Was Sie selbst prüfen können
Diese Checkliste zeigt Ihnen typische erste Prüfpunkte. Sie ersetzt aber keinen vollständigen Accessibility-Check, weil viele Probleme erst in Code, Formularen, Tastaturbedienung und Screenreader-Ausgabe sichtbar werden.
Technische und praktische Einschätzung - keine Rechtsberatung. Dieser Check ersetzt keine juristische Prüfung.
Realitätscheck
Warum eine einfache Checkliste oft nicht reicht
Selbst prüfen ist ein guter Start. Die wichtigsten Barrieren entstehen aber häufig in Details, die man ohne technische Prüfung, Tastaturtest oder Screenreader-Perspektive nicht sicher erkennt.
Formulare brauchen mehr als sichtbare Texte
Labels, Pflichtfelder, Hilfetexte und Fehlermeldungen müssen technisch verbunden sein, damit sie auch mit assistiven Technologien verständlich bleiben.
Tastaturbedienung muss im Ablauf funktionieren
Einzelne Links zu erreichen reicht nicht. Menüs, Dialoge, Buchungsstrecken und Formularschritte müssen ohne Maus logisch bedienbar sein.
Screenreader und Mobile zeigen andere Probleme
Die vorgelesene Struktur, Fokus-Reihenfolge und Bedienbarkeit auf kleinen Displays können deutlich von der sichtbaren Desktop-Ansicht abweichen.
Eine erste Orientierung ist besser als Raten
Sie müssen nicht direkt einen großen Audit beauftragen. Für den Einstieg reicht oft ein kostenloser Mini‑Check mit Fokus auf kritische oder offensichtliche Barrieren, damit Sie den akuten Handlungsbedarf besser einordnen können.
10 Prüfpunkte
BFSG‑Checkliste für den ersten Website‑Überblick
Jeder Punkt wirkt auf den ersten Blick einfach. Entscheidend ist aber, ob er in realen Situationen, im Code und in wichtigen Nutzerwegen zuverlässig funktioniert.
-
Punkt 1
Kontrast
Sind Texte, Buttons und Hinweise auch bei eingeschränkter Sicht gut lesbar?
Warum das relevant ist: Gute Kontraste helfen Menschen mit eingeschränkter Sicht und reduzieren zugleich Abbrüche, weil wichtige Informationen schneller erfasst werden.
Wirkt einfach, aber häufige Fehler sind:
- Text auf Bildern oder Farbverläufen ist zu schwach
- Platzhaltertexte werden als Labels genutzt
- Fehlerhinweise sind nur farblich markiert
Was ein professioneller Check zusätzlich betrachtet:
Wir prüfen nicht nur einzelne Farben, sondern auch Zustände wie Hover, Fokus, Fehlermeldungen und mobile Darstellung.
-
Punkt 2
Tastatur-Navigation
Kann man Menüs, Formulare und wichtige Aktionen ohne Maus erreichen?
Warum das relevant ist: Wer keine Maus nutzt, muss trotzdem Angebote, Kontaktwege, Warenkorb oder Buchung vollständig erreichen können.
Wirkt einfach, aber häufige Fehler sind:
- Dropdowns oder mobile Menüs lassen sich nicht per Tastatur öffnen
- Der Fokus springt in unlogischer Reihenfolge über die Seite
- Pop-ups oder Cookie-Banner blockieren den weiteren Weg
Was ein professioneller Check zusätzlich betrachtet:
Ein professioneller Check testet echte Nutzerflows vom Einstieg bis zur Anfrage, Bestellung oder Buchung.
-
Punkt 3
Sichtbarer Fokus
Ist beim Tabben jederzeit klar, welches Element gerade aktiv ist?
Warum das relevant ist: Ein sichtbarer Fokus ist die Orientierungslinie für Tastaturnutzende und verhindert, dass Menschen auf der Seite die Position verlieren.
Wirkt einfach, aber häufige Fehler sind:
- Fokusrahmen wurden im CSS entfernt
- Der Fokus ist nur durch eine sehr leichte Farbänderung erkennbar
- Karten, Links oder Formularfelder haben uneinheitliche Fokuszustände
Was ein professioneller Check zusätzlich betrachtet:
Wir prüfen Fokuszustände über Navigation, Formulare, Modals, Teaser, mobile Menüs und wiederverwendete Komponenten hinweg.
-
Punkt 4
Alternativtexte
Beschreiben informative Bilder ihren Inhalt sinnvoll und sind dekorative Bilder leer markiert?
Warum das relevant ist: Gute Alternativtexte machen Bildinformationen zugänglich und helfen gerade bei Produkten, Referenzen oder erklärenden Grafiken.
Wirkt einfach, aber häufige Fehler sind:
- Produktbilder heißen nur "Bild" oder wiederholen den Dateinamen
- Wichtige Grafiken, Icons oder Siegel haben keine Erklärung
- Dekorative Bilder werden unnötig vorgelesen
Was ein professioneller Check zusätzlich betrachtet:
Ein Check unterscheidet zwischen dekorativen Bildern, informativen Motiven, Produktdetails und Grafiken mit echtem Aussagewert.
-
Punkt 5
Formular-Labels
Hat jedes Eingabefeld ein sichtbares, technisch verbundenes Label?
Warum das relevant ist: Unklare Formularfelder führen zu Fehlern, Rückfragen und abgebrochenen Anfragen genau dort, wo ein Lead entstehen soll.
Wirkt einfach, aber häufige Fehler sind:
- Platzhalter verschwinden beim Tippen und ersetzen echte Labels
- Label und Eingabefeld sehen zusammengehörig aus, sind aber im Code nicht verbunden
- Hilfetexte oder Pflichtfeldhinweise werden nicht dem Feld zugeordnet
Was ein professioneller Check zusätzlich betrachtet:
Wir prüfen die technische Verbindung von Labels, Beschreibungen, Pflichtfeldern und Fehlermeldungen mit dem jeweiligen Formularfeld.
-
Punkt 6
Überschriftenstruktur
Ist die Seite logisch gegliedert und mit einer klaren Reihenfolge aufgebaut?
Warum das relevant ist: Eine klare Struktur macht Inhalte schneller verständlich und hilft Besuchern, relevante Informationen gezielt zu finden.
Wirkt einfach, aber häufige Fehler sind:
- Mehrere H1-Überschriften konkurrieren auf einer Seite
- Überschriften werden nur für die Optik statt für Struktur genutzt
- Wichtige Bereiche sind für Screenreader schwer überspringbar
Was ein professioneller Check zusätzlich betrachtet:
Ein professioneller Check betrachtet die sichtbare Informationsarchitektur und die technische Überschriftenreihenfolge gemeinsam.
-
Punkt 7
Button- und Linktexte
Sind Linkziele und Aktionen eindeutig, auch ohne den umliegenden Kontext?
Warum das relevant ist: Eindeutige Texte verbessern Orientierung, Vertrauen und Abschlussraten, weil Nutzer schneller verstehen, welcher Weg wohin führt.
Wirkt einfach, aber häufige Fehler sind:
- Mehrere Links heißen nur "Mehr erfahren"
- Buttons beschreiben nicht, was nach dem Klick passiert
- Klickbare Karten enthalten unklare oder doppelte Linkziele
Was ein professioneller Check zusätzlich betrachtet:
Wir prüfen Link- und Buttontexte auch aus Screenreader-Sicht, in Listenansichten, Karten, Navigationen und Formularabläufen.
-
Punkt 8
Fehlermeldungen
Werden Fehler verständlich erklärt und dem passenden Feld zugeordnet?
Warum das relevant ist: Gute Fehlermeldungen helfen Menschen, ein Formular erfolgreich abzuschicken, statt im letzten Schritt aufzugeben.
Wirkt einfach, aber häufige Fehler sind:
- Die Meldung lautet nur "Fehler" oder "Ungültig"
- Fehler erscheinen optisch, werden aber nicht programmatisch angekündigt
- Die betroffene Eingabe ist nicht eindeutig erkennbar
Was ein professioneller Check zusätzlich betrachtet:
Ein Check betrachtet Text, Position, technische Zuordnung, Fokusverhalten und Ankündigung von Fehlern in realen Formularsituationen.
-
Punkt 9
Mobile Nutzbarkeit
Bleiben Inhalte, Buttons und Formularfelder auf kleinen Bildschirmen gut bedienbar?
Warum das relevant ist: Viele Anfragen entstehen mobil. Wenn Bedienung oder Lesbarkeit dort schwach sind, verliert die Website unnötig potenzielle Kunden.
Wirkt einfach, aber häufige Fehler sind:
- Buttons liegen zu dicht beieinander
- Cookie-Hinweise, Menüs oder Overlays verdecken wichtige Inhalte
- Formularfelder, Fehlermeldungen oder Tabellen brechen ungünstig um
Was ein professioneller Check zusätzlich betrachtet:
Wir prüfen mobile Layouts nicht nur optisch, sondern auch mit Fokus auf Bedienreihenfolge, Touch-Ziele, Formularfluss und sichtbare Zustände.
-
Punkt 10
Klare Sprache
Sind zentrale Informationen einfach formuliert und schnell auffindbar?
Warum das relevant ist: Klare Sprache senkt Hürden für alle Besucher und macht es leichter, eine Anfrage oder Kaufentscheidung abzuschließen.
Wirkt einfach, aber häufige Fehler sind:
- Wichtige Leistungen, Preise oder nächste Schritte sind zu vage
- Fachbegriffe werden nicht erklärt
- Kontakt- oder Buchungswege sind sprachlich unklar
Was ein professioneller Check zusätzlich betrachtet:
Ein professioneller Check betrachtet, ob Texte, CTAs, Fehlermeldungen und Hinweise in wichtigen Nutzerwegen verständlich zusammenarbeiten.
Einordnung
Selbst prüfen vs. professionell prüfen lassen
Selbst prüfen ist ein guter Start, aber nicht immer der effizienteste Weg, wenn Sie konkrete Ergebnisse, Prioritäten und eine saubere Übergabe benötigen.
Selbst‑Check
Gut für eine erste Orientierung und für offensichtliche Probleme, die Sie direkt erkennen.
- Guter erster Überblick
- Hilfreich für sichtbare Probleme
- Sinnvoll, um ein Gefühl für Barrierefreiheit zu entwickeln
- Kann technische und dynamische Fehler leicht übersehen
Für konkrete Umsetzung
Strukturierter Accessibility-Check
Sinnvoll, wenn Sie nicht nur Auffälligkeiten sammeln, sondern klare nächste Schritte für sich oder Ihr Umsetzungsteam erhalten möchten.
- Priorisierte Fehlerliste
- Screenshots und konkrete Fundstellen
- Technische Erklärung ohne unnötige Fachsprache
- Verständliche Handlungsempfehlungen
- Bessere Übergabe an Webdesigner oder Entwickler
- Weniger Zeitverlust durch unsichere Eigenprüfung
Versteckte Probleme
Typische Barrieren, die eine Checkliste leicht übersieht
Diese Beispiele zeigen, warum Barrierefreiheit nicht nur aus sichtbarer Gestaltung besteht. Oft entscheidet die technische Umsetzung darüber, ob eine Seite wirklich bedienbar ist.
Formular wirkt korrekt, ist technisch aber nicht beschriftet
Das Kontaktformular hat sichtbare Labels. Im Code sind sie aber nicht mit den Eingabefeldern verbunden, sodass Screenreader den Zweck der Felder nicht zuverlässig ausgeben.
Menü sieht bedienbar aus, verliert aber den Fokus
Das mobile Menü öffnet sich mit der Maus. Beim Tabben verschwindet der Fokus jedoch hinter dem Overlay oder springt in den Seiteninhalt.
Button ist sichtbar klar, aber vorgelesen unklar
Mehrere Karten enthalten denselben Buttontext wie "Mehr erfahren". Ohne visuellen Kontext ist nicht erkennbar, welches Angebot oder Produkt gemeint ist.
Fehlermeldung erscheint, wird aber nicht angekündigt
Nach dem Absenden wird ein Fehler optisch angezeigt. Assistive Technologien erhalten jedoch keinen Hinweis und der Fokus bleibt an einer wenig hilfreichen Stelle.
Sie möchten nicht raten, sondern wissen, was auf Ihrer Website wirklich auffällt?
Der kostenlose Website‑Check ist ein niedrigschwelliger erster Schritt. Sie erhalten eine kurze Ersteinschätzung zu kritischen oder offensichtlichen Barrieren - keine vollständige Rechtsprüfung und keinen umfassenden Audit.
FAQ
Häufige Fragen zur BFSG‑Checkliste
Reicht diese Checkliste für BFSG-Konformität?
Nein. Die Checkliste ist eine erste Orientierung für typische und oft sichtbare Barrierefreiheitsprobleme. Sie ersetzt keinen vollständigen technischen Check und keine juristische Prüfung.
Ist der Mini‑Check eine Rechtsberatung?
Nein. Der Mini‑Check ist eine technische und praktische Einschätzung und ersetzt keine Rechtsberatung. Sie erhalten konkrete Beobachtungen, aber keine rechtliche Bewertung.
Was erhalten Sie bei einem vollständigen Check?
Je nach Paket erhalten Sie konkrete Findings mit Fundstellen, Screenshots, Prioritäten, verständlichen Erklärungen und Empfehlungen für die Umsetzung.
Können Sie die Ergebnisse an Ihren Webdesigner weitergeben?
Ja. Die Hinweise sind so formuliert, dass Website-Betreiber sie verstehen und Webdesigner oder Entwickler daraus konkrete nächste Schritte ableiten können.
Für welche Websites lohnt sich ein Check besonders?
Besonders sinnvoll ist ein Check für Online‑Shops, Kontaktformulare, Buchungsstrecken, Praxen, Studios, lokale Dienstleister, Vereine und Websites, die regelmäßig Anfragen erzeugen sollen.
Eine Checkliste zeigt den Einstieg. Ein strukturierter Check zeigt die nächsten Schritte.
Wenn Sie eine verständliche Einschätzung mit konkreten Fundstellen, Prioritäten und Empfehlungen möchten, starten Sie mit dem kostenlosen Website‑Check.
Dieser Check ist eine technische und praktische Einschätzung und ersetzt keine Rechtsberatung.