WebBarrierCheck Kurzbericht

Beispiel-Website

Demo-Bericht mit neutralen Testdaten

Dieser Beispielbericht zeigt, wie WebBarrierCheck von Warnow Digital Solutions die wichtigsten Barrierefreiheits-Hinweise verständlich zusammenfasst: Was ist wichtig, was sollte zuerst behoben werden und welche Aufgaben kann ein Webdesigner direkt umsetzen?

Erstellt am 15.06.2026, 18:58

Auf einen Blick

Automatischer Score44/100
AmpelRot
Geprüfte Seiten2
Offene Hinweise8
Betroffene Elemente8
Kritisch2
Wichtig4
Mittel/Klein2

Wichtigste Maßnahmen

Starte nicht mit allen Details gleichzeitig. Für einen ersten Kurzcheck reichen die wichtigsten Maßnahmen, die Risiko und Nutzererlebnis am stärksten verbessern.

  1. Button hat keinen erkennbaren Namen
    Priorität: kritisch · 1 Seite(n), 1 Element(e).
  2. Bild hat keinen Alternativtext
    Priorität: kritisch · 1 Seite(n), 1 Element(e).
  3. Seitensprache fehlt
    Priorität: wichtig · 2 Seite(n), 2 Element(e).
  4. Seitentitel fehlt oder ist leer
    Priorität: wichtig · 1 Seite(n), 1 Element(e).
  5. Textkontrast ist zu schwach
    Priorität: wichtig · 1 Seite(n), 1 Element(e).

Empfohlener Ablauf

1. Kritische und wichtige Punkte beheben.

2. Wiederverwendete Komponenten zuerst anfassen.

3. Danach Tastaturbedienung, Fokus-Reihenfolge und Screenreader-Fluss manuell prüfen.

Entwickler-To-dos

Die folgenden Punkte sind bewusst als umsetzbare Aufgaben formuliert. Ziel ist nicht ein langer Fehlerkatalog, sondern eine klare Übergabe an Webdesigner oder Entwickler.

kritisch Schneller Fix

Button hat keinen erkennbaren Namen

Kann wichtige Inhalte oder Funktionen für Nutzer mit Hilfsmitteln blockieren.

Ein Button ohne sichtbaren Text oder zugänglichen Namen ist für Screenreader-Nutzer schwer oder gar nicht verständlich.

Betroffene Seiten: 1

  • http://127.0.0.1:33029/

Betroffene Elemente: 1

Beispiel-Element:

button

Beispiel-HTML:

<button></button>

Empfehlung: Button mit sichtbarem Text oder einem klaren aria-label beschriften.

Konkreter Umsetzungsvorschlag: Bei Icon-Buttons z. B. aria-label="Suche öffnen" oder aria-label="Menü schließen" setzen. Wenn möglich sichtbaren Button-Text bevorzugen.

Technische Regel: button-name

kritisch Schneller Fix

Bild hat keinen Alternativtext

Kann wichtige Inhalte oder Funktionen für Nutzer mit Hilfsmitteln blockieren.

Wenn ein Bild Inhalt vermittelt, brauchen Nutzer mit Screenreader eine kurze Textalternative. Rein dekorative Bilder sollten bewusst leer markiert werden.

Betroffene Seiten: 1

  • http://127.0.0.1:33029/

Betroffene Elemente: 1

Beispiel-Element:

img

Beispiel-HTML:

<img src="/missing-product.jpg">

Empfehlung: Für inhaltliche Bilder sinnvollen Alternativtext ergänzen.

Konkreter Umsetzungsvorschlag: Im CMS oder in der Bild-Komponente ein alt-Attribut setzen. Dekorative Bilder mit alt="" markieren, damit sie nicht unnötig vorgelesen werden.

Technische Regel: image-alt

wichtig Schneller Fix

Seitensprache fehlt

Sollte zeitnah behoben werden, besonders auf wiederverwendeten Layouts.

Ohne lang-Attribut wissen Screenreader nicht sicher, in welcher Sprache die Seite vorgelesen werden soll.

Betroffene Seiten: 2

  • http://127.0.0.1:33029/
  • http://127.0.0.1:33029/about.html

Betroffene Elemente: 2

Beispiel-Element:

html

Beispiel-HTML:

<html>

Empfehlung: Am HTML-Element die passende Sprache setzen, z. B. lang="de".

Konkreter Umsetzungsvorschlag: Im App-Layout oder Dokument-Template das root <html>-Element mit dem korrekten lang-Wert ausgeben.

Technische Regel: html-has-lang

wichtig Schneller Fix

Seitentitel fehlt oder ist leer

Sollte zeitnah behoben werden, besonders auf wiederverwendeten Layouts.

Ein klarer Seitentitel hilft bei Orientierung, Browser-Tabs, Verlauf und Screenreader-Navigation.

Betroffene Seiten: 1

  • http://127.0.0.1:33029/

Betroffene Elemente: 1

Beispiel-Element:

html

Beispiel-HTML:

<html>

Empfehlung: Jeder Seite einen eindeutigen, beschreibenden <title> geben.

Konkreter Umsetzungsvorschlag: In Route-Metadaten, Layout oder Template pro Seite einen sprechenden Titel setzen.

Technische Regel: document-title

wichtig Schneller Fix

Textkontrast ist zu schwach

Sollte zeitnah behoben werden, besonders auf wiederverwendeten Layouts.

Zu wenig Kontrast macht Text schwer lesbar, besonders bei kleinen Schriften, Mobilgeräten oder Sehbeeinträchtigungen.

Betroffene Seiten: 1

  • http://127.0.0.1:33029/

Betroffene Elemente: 1

Beispiel-Element:

p

Beispiel-HTML:

<p style="color: #aaa; background: #fff;">Low contrast sample text.</p>

Empfehlung: Text- und Hintergrundfarben so anpassen, dass der Mindestkontrast erfüllt wird.

Konkreter Umsetzungsvorschlag: Brand-Farben für normale, Hover-, Disabled- und Fokus-Zustände prüfen und schwache Kombinationen ersetzen.

Technische Regel: color-contrast

mittel Schneller Fix

Zoomen ist eingeschränkt

Verbessert Verständlichkeit und Bedienbarkeit, ist aber meist kein Sofort-Blocker.

Nutzer müssen Inhalte vergrößern können. Deaktiviertes Zoomen erschwert die Bedienung auf mobilen Geräten.

Betroffene Seiten: 1

  • http://127.0.0.1:33029/

Betroffene Elemente: 1

Beispiel-Element:

meta[name="viewport"]

Beispiel-HTML:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Empfehlung: Zoom nicht über das viewport-meta-Tag blockieren.

Konkreter Umsetzungsvorschlag: user-scalable=no und maximum-scale-Werte entfernen, die das Vergrößern verhindern.

Technische Regel: meta-viewport

mittel Schneller Fix

Überschriften-Reihenfolge ist nicht logisch

Verbessert Verständlichkeit und Bedienbarkeit, ist aber meist kein Sofort-Blocker.

Eine saubere Überschriftenstruktur hilft Nutzern, Inhalte schnell zu erfassen und per Screenreader zu navigieren.

Betroffene Seiten: 1

  • http://127.0.0.1:33029/

Betroffene Elemente: 1

Beispiel-Element:

h3

Beispiel-HTML:

<h3>Featured product</h3>

Empfehlung: Überschriften hierarchisch ordnen und keine Ebenen überspringen.

Konkreter Umsetzungsvorschlag: Seitenstruktur prüfen und h1, h2, h3 usw. so einsetzen, dass Abschnitte nachvollziehbar aufgebaut sind.

Technische Regel: heading-order

Geprüfte Seiten

Seite URL Status HTTP Hinweise Fehler
http://127.0.0.1:33029/ http://127.0.0.1:33029/ geprüft 200 7
About Fixture Shop http://127.0.0.1:33029/about.html geprüft 200 1

Grenzen dieses Kurzchecks

WebBarrierCheck ist ein technischer Kurzcheck ausgewählter Webseiten. Der Bericht ist kein Rechtsgutachten, kein Zertifikat und kein vollständiger WCAG-, EAA-, BehiG- oder eCH-0059-Audit. Automatisierte Tools und begrenzte manuelle Checks können viele häufige Barrierefreiheitsprobleme sichtbar machen, aber nicht vollständig bestimmen, ob eine Website barrierefrei oder rechtlich konform ist.

Automatische Tests finden viele technische Probleme, aber nicht alles. Wichtige manuelle Prüfungen sind zum Beispiel Tastaturbedienung, verständliche Alternativtexte, Fokus-Reihenfolge, Formularverständlichkeit und echte Screenreader-Nutzung.

Nächster sinnvoller Schritt

Die Top-Maßnahmen als kleines Entwickler-Backlog aufbereiten, umsetzen lassen und danach erneut prüfen.

WebBarrierCheck Kurzcheck