Beispiel-Prüfbericht
So sieht ein vollständiger Report aus. Geprüfte URL: https://beispiel-shop.de
Barrierefreiheits-Score
24
Score begrenzt: 7 kritische Stellen gefunden
Wie kommt dieser Score zustande?
Basis-Score (bestandene von geprüften Regeln): 77/100
Abzug für gefundene Mängel, nach Schwere gewichtet: −53
Score gedeckelt auf maximal 60, weil: 7 kritische Stellen gefunden
Kritische oder schwerwiegende Mängel begrenzen den Score bewusst nach oben: Ein einzelner blockierender Fehler kann die Nutzung komplett verhindern, selbst wenn viele andere Regeln bestanden wurden.
Kleine Schwankungen von wenigen Punkten zwischen zwei Prüfungen sind normal, auch ohne Änderungen an der Seite (dynamische Inhalte, Ladezeitpunkt). Aussagekräftig ist die Richtung über mehrere Prüfungen, nicht jeder einzelne Punkt.
Automatisch geprüft nach WCAG 2.1 AA · Erkennt ca. 30–40 % aller Barrieren · Ein hoher Score schließt manuelle Prüfbedürfnisse nicht aus
Handlungsbedarf. Im Detailbericht unten findest du die priorisierten Maßnahmen.
Wir haben 12 Probleme auf 8 Seiten gefunden. Der vollständige Report enthält konkrete Fundstellen, Screenshots und Fix-Anweisungen.
Einschätzung für beispiel-shop.de
Bei der Analyse von 8 Seiten wurden 12 automatisch erkennbare Probleme gefunden, darunter kritische Mängel. Wir empfehlen dringend, diese Probleme zu beheben. Beachte: Dieser Scan deckt automatisch prüfbare Kriterien ab, für eine vollständige Bewertung ist eine ergänzende manuelle Prüfung nötig.
Gefundene Probleme nach Schweregrad
4
Blockieren den Zugang komplett
7 betroffene Stellen
6
Erschweren die Nutzung stark
8 betroffene Stellen
2
Beeinträchtigen die Nutzung
2 betroffene Stellen
0
Sollten verbessert werden
Technische Scan-Details anzeigen
8
Seiten analysiert
53
Regeln geprüft
12
Probleme gefunden
17
Betroffene Elemente
5 Kriterien konnten nicht automatisch bewertet werden und sind im Detailbericht als "Manuell prüfen" aufgeführt.
Geprüfte Seiten anzeigen
- https://beispiel-shop.de
- https://beispiel-shop.de/produkte
- https://beispiel-shop.de/kontakt
- https://beispiel-shop.de/ueber-uns
- https://beispiel-shop.de/impressum
- https://beispiel-shop.de/datenschutz
- https://beispiel-shop.de/warenkorb
- https://beispiel-shop.de/checkout
Alle gefundenen Barrieren für beispiel-shop.de mit konkreten Handlungsempfehlungen.
Nächste 3 Schritte
Lade den vollständigen PDF-Report herunter und sende ihn an deinen Webentwickler oder deine Agentur.
Diese 3 Probleme zuerst beheben:
- Bilder ohne Alternativtext
- Formularfelder ohne Beschriftung
- Buttons ohne erkennbaren Text
Danach eine manuelle Prüfung durchführen (Checkliste im PDF), denn der automatische Scan erkennt ca. 30–40 % aller Barrieren.
Bei der Prüfung wurden 12 Probleme gefunden, davon 10 mit sofortigem Handlungsbedarf. Wir empfehlen dringend, diese Mängel zu beheben. Geschätzter Aufwand für einen erfahrenen Webentwickler: ca. 9–19 Stunden. Bei komplexen Websites kann der Aufwand abweichen.
Vollständiger Report
Alle Mängel mit Code-Stellen, Maßnahmenplan, Checkliste und Barrierefreiheitserklärung für deinen Entwickler.
Barrierefreiheitserklärung
1–2 Seiten, gesetzlich vorgeschrieben. Auf deiner Website als eigene Seite veröffentlichen und im Footer verlinken.
HTML für deine Website
Fertig formatierter Code zum direkten Einfügen in WordPress, Webflow oder jedes andere CMS.
Brief für deinen Webmaster
Fertiger Text zum Kopieren, erklärt in einfachen Worten, was zu tun ist. Für alle, die selbst keinen Code anfassen.
Report per E-Mail schicken
Wir senden dir den vollständigen PDF-Report als Anhang plus den dauerhaften Link zu dieser Seite.
Barrierefreiheitserklärung personalisieren (optional)
Diese Daten erscheinen in der Barrierefreiheitserklärung im PDF. Sie werden nicht gespeichert.
Zusammenfassung für Entscheider
Bei der Prüfung wurden 12 Probleme gefunden, davon 10 mit sofortigem Handlungsbedarf. Wir empfehlen dringend, diese Mängel zu beheben. Geschätzter Aufwand für einen erfahrenen Webentwickler: ca. 9–19 Stunden. Bei komplexen Websites kann der Aufwand abweichen.
Priorisierter Maßnahmenplan
Schnelle Fixes (unter 1 Stunde)
Füge ein <label for="id">-Element für jedes Eingabefeld hinzu oder nutze aria-label/aria-labelledby. Bei einem Menü-Toggle reicht oft ein aria-label="Menü öffnen" auf der Checkbox oder dem zugehörigen <label>-Element.
Füge einen sichtbaren Text, aria-label oder title zum Button hinzu.
Füge beschreibenden Text zum Link hinzu oder nutze aria-label. Vermeide generische Texte wie "hier klicken".
Füge einen "Zum Inhalt springen"-Link am Anfang der Seite hinzu oder nutze ARIA-Landmarks.
Füge lang="de" zum <html>-Tag hinzu (oder die passende Sprache deiner Website).
Stelle sicher, dass Überschriften hierarchisch geordnet sind. Nach h1 folgt h2, nicht h3.
Größere Anpassungen
Füge ein alt-Attribut zu jedem <img>-Element hinzu, das den Bildinhalt beschreibt. Dekorative Bilder erhalten alt="".
Füge Untertitel (<track kind="captions">) zu jedem Video-Element hinzu.
Erhöhe den Farbkontrast auf mindestens 4,5:1 für normalen Text und 3:1 für großen Text (Großer Text = mind. 18pt/24px oder 14pt fett/~19px bold). Nutze einen Kontrastprüfer wie WebAIM (webaim.org/resources/contrastchecker/).
Verwende einen gültigen autocomplete-Wert wie "name", "email" oder "tel".
Verwende tabindex="0" oder tabindex="-1" statt positiver Werte. Ordne Elemente im HTML in der gewünschten Reihenfolge.
Strukturiere die Seite mit den HTML-Elementen <header>, <nav>, <main> und <footer>. (Einmalige Template-Anpassung)
Bilder ohne Alternativtext
Screenreader-Nutzer erfahren nicht, was auf dem Bild zu sehen ist, und verpassen dadurch relevante Informationen.
Bilder müssen einen alternativen Text haben, damit Screenreader sie beschreiben können.
So behebst du das Problem:
Füge ein alt-Attribut zu jedem <img>-Element hinzu, das den Bildinhalt beschreibt. Dekorative Bilder erhalten alt="".
Code-Beispiel anzeigen
<!-- Inhaltliches Bild --> <img src="logo.png" alt="Firmenlogo Mustermann GmbH"> <!-- Dekoratives Bild --> <img src="decoration.png" alt="">
Betroffene Stellen (2 auf 2 Seiten)
/
Element hat kein alt-Attribut
Quellcode anzeigen (für Entwickler)
<img src="/images/hero-banner.jpg" class="hero-image">/produkte
Element hat kein alt-Attribut
Quellcode anzeigen (für Entwickler)
<img src="/images/produkt-1.jpg" class="product-thumb">Formularfelder ohne Beschriftung
Nutzer mit Screenreader wissen nicht, was ein Feld tut oder was sie eintragen sollen. Bei einem unsichtbaren Menü-Toggle bedeutet das: Sie hören nur "Checkbox", aber nicht, dass es das Hauptmenü öffnet.
Jedes Formularfeld muss ein zugeordnetes <label>-Element oder ein aria-label haben. Das betrifft nicht nur sichtbare Texteingabefelder, sondern jedes <input>-Element, z.B. auch eine unsichtbare Checkbox, die im Hintergrund ein Menü ein- oder ausklappt (ein verbreitetes technisches Muster für Hamburger-Menüs auf Mobilgeräten).
So behebst du das Problem:
Füge ein <label for="id">-Element für jedes Eingabefeld hinzu oder nutze aria-label/aria-labelledby. Bei einem Menü-Toggle reicht oft ein aria-label="Menü öffnen" auf der Checkbox oder dem zugehörigen <label>-Element.
Code-Beispiel anzeigen
<!-- Falsch --> <input type="email" placeholder="E-Mail"> <!-- Richtig --> <label for="email">E-Mail-Adresse</label> <input id="email" type="email"> <!-- Falsch (Menü-Toggle) --> <input type="checkbox" id="menu-toggle"> <!-- Richtig --> <input type="checkbox" id="menu-toggle" aria-label="Menü öffnen">
Betroffene Stellen (2 auf 2 Seiten)
/
Eines der folgenden Probleme beheben: Das Formular-Element hat kein label-Element Das Formular-Element hat kein aria-label Attribut Das Formular-Element hat kein aria-labelledby Attribut
Quellcode anzeigen (für Entwickler)
<input type="email" placeholder="E-Mail eingeben" class="newsletter-input">/produkte
Eines der folgenden Probleme beheben: Das Formular-Element hat kein label-Element
Quellcode anzeigen (für Entwickler)
<input type="search" placeholder="Suchen..." class="search-field">Buttons ohne erkennbaren Text
Screenreader-Nutzer können nicht erkennen, was der Button auslöst, und bedienen ihn deshalb nicht.
Buttons müssen einen erkennbaren Text haben, damit sie per Screenreader bedienbar sind.
So behebst du das Problem:
Füge einen sichtbaren Text, aria-label oder title zum Button hinzu.
Code-Beispiel anzeigen
<!-- Falsch --> <button><svg>...</svg></button> <!-- Richtig --> <button aria-label="Menü schließen"><svg aria-hidden="true">...</svg></button>
Betroffene Stellen (2 auf 2 Seiten)
/
Element hat keinen für Screenreader sichtbaren Text
Quellcode anzeigen (für Entwickler)
<button class="close-btn"><svg>...</svg></button>/warenkorb
Element hat keinen für Screenreader sichtbaren Text
Quellcode anzeigen (für Entwickler)
<button class="cart-btn"><img src="/icons/cart.png"></button>Videos ohne Untertitel
Gehörlose oder schwerhörige Nutzer verstehen den gesprochenen Inhalt des Videos nicht.
Videos müssen Untertitel enthalten, damit gehörlose Nutzer den Inhalt verstehen.
So behebst du das Problem:
Füge Untertitel (<track kind="captions">) zu jedem Video-Element hinzu.
Betroffene Stellen (1 auf 1 Seite)
/
Video-Element hat kein track-Element mit kind="captions"
Quellcode anzeigen (für Entwickler)
<video src="/videos/produkt-demo.mp4" autoplay></video>Unzureichender Farbkontrast
Nutzer mit Sehschwäche oder in heller Umgebung (z.B. Smartphone in der Sonne) können den Text nicht lesen.
Der Kontrast zwischen Vordergrund- und Hintergrundfarbe erreicht nicht das geforderte Minimum.
So behebst du das Problem:
Erhöhe den Farbkontrast auf mindestens 4,5:1 für normalen Text und 3:1 für großen Text (Großer Text = mind. 18pt/24px oder 14pt fett/~19px bold). Nutze einen Kontrastprüfer wie WebAIM (webaim.org/resources/contrastchecker/).
Code-Beispiel anzeigen
/* Zu heller Text: schlecht */
p { color: #aaaaaa; background: #ffffff; } /* Kontrast: 2,32:1 */
/* Ausreichend dunkel: gut */
p { color: #595959; background: #ffffff; } /* Kontrast: 7,0:1 */Betroffene Stellen (3 auf 2 Seiten)
/
Farbkontrast zu gering: 2.8 (Textfarbe: #ff6b35, Hintergrund: #ffffff). Mindestens 4.5:1 erforderlich.
Quellcode anzeigen (für Entwickler)
<a href="/sale" class="nav-link sale-link">SALE</a>Farbkontrast zu gering: 2.3 (Textfarbe: #cccccc, Hintergrund: #ffffff). Mindestens 4.5:1 erforderlich.
Quellcode anzeigen (für Entwickler)
<button class="btn-ghost">Mehr erfahren</button>/produkte
Farbkontrast zu gering: 3.1 (Textfarbe: #aaaaaa, Hintergrund: #f8f8f8). Mindestens 4.5:1 erforderlich.
Quellcode anzeigen (für Entwickler)
<p class="price-old">29,99 €</p>Links ohne erkennbaren Text
Screenreader-Nutzer hören nur „Link" ohne zu wissen, wohin er führt, und müssen raten oder überspringen ihn.
Links müssen einen erkennbaren Text haben, damit Nutzer verstehen, wohin sie führen.
So behebst du das Problem:
Füge beschreibenden Text zum Link hinzu oder nutze aria-label. Vermeide generische Texte wie "hier klicken".
Code-Beispiel anzeigen
<!-- Falsch --> <a href="/mehr">Hier klicken</a> <a href="/pdf"><img src="icon.png"></a> <!-- Richtig --> <a href="/mehr">Mehr über unsere Dienstleistungen</a> <a href="/pdf"><img src="icon.png" alt="PDF herunterladen"></a>
Betroffene Stellen (1 auf 1 Seite)
/
Element hat keinen für Screenreader sichtbaren Text
Quellcode anzeigen (für Entwickler)
<a href="/produkte/12"><img src="/icons/arrow.svg"></a>Fehlende Möglichkeit zum Überspringen
Tastatur- und Screenreader-Nutzer müssen bei jedem Seitenaufruf das komplette Menü durchgehen, bevor sie den eigentlichen Inhalt erreichen.
Es fehlt eine Möglichkeit, wiederholende Navigationselemente zu überspringen.
So behebst du das Problem:
Füge einen "Zum Inhalt springen"-Link am Anfang der Seite hinzu oder nutze ARIA-Landmarks.
Betroffene Stellen (1 auf 1 Seite)
/
Eines der folgenden Probleme beheben: Kein Skip-Navigation-Link vorhanden Keine Landmark-Region vorhanden
Dieser Fund betrifft die gesamte Seite bzw. das Stylesheet, kein einzelnes Element. Daher gibt es hier keinen spezifischeren Code-Ausschnitt.
Fehlende Sprach-Auszeichnung
Screenreader wählen möglicherweise die falsche Sprachausgabe und lesen deutsche Inhalte mit falscher Aussprache vor.
Das <html>-Element muss ein lang-Attribut besitzen, damit Screenreader die richtige Sprache verwenden.
So behebst du das Problem:
Füge lang="de" zum <html>-Tag hinzu (oder die passende Sprache deiner Website).
Code-Beispiel anzeigen
<!-- Falsch --> <html> <!-- Richtig --> <html lang="de">
Betroffene Stellen (1 auf 1 Seite)
/produkte
Element hat kein lang-Attribut
Dieser Fund betrifft die gesamte Seite bzw. das Stylesheet, kein einzelnes Element. Daher gibt es hier keinen spezifischeren Code-Ausschnitt.
Ungültiger autocomplete-Wert
Nutzer mit motorischen oder kognitiven Einschränkungen bekommen keine Ausfüllhilfe des Browsers und müssen alles manuell eintippen.
Das autocomplete-Attribut muss einen gültigen Wert verwenden.
So behebst du das Problem:
Verwende einen gültigen autocomplete-Wert wie "name", "email" oder "tel".
Betroffene Stellen (1 auf 1 Seite)
/checkout
autocomplete-Attribut hat keinen gültigen Wert: "vorname"
Quellcode anzeigen (für Entwickler)
<input type="text" autocomplete="vorname" name="fname">Positiver Tabindex verwendet
Tastaturnutzer springen in einer unlogischen Reihenfolge durch die Seite und verlieren die Orientierung.
Ein positiver tabindex-Wert ändert die natürliche Tab-Reihenfolge und kann Nutzer verwirren.
So behebst du das Problem:
Verwende tabindex="0" oder tabindex="-1" statt positiver Werte. Ordne Elemente im HTML in der gewünschten Reihenfolge.
Betroffene Stellen (1 auf 1 Seite)
/
Element hat einen tabindex größer als 0
Quellcode anzeigen (für Entwickler)
<a href="/kontakt" tabindex="5">Kontakt</a>Manuell zu prüfen
Diese Prüfkriterien konnten automatisch nicht eindeutig bewertet werden, sie können ein Problem sein oder auch nicht. Ein Entwickler oder Accessibility-Experte muss sie manuell prüfen.
Unzureichender Farbkontrast
Der Kontrast zwischen Vordergrund- und Hintergrundfarbe erreicht nicht das geforderte Minimum.
1 betroffene Stelle, manuelle Prüfung erforderlich
Sichtbarer Text und barrierefreier Name müssen übereinstimmen
Visueller Text und barrierefreier Name stimmen möglicherweise nicht überein.
1 betroffene Stelle, manuelle Prüfung erforderlich
So geht es weiter
Leite diesen Report an deinen Webentwickler oder deine Agentur weiter. Die Probleme sind so beschrieben, dass ein Entwickler sie direkt umsetzen kann. Lade dazu den PDF-Report oben herunter.
Hilfe benötigt? Schreib uns an support@bfsg-score.de, wir empfehlen gerne qualifizierte Entwickler.
Nächste Schritte
- 1. Lade den PDF-Report herunter und leite ihn an deinen Webentwickler weiter.
- 2. Arbeite die priorisierten Maßnahmen ab, die schnellen Fixes zuerst.
- 3. Scanne deine Website nach den Korrekturen erneut, um den Fortschritt zu prüfen.
- 4. Arbeite die manuelle Checkliste im PDF ab für eine vollständigere Abdeckung.
Fachbegriff-Glossar
- PDF-Report herunterladen und die Barrierefreiheitserklärung als eigene Unterseite (z.B.
/barrierefreiheit) auf deiner Website veröffentlichen - Link zur Erklärung barrierefrei im Footer der Website einbinden
- Erklärung jährlich oder nach wesentlichen Änderungen aktualisieren
Bereit für deinen eigenen Scan?
Prüfe deine Website und erhalte deinen personalisierten Report mit konkreten Handlungsempfehlungen und der Barrierefreiheitserklärung.
Jetzt eigene Website prüfen