Eingabehilfen öffnen

Accessibility-Audit: So prüfst du deine Website selbst

01.06.2026

MyWebsiteService

Ein professioneller Accessibility-Audit ist der sicherste Weg zur WCAG 2.2-Konformität. Aber auch ein gut durchgeführter Selbsttest liefert wertvolle Erkenntnisse — und kostet nichts außer Zeit. Welche Tools helfen, was sie messen und wo ihre Grenzen liegen.

Warum ein Accessibility-Audit wichtig ist

Das BFSG gilt seit dem 28. Juni 2025. Wer nicht weiß, wo die eigene Website steht, kann keine gezielten Maßnahmen einleiten. Automatisierte Tools erkennen nur ca. 30–40 % aller Accessibility-Probleme — sie sind ein unentbehrlicher Einstiegspunkt, ersetzen aber kein manuelles Testing.

Die wichtigsten kostenlosen Tools

WAVE — WebAIM

WAVE (wave.webaim.org) ist das benutzerfreundlichste Einstiegstool. Die Browser-Extension markiert Fehler, Warnungen und strukturelle Elemente direkt auf der Seite. Besonders hilfreich: Fehlende Alt-Texte, Kontrast-Verstöße und fehlende Labels werden sofort sichtbar. Stärke: Visuell, leicht verständlich. Schwäche: Keine dynamischen Inhalte, Tastaturnavigation muss manuell geprüft werden.

Google Lighthouse

Direkt in Chrome DevTools (F12 → Lighthouse → Accessibility). Gibt eine Punktzahl von 0–100. Besonders stark bei fehlenden ARIA-Attributen, Sprachattributen und Dokumentstruktur. Wichtig: Eine Punktzahl von 100 bedeutet nicht WCAG 2.2 AA-Konformität — das wird häufig missverstanden.

axe DevTools

axe (Browser-Extension von Deque) gilt als das genaueste automatisierte Tool mit der niedrigsten Falsch-Positiv-Rate. Die kostenlose Version deckt die wichtigsten WCAG-Kriterien ab und liefert direkte Handlungsempfehlungen pro Fehler.

HeadingsMap

Diese Browser-Extension zeigt die Überschriften-Hierarchie der Seite als Baum. Sofort sichtbar: Fehlende h1, übersprungene Ebenen, mehrfache h1-Tags — unverzichtbar für jeden Audit.

WebAIM Contrast Checker

Unter webaim.org/resources/contrastchecker lassen sich zwei Farbwerte eingeben. Das Tool berechnet das Kontrastverhältnis und zeigt, ob es WCAG AA erfüllt.

Schritt-für-Schritt: Der Selbst-Audit

  • 1

    Tastaturtest: Maus weglegen. Tab-Taste drücken und durch die gesamte Website navigieren. Ist immer sichtbar, wo der Fokus liegt? Kann man alle Formulare ausfüllen und absenden?

  • 2

    WAVE starten: Extension installieren, wichtigste Seiten aufrufen. Rote Fehler sofort notieren, gelbe Warnungen prüfen.

  • 3

    Lighthouse-Audit: F12 → Lighthouse → nur „Accessibility“ → Seitenaudit ausführen. Ergebnisse dokumentieren.

  • 4

    axe DevTools: „Scan ALL of my page“ klicken, jeden Fehler prüfen und in einer Tabelle festhalten.

  • 5

    HeadingsMap prüfen: Überschriften-Hierarchie auf allen wichtigen Seiten prüfen: genau eine h1, sinnvolle h2/h3-Struktur.

  • 6

    Kontraste messen: Wichtigste Textfarbe auf häufigstem Hintergrund im WebAIM Contrast Checker prüfen.

  • 7

    Bilder-Check: Jedes Bild: Alt-Text vorhanden und beschreibend? Dekorative Bilder mit alt=““ versehen?

  • 8

    Formulare prüfen: Alle Felder: sichtbares Label? Verständliche Fehlermeldungen? Per Tastatur absendbar?

Was automatisierte Tools nicht finden

  • Ob Alt-Texte inhaltlich korrekt und hilfreich sind
  • Ob die Reihenfolge der Inhalte logisch ist
  • Ob Fehlermeldungen verständlich erklären, was zu tun ist
  • Ob komplexe Interaktionen (Dropdowns, Modals, Akkordeons) wirklich barrierefrei bedienbar sind
  • Ob die Sprache der Seite wirklich einfach und verständlich ist

Fazit: Ein Selbst-Audit ist ein wertvoller Startpunkt. Für rechtssichere WCAG 2.2 AA-Konformität braucht es manuelles Testing und einen professionellen Audit.

Ergebnisse priorisieren

  • Priorität 1 — Sofort: Fehlende Alt-Texte, nicht bedienbare Formulare, kritische Kontrast-Fehler.

  • Priorität 2 — Zeitnah: Fehlende Labels, schwache Fokus-Indikatoren, unstrukturierte Überschriften.

  • Priorität 3 — Mittelfristig: ARIA-Verbesserungen, Sprachoptimierungen.

Über MyWebsiteService

MyWebsiteService ist die Münchner Agentur von Katja Hazod — seit 2012 an der Seite von Unternehmen, NGOs und Selbständigen. Der Fokus auf barrierefreies Webdesign begann 2018 mit einer Anfrage eines Gehörlosen-Verbands. Seitdem sind wir beflügelt von der Idee, jede Website für wirklich jede Person zugänglich zu machen — mit viel Liebe, Empathie und Wertschätzung.

Unsere Werte: wertschätzend · offen · ehrlich · liebevoll
Unser Motto: Liebe. Lebe. Lache.

Sie möchten wissen, wo Ihre Website wirklich steht? Wir führen einen professionellen Audit durch.

Häufig gestellte Fragen zu Gemeinnützigen Organisationen (NGO)

Wie stelle ich sicher, dass die Überschriften-Hierarchie stimmt?

Im Fusion Builder kann beim Heading-Element das HTML-Tag (h1 bis h6) unabhängig von der visuellen Schriftgröße eingestellt werden. Wichtig: pro Seite genau eine h1, dann logisch verschachtelte h2 und h3. Die Browser-Extension „HeadingsMap“ hilft beim schnellen Prüfen.

Was ist der Unterschied zwischen dem Fusion Builder und dem Gutenberg-Editor?

Gutenberg ist der native WordPress-Editor mit Block-Prinzip. Der Avada Fusion Builder bietet deutlich mehr Gestaltungsoptionen pro Element, globale Einstellungen für Farben und Schriften sowie engere Integration mit dem Avada-Theme. Für komplex gestaltete Seiten mit hohem Designanspruch bietet der Fusion Builder mehr Möglichkeiten.

Kann ich als Kunde den Fusion Builder selbst bedienen?

Ja. Der Fusion Builder ist so aufgebaut, dass Kunden nach einer kurzen Einweisung Texte, Bilder und viele Layoutelemente selbst bearbeiten können. Wir konfigurieren Avada dabei so, dass nur die für den Kunden relevanten Bereiche editierbar sind — das verhindert versehentliche Änderungen am Design.

Ist der Avada Fusion Builder von Haus aus barrierefrei?

Der Fusion Builder liefert eine gute Grundlage: Die generierten Elemente verwenden semantisches HTML und grundlegende ARIA-Attribute. WCAG 2.2 AA-Konformität erfordert jedoch zusätzlich korrekte Konfiguration — Alt-Texte, zugängliche Formularlabels, korrekte Überschriften-Hierarchie. Diese Konfiguration ist im Fusion Builder gut möglich, passiert aber nicht automatisch.

Was ist eine Tastaturfalle?

Eine Tastaturfalle entsteht, wenn ein Nutzer, der ausschließlich die Tastatur verwendet, in einen Bereich der Website gelangt — z.B. ein Modal oder Dropdown — und diesen nicht mehr verlassen kann. Das passiert häufig, wenn Dialoge den Fokus nicht korrekt einfangen und beim Schließen zurückgeben.

Warum sind fehlende Alt-Texte so problematisch?

Ohne Alt-Text hören Screenreader-Nutzer entweder gar nichts oder den Dateinamen des Bildes — beides ist nutzlos. Zusätzlich können Suchmaschinen das Bild nicht indexieren. Fehlende Alt-Texte sind einer der häufigsten und gleichzeitig am einfachsten zu behebenden Accessibility-Fehler.

Was ist ein ausreichender Farbkontrast nach WCAG?

WCAG 2.2 AA fordert mindestens 4,5:1 für normalen Text und 3:1 für großen Text (ab 18pt unformatiert oder 14pt fett). Mit dem kostenlosen WebAIM Contrast Checker lassen sich Farbkombinationen schnell prüfen.

Wie finde ich Accessibility-Fehler auf meiner Website?

Kostenlose Tools wie WAVE oder der Lighthouse-Audit in Chrome geben einen ersten Überblick. Wichtig: Diese Tools erkennen nur ca. 30–40 % aller Barrieren. Der Rest erfordert manuelles Testing — mit einem echten Screenreader und vollständiger Tastaturnavigation.

Nach oben