Barrierefreiheit
Barrierefreiheit prüfen mit axe-core: Farbkontrast, Alt-Texte, Formular-Labels, Tastaturbedienung und ARIA — die wichtigsten WCAG-2.2-Fehlerarten im Überblick.
Barrierefreiheit bedeutet, dass Ihre Website auch mit Screenreader, Tastatur oder bei eingeschränktem Sehvermögen vollständig nutzbar bleibt. EverAudit prüft das automatisiert mit axe-core gegen WCAG 2.2 AA — von Farbkontrast über Alt-Texte bis zur Tastaturbedienung — und meldet konkrete, priorisierte Befunde statt einer pauschalen Note.
Was prüft EverAudit in der Kategorie Barrierefreiheit?#
EverAudit lässt axe-core (Deque) per Playwright über jede gecrawlte Seite laufen und wertet das Ergebnis gegen WCAG 2.2 AA aus. Das deckt über 100 einzelne Prüfregeln ab — von technischen Markup-Fehlern bis zu fehlenden Textalternativen. Ergänzend prüft ein optionaler Tastatur-Fokus-Check, ob sich Bedienelemente ohne Maus erreichen und bedienen lassen.
Automatisierte Scans finden zuverlässig strukturelle und semantische Fehler im HTML — sie ersetzen aber keine vollständige manuelle Prüfung mit echten Hilfsmitteln wie Screenreadern. EverAudit liefert damit die technische Basis, auf der eine tiefere Prüfung aufbauen kann.
Warum prüft EverAudit gerade diese Fehlerarten?#
Die Kategorie a11y bündelt Befunde nach Schweregrad: axe stuft jede Regel als „critical", „serious", „moderate" oder „minor" ein. Kritische und schwerwiegende Verstöße — etwa unbenannte Buttons oder fehlender Kontrast — verhindern die Nutzung einer Funktion vollständig und werden deshalb als besonders dringlich behandelt. Moderate und geringfügige Verstöße betreffen eher Komfort und Struktur, bleiben aber relevant für die Gesamtqualität.
Diese Priorisierung folgt der Logik: Ein Fehler, der Menschen komplett aussperrt, ist dringlicher als einer, der die Nutzung nur erschwert.
Die wichtigsten Fehlerarten im Überblick#
Farbkontrast — Text mit zu schwachem Kontrast zum Hintergrund ist für viele Menschen kaum lesbar, besonders bei eingeschränktem Sehen oder auf dem Smartphone in der Sonne. Details und Lösung: Ausreichender Farbkontrast.
Bedienelemente ohne Namen — Buttons ohne erkennbaren Text oder Beschriftung lassen sich von Vorlese-Software nicht identifizieren. Details: Bedien-Elemente brauchen Namen.
Linktexte — Links ohne aussagekräftigen Text, häufig reine Symbol-Links, verraten nicht, wohin sie führen. Details: Verständliche Linktexte.
Alt-Texte für Bilder — Fehlende Bildbeschreibungen machen visuelle Inhalte für blinde Besucher und für die Google-Bildersuche unsichtbar. Details: Alt-Texte für Bilder.
iframe-Titel — Eingebettete Bereiche wie Karten oder Videos ohne Titel bleiben für Vorlese-Software anonym. Details: Titel für iframes.
Touch-Zielgröße — Zu kleine oder zu eng stehende Schaltflächen sind auf dem Smartphone schwer zu treffen. Details: Große genug Touch-Ziele.
Sprachauszeichnung — Fehlt die technische Sprachangabe, liest Vorlese-Software Ihre Inhalte mit falscher Aussprache vor. Details: Sprache auszeichnen.
ARIA-Attribute — Fehlerhafte oder fehlende ARIA-Zusatzangaben führen zu falschen Ansagen durch Vorlese-Software. Details: ARIA korrekt einsetzen.
Tastaturbedienung & Fokus — Fokusfallen, unsichtbarer Fokus und fehlende Sprunglinks blockieren die Bedienung ohne Maus. Details: Tastaturbedienung & Fokus.
Überschriften-Struktur — Übersprungene oder leere Überschriftenebenen zerstören die Gliederung für Vorlese-Software. Details: Überschriften-Struktur.
Landmarks — Fehlt eine eindeutige Hauptinhalts-Landmark, kann Vorlese-Software nicht direkt zum Kerninhalt springen. Details: Landmark-Regionen.
Datentabellen — Tabellen ohne zugeordnete Kopfzeilen sind für Vorlese-Software nicht mehr nachvollziehbar. Details: Barrierefreie Datentabellen.
Zoom-Sperren — Ein viewport-Tag, das Zoomen verhindert, schließt Menschen mit Sehbehinderung von der Nutzung aus. Details: Zoom nicht sperren.
Welche Auswirkung haben Barrierefreiheits-Mängel?#
Barrieren auf Ihrer Website schließen einen Teil Ihrer Besucher faktisch aus — Menschen mit Seh-, Motorik- oder kognitiven Einschränkungen springen ab, statt Ihr Angebot zu nutzen. Barrierefreie Seiten sind zudem oft besser strukturiert und dadurch für Suchmaschinen leichter zu erfassen: saubere Überschriften-Hierarchien und beschriebene Bilder helfen sowohl Screenreadern als auch Crawlern.
Rechtlich ist Barrierefreiheit für viele private B2C-Anbieter seit dem 28.06.2025 durch das Barrierefreiheitsstärkungsgesetz (BFSG) relevant geworden. Ob und wie das BFSG konkret für Ihr Angebot greift, hängt von Ihrer Geschäftstätigkeit ab und sollte im Zweifel juristisch geprüft werden — EverAudit liefert hier die technische Grundlage, keine Rechtsberatung.
Wie gehen Sie Barrierefreiheits-Befunde an?#
Beginnen Sie mit den kritischen und schwerwiegenden Befunden — sie blockieren eine Funktion vollständig und betreffen meist wiederkehrende Komponenten wie Buttons, Formulare oder die Hauptnavigation. Ein Fix an zentraler Stelle (Design-System, Layout-Template) behebt oft dutzende Einzelbefunde auf einmal. Moderate und geringfügige Befunde lassen sich anschließend im normalen Entwicklungsrhythmus abarbeiten.
Nutzen Sie die verlinkten Einzelartikel oben für konkrete, CMS-unabhängige Lösungswege zu jeder Fehlerart.
Fazit#
Barrierefreiheit ist kein Nice-to-have, sondern eine messbare Qualitätsdimension Ihrer Website: EverAudit macht sie über axe-core und WCAG 2.2 AA konkret prüfbar und priorisiert die Befunde nach echtem Schweregrad. Wer die kritischen Fehlerarten — Kontrast, Namen, Alt-Texte, Tastaturbedienung — zuerst behebt, erreicht mit vertretbarem Aufwand den größten Teil seiner Besucher.
Artikel
- Barrierefreiheit
Überschriften-Struktur: Ebenen sauber gliedern statt überspringen
Übersprungene oder leere Überschriftenebenen zerstören die Gliederung für Screenreader. So bringen Sie h1 bis h6 in eine logische, lückenlose Rangfolge.
- Barrierefreiheit
Große genug Touch-Ziele: Klick- und Tippflächen richtig dimensionieren
Zu kleine Buttons und Links sind auf dem Smartphone schwer zu treffen. WCAG 2.5.8 verlangt mindestens 24×24 px oder ausreichend Abstand — so setzen Sie das um.
- Barrierefreiheit
Tastaturbedienung & Fokus: Ihre Seite ohne Maus vollständig bedienbar machen
Fokusfallen, unsichtbarer Fokus und defekte Sprunglinks blockieren die Tastaturbedienung. So machen Sie jeden Bereich Ihrer Seite ohne Maus erreichbar und verlassbar.
- Barrierefreiheit
Sprache auszeichnen: Das lang-Attribut korrekt setzen
Ohne lang-Attribut liest Vorlese-Software Ihre Seite mit falscher Aussprache vor. So setzen Sie ein gültiges Sprachtag am html-Element und in fremdsprachigen Passagen.
- Barrierefreiheit
Zoom nicht sperren: Das viewport-Meta-Tag barrierefrei konfigurieren
Ein viewport-Tag mit user-scalable=no verhindert das Heranzoomen auf dem Smartphone. So geben Sie Zoom und Skalierung wieder frei, ohne Ihr responsives Layout zu verlieren.
- Barrierefreiheit
Verständliche Linktexte: Links ohne erkennbaren Namen beheben
Links ohne aussagekräftigen Text verraten Screenreader-Nutzern nicht, wohin sie führen. So geben Sie jedem Link — auch Icon-only-Links — einen klaren Namen.
- Barrierefreiheit
Landmark-Regionen: Seitenbereiche technisch eindeutig kennzeichnen
Ohne eindeutige main-Landmark kann Vorlese-Software nicht direkt zum Hauptinhalt springen. So kennzeichnen Sie Kopf-, Haupt- und Fußbereich sauber.
- Barrierefreiheit
Titel für iframes: Eingebettete Inhalte zugänglich benennen
iframes ohne title-Attribut bleiben für Screenreader anonym. So benennen Sie eingebettete Karten, Videos und Widgets eindeutig und aussagekräftig.
- Barrierefreiheit
Ausreichender Farbkontrast: WCAG-Grenzwerte richtig einhalten
Text-Farbkontrast nach WCAG 2.2 AA: 4,5:1 für Fließtext, 3:1 für große Schrift. So finden und beheben Sie zu schwache Kontraste am Design-Token, nicht per Override.
- Barrierefreiheit
Barrierefreie Datentabellen: Kopfzeilen korrekt zuordnen
Tabellen ohne zugeordnete Kopfzeilen sind für Screenreader nicht mehr nachvollziehbar. So verknüpfen Sie th- und td-Zellen mit dem scope-Attribut korrekt.
- Barrierefreiheit
Bedien-Elemente brauchen Namen: Buttons für Vorlese-Software erkennbar machen
Buttons ohne erkennbaren Namen sind für Screenreader unsichtbar. So geben Sie jedem Button einen zugänglichen Namen — per Text, aria-label oder value.
- Barrierefreiheit
ARIA korrekt einsetzen: Häufige Fehler bei Rollen und Attributen vermeiden
Fehlerhafte ARIA-Attribute lassen Vorlese-Software falsche Angaben ausgeben. So beheben Sie ungültige Rollen, fehlende Pflicht-Attribute und unzulässige Kombinationen.