Beispiel für einen Barrierefreiheitsbericht
Dieses statische Beispiel zeigt, welche Art von Bericht der automatisierte Scanner erstellen kann: konkrete Findings, WCAG-Verweise, betroffenen Kontext und Hinweise, die Ihr Team anpasst.
Klare, umsetzbare Findings
Berichte zeigen betroffene Selektoren, Schweregrad, WCAG-Zuordnung und betroffene Seiten, damit Entwickler priorisieren können.
Beispiel-Finding: fehlender Alt-Text
HTML: <img src='logo.png'> Finding: Ein informatives Bild hat keine Textalternative. WCAG: 1.1.1 Nicht-Text-Inhalt.
Beispielhinweis
Der Bericht kann vorschlagen, ein sinnvolles alt-Attribut zu ergänzen, zum Beispiel <img src='logo.png' alt='Firmenlogo'>. Ihr Team prüft weiterhin, ob der Text im Kontext stimmt.
Über Automatisierung hinaus
Der Bericht markiert auch Prüfungen, die manuell bewertet werden müssen, etwa logische Fokusreihenfolge, sinnvolle Alternativtexte und Verhalten in Interaktionszuständen.
Beispiel für annotierten Kontext
Wenn verfügbar, zeigt der Bericht den betroffenen UI-Kontext neben dem Regelergebnis, damit Teams ein automatisiertes Finding schneller der Seite zuordnen können.
1.4.3 Contrast (Minimum)
Fix any of the following: Element has insufficient color contrast of 2.94 (foreground color: #9ca3af, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
Ensure that text has a contrast ratio of at least 4.5:1 against its background color to be legible for people with moderately low vision.
Technische Details
Fehlerhaftes Markup → Beispielhafte Behebung
<a href="/about" class="nav-link text-gray-400 bg-white">About Us</a><a href="/about" class="nav-link text-gray-700 bg-white">About Us</a>Beispielhafte Behebung: Anleitung für Ihren Code, wird nicht auf Ihre Website angewandt.
Lesen Sie die axe-Anleitung: 1.4.3(öffnet in einem neuen Tab)