Wann ist eine Website barrierefrei und wer prüft und bewertet das?

Viele Anbieter von „Accessibility Overlays“ versprechen, Websites auf Knopfdruck barrierefrei zu machen. Das ist eindeutig falsch.
Sich ausschließlich auf Overlays zu verlassen, vermittelt eine falsche Sicherheit und führt in der Regel nicht zu einer tatsächlichen WCAG- oder BFSG-Konformität.

Hier sind die wichtigsten Bereiche, die Overlays nicht von allein lösen können:

Korrekte HTML-Struktur:
Overlays können keine semantisch korrekte HTML-Struktur (z.B. die richtige Verwendung von Überschriften, Listen, Absätzen, Landmarks wie main, nav, footer) herstellen, wenn der zugrunde liegende Code fehlerhaft ist. Dies ist jedoch entscheidend für Screenreader, um Inhalte sinnvoll zu interpretieren und zu navigieren.

Fehlende oder falsche Alternativtexte (Alt-Texte):
Overlays können zwar versuchen, Alt-Texte automatisch zu generieren, aber diese sind oft generisch, nicht kontextbezogen oder schlichtweg falsch. Ein aussagekräftiger Alt-Text erfordert menschliches Verständnis des Bildinhalts und seiner Funktion im Kontext der Seite.

Sinnvolle Linktexte:
Overlays können keine unklaren Linktexte (z.B. „hier klicken“) in aussagekräftige umwandeln, die den Zweck des Links beschreiben.

Vollständige Tastaturbedienbarkeit:

Alle interaktiven Elemente (Buttons, Links, Formularfelder) müssen ausschließlich mit der Tastatur bedienbar sein. Overlays können dies nicht gewährleisten, wenn der zugrunde liegende Code die Tastaturnavigation blockiert oder die Reihenfolge unlogisch ist.

Sichtbarer Tastaturfokus:
Der Fokus eines Elements muss beim Navigieren mit der Tastatur immer klar sichtbar sein. Wenn die Website selbst keinen sichtbaren Fokus bereitstellt, können Overlays dies oft nicht zuverlässig ergänzen, oder der von Overlays generierte Fokus kann mit dem nativen Fokus der Assistenztechnologien kollidieren.

Logische Fokusreihenfolge:
Die Reihenfolge, in der Elemente mit der Tabulator-Taste erreicht werden, muss logisch und intuitiv sein. Ein Overlay kann eine unlogische oder fehlerhafte Tab-Reihenfolge nicht korrigieren, da dies tief im HTML-Markup verankert ist

Klare Fehlermeldungen und Hilfestellungen: Wenn Formulare oder Eingabefelder keine eindeutigen, verständlichen Fehlermeldungen und Hilfestellungen für Nutzende mit Assistenztechnologien bereitstellen, kann ein Overlay dies nicht nachliefern.

Textstrukturierung:
Eine logische Gliederung von Texten mit aussagekräftigen Überschriften und Absätzen ist entscheidend für die Verständlichkeit. Overlays können eine schlechte Textstruktur nicht verbessern.

Untertitel und Transkripte:
Overlays können keine Untertitel oder vollständigen Transkripte für Videos und Audioinhalte generieren. Diese müssen manuell erstellt und in die Medien eingebettet werden.

Audiodeskriptionen:
Für Menschen mit Sehbehinderung sind Audiodeskriptionen von Videos (Beschreibung relevanter visueller Informationen) unerlässlich. Overlays können diese nicht automatisch hinzufügen.

Fazit:

Overlays sind ein Hilfsmittel, aber die Hauptarbeit muss immer noch manuell gemacht werden.

Checkliste: Deine Webseite barrierefrei gestalten
Eine barrierefreie Webseite ist für jeden Menschen nutzbar, egal welche Fähigkeiten oder Einschränkungen er hat.

Logische Gliederung: Achte auf eine klare Hierarchie bei Überschriften (H1, H2, H3 etc.). Überspringe keine Ebenen, um die Struktur verständlich zu halten.

Bilder mit Alternativtexten (Alt-Texte): Jedes bedeutungsvolle Bild benötigt eine kurze, prägnante Beschreibung im Alt-Text. Bei rein dekorativen Bildern nutze alt=““.

Einfache Sprache: Formuliere Texte kurz, klar und verständlich. Vermeide unnötigen Fachjargon.

Sprachauszeichnung im HTML: Stelle sicher, dass das Attribut oder die entsprechende Sprache im HTML-Code gesetzt ist. Das ist entscheidend für Screenreader.

Medien zugänglich machen:

Videos: Biete Untertitel, Transkripte oder Gebärdensprache für alle Videos an.

Audio: Sorge dafür, dass gesprochene Inhalte auch als Text verfügbar sind.

Navigation & Interaktion
Tastatur-Bedienbarkeit: Das gesamte Menü und alle interaktiven Elemente müssen sich ausschließlich mit der Tastatur (Tabulator, Enter) bedienen lassen.

Sichtbarer Fokus: Es muss immer klar erkennbar sein, welches Element gerade aktiv ist (z.B. durch einen farbigen Rahmen).

Aussagekräftige Links: Verwende beschreibende Linktexte, die den Inhalt des Links klar benennen (z.B. „Mehr über unsere Services“ statt „Hier klicken“).

Enter-Taste für Buttons & Links: Stelle sicher, dass Buttons und Links nicht nur mit der Maus, sondern auch mit der Enter-Taste aktiviert werden können.

Keine Tastatur-Fallen: Nutzende müssen jederzeit in der Lage sein, modale Fenster, Menüs oder andere Overlays problemlos wieder zu schließen.

Slideshows und Karussells:

Pausierbar & Steuerbar: Biete immer die Möglichkeit, Slideshows anzuhalten, vor- und zurückzuspringen. Die automatische Wiedergabe sollte deaktivierbar sein.

Tastaturbedienung: Auch Slideshows müssen vollständig mit der Tastatur steuerbar sein.

Sichtbare Steuerelemente: Die Steuerelemente (Pfeile, Punkte zur Navigation) müssen klar sichtbar und anklickbar sein.

Visuelle Gestaltung
Kontrastverhältnis: Text und interaktive Elemente (wie Schaltflächen) sollten ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund haben.

Zoom-Funktion: Die Webseite sollte bis zu 200% vergrößerbar sein, ohne dass das Layout bricht oder Inhalte unlesbar werden.

Lesbare Schriftgröße: Eine Basisschriftgröße von mindestens 16 Pixeln sorgt für gute Lesbarkeit, auch für Menschen mit Sehschwäche.

Text nicht als Bild: Vermeide es, Text in Bilder einzubetten. Text sollte immer maschinenlesbar und skalierbar sein.

Formulare & Eingabefelder
Korrekte Beschriftung: Alle Formularfelder benötigen klare und korrekte Beschriftungen (Labels), die fest mit dem Eingabefeld verbunden sind.

Hilfreiche Fehlermeldungen: Fehlermeldungen sollten präzise und verständlich sein (z.B. „Bitte gültige E-Mail-Adresse eingeben“ statt nur „Fehler“).

Visuelle & textliche Fehleranzeige: Fehler müssen nicht nur farblich (z.B. rot), sondern auch textlich gekennzeichnet werden.

Klare Button-Zwecke: Beschrifte Buttons eindeutig mit ihrer Funktion (z.B. „Formular absenden“ statt „OK“).

Autovervollständigung (Autocomplete): Aktiviere die Autovervollständigung für Formularfelder, um das Ausfüllen zu erleichtern, insbesondere für Menschen mit kognitiven Einschränkungen.

Kognitive Barrierefreiheit
Begriffs-Erklärungen: Erläutere komplexe oder fachspezifische Begriffe einfach und verständlich.

Keine schnellen Animationen: Vermeide blinkende oder schnell wechselnde Animationen (mehr als 3 Blitze pro Sekunde), da diese ablenkend oder gesundheitlich problematisch sein können.

Kontrolle über Pop-ups: Nutzende sollten die Kontrolle darüber haben, wann sich Pop-ups oder Overlays öffnen.
Technische Zugänglichkeit

Screenreader-Test: Teste deine Webseite mit mindestens einem Screenreader (z.B. NVDA für Windows oder VoiceOver für Mac/iOS), um die Zugänglichkeit zu prüfen.

BIK BITV-Test Prüfstellen (empfohlen für umfassende Audits)

Das BIK-Projekt (Barrierefreiheit Informations- und Kommunikationstechnik) ist die zentrale Instanz für standardisierte Barrierefreiheitstests in Deutschland. Die Tests werden von zertifizierten Prüfstellen durchgeführt, die Teil des BIK-Prüfverbunds sind. Diese Prüfer arbeiten nach einem festen, umfassenden Prüfverfahren, das die WCAG 2.1 (Level AA) sowie die spezifischen Anforderungen der BITV 2.0 (für öffentliche Stellen) und der EN 301 549 (maßgeblich für private Unternehmen nach BFSG) abdeckt.

Leistungen:

Detaillierte manuelle Prüfungen mit assistiven Technologien (Screenreader, Tastatur etc.), Erstellung eines ausführlichen Prüfberichts mit konkreten Empfehlungen, und die Möglichkeit, bei Erfüllung der Kriterien ein Prüfsiegel zu erhalten.
Auf der offiziellen Webseite des BIK BITV-Tests (bitvtest.de) finden Sie eine Liste der angeschlossenen Prüfstellen und können Kontakt aufnehmen.

Was kostet ein professioneller, manueller Test?
Die Kosten für einen professionellen manuellen Barrierefreiheitstest variieren stark und hängen von mehreren Faktoren ab:

Umfang der Website/Anwendung:

Anzahl der Seiten/Templates: Je mehr unterschiedliche Seitentypen (Homepage, Kategorie, Produktseite, Checkout, Kontaktformular etc.) und interaktive Komponenten eine Website hat, desto höher ist der Prüfaufwand.
Komplexität der Funktionalitäten: Interaktive Elemente, komplexe Formulare, Warenkörbe, Single Page Applications (SPAs), spezielle Web-Anwendungen oder passwortgeschützte Bereiche erhöhen den Aufwand erheblich.

BIK BITV-Test:

Die Kostenstruktur ist hier oft transparent und richtet sich nach einem Sockelbetrag plus Kosten pro zu prüfender Seite/Ansicht und deren Komplexitätsstufe.
Preisbeispiele (rein indikativ, da sich die Preise ändern können und von der Prüfstelle abhängen):
Eine einfache Webseite mit wenigen Seiten kann bei ca. 2.000 – 5.000 Euro beginnen.
Für umfangreichere Websites mit dynamischen Inhalten oder komplexen Formularen können die Kosten schnell auf 5.000 – 10.000 Euro und mehr steigen.
Sehr komplexe Webanwendungen oder Online-Shops können auch 8.000 – 20.000 Euro oder sogar mehr kosten.
Wichtig: Es gibt Grundpreise pro Seite/Ansicht (z. B. 420–450 Euro für eine einfache Seite) plus Multiplikatoren für Komplexität (x1,5 bis x2 oder individuelle Kalkulation bei sehr hoher Komplexität) sowie einen Sockelbetrag für administrative Aufwände.

Dieser Text wurde mit Hilfe Google Gemini KI-generiert.