Website barrierefrei machen: Checkliste nach WCAG und BFSG.

Stand: Oktober 2026. Dieser Beitrag beschreibt die Technik und ist keine Rechtsberatung. Ob das BFSG für Ihren Betrieb gilt, klären Sie mit Ihrem Rechtsbeistand.

Eine Website ist barrierefrei, wenn Menschen mit Behinderungen sie in der allgemein üblichen Weise, ohne besondere Erschwernis und grundsätzlich ohne fremde Hilfe finden und nutzen können. So steht es in § 3 Abs. 1 BFSG. In der Praxis heißt das: Die Seite funktioniert mit Tastatur statt Maus, mit Bildschirmleser statt Augen und mit 200 % Zoom statt Lesebrille.

Die meisten Punkte sind keine Gestaltungsfrage, sie liegen im Code. Deshalb ist diese Checkliste nach dem geordnet, was ein Entwickler prüft und ändert.

Welcher Standard gilt für barrierefreie Websites?

Der Maßstab ist die EN 301 549, die europäische Norm für barrierefreie Informationstechnik. Ihre Anforderungen an Websites stehen in Kapitel 9 und verweisen auf die Erfolgskriterien der WCAG 2.1 in den Stufen A und AA. Das erklärt die Bundesfachstelle Barrierefreiheit in ihren Antworten zum BFSG. Sie kündigt auch an, dass die überarbeitete Fassung der Norm auf die WCAG 2.2 verweisen wird.

Die Verordnung zum Gesetz (BFSGV) fasst das in vier Wörtern zusammen: Websites müssen „wahrnehmbar, bedienbar, verständlich und robust“ sein (§ 12 Nr. 3 BFSGV). Wer die WCAG 2.1 AA erfüllt, erfüllt diese vier Prinzipien. Die WCAG sind kostenlos beim W3C nachzulesen.

Die Checkliste: was eine barrierefreie Website erfüllen muss

Kontraste

Normaler Text braucht zu seinem Hintergrund ein Kontrastverhältnis von mindestens 4,5:1. Hellgrauer Text auf Weiß, ein beliebtes Gestaltungsmittel, fällt hier oft durch. Das gilt auch für Platzhaltertexte in Formularfeldern und für Text auf Fotos. Rahmen von Eingabefeldern und Symbole ohne Text brauchen mindestens 3:1.

Tastatur und Fokus

Legen Sie die Maus weg und drücken Sie Tab. Sie müssen jeden Link, jeden Knopf und jedes Feld erreichen und immer sehen, wo Sie sind. Häufige Fehler: Menüs, die nur bei Mausberührung aufklappen, „Knöpfe“, die im Code nur ein Textblock sind, und ein Fokusrahmen, der aus optischen Gründen entfernt wurde.

Auf wemodo.de zeigt jedes fokussierte Element einen zwei Pixel breiten Rahmen in der Markenfarbe, abgesetzt mit Abstand. Das erste Element jeder Seite ist ein Link „Zum Inhalt springen“, der bei Tastaturbedienung erscheint und das Menü überspringt. Die Fragen und Antworten laufen auf dem HTML-Element details: Der Browser macht sie von sich aus per Tastatur bedienbar, ohne eigenes Skript.

Alternativtexte und Struktur

Ein Alternativtext beschreibt, was ein Bild für den Inhalt bedeutet. „Bild1.jpg“ oder „Foto“ hilft niemandem, „Fassade nach der Sanierung, Altbau in der Innenstadt“ schon. Rein schmückende Bilder bekommen ein leeres alt-Attribut, damit Bildschirmleser sie überspringen.

Überschriften müssen im Code echte Überschriften sein, in logischer Reihenfolge: eine h1, darunter h2, darunter h3. Wer Text nur fett und groß setzt, nimmt Bildschirmleser-Nutzern die Gliederung, mit der sie durch eine Seite springen.

Formulare

Jedes Feld braucht eine Beschriftung, die im Code mit dem Feld verbunden ist. Ein Platzhaltertext im Feld reicht nicht, er verschwindet beim Tippen. Fehlermeldungen müssen sagen, welches Feld betroffen ist und was fehlt. Im Anfrageformular auf wemodo.de hat jedes Feld ein label-Element, auch dort, wo die Gestaltung die Beschriftung nur für Bildschirmleser ausgibt.

Sprache, Zoom und Bewegung

Die Sprache der Seite gehört in das html-Element, bei deutschen Seiten lang="de". Sonst liest ein Bildschirmleser deutschen Text womöglich mit englischer Aussprache vor.

Stellen Sie den Browser auf 200 % und verkleinern Sie das Fenster auf Telefonbreite. Nichts darf abgeschnitten werden, nichts darf übereinanderliegen, und die Seite darf nicht seitlich scrollen.

Laufende Slider und Videos müssen sich anhalten lassen. Darüber hinaus können Betriebssysteme die Einstellung „Bewegung reduzieren“ an die Website melden. Diese Rücksicht verlangt die WCAG erst in der Stufe AAA, also über die Pflicht hinaus. wemodo.de beachtet sie trotzdem: Mit dieser Einstellung entfallen weiches Scrollen und Bewegungseffekte.

Was gehört in die Erklärung zur Barrierefreiheit?

Wer unter das BFSG fällt, muss Informationen zur Barrierefreiheit seiner Dienstleistung veröffentlichen, in den AGB oder auf andere deutlich wahrnehmbare Weise (§ 14 Abs. 1 Nr. 2 BFSG mit Anlage 3). Das Gesetz nennt sie nicht „Barrierefreiheitserklärung“, der Begriff hat sich aber eingebürgert. Die Informationen enthalten nach Anlage 3, soweit anwendbar:

• eine allgemeine Beschreibung der Dienstleistung in einem barrierefreien Format
• die Erläuterungen, die man zum Verständnis der Durchführung braucht
• eine Beschreibung, wie die Dienstleistung die Barrierefreiheitsanforderungen erfüllt
• die zuständige Marktüberwachungsbehörde

Zuständig ist seit dem 26. September 2025 die Marktüberwachungsstelle der Länder für die Barrierefreiheit von Produkten und Dienstleistungen (MLBF) in Magdeburg. Fehlt die Information oder ist sie selbst nicht barrierefrei, spricht das Gesetz von formaler Nichtkonformität (§ 30 BFSG). Das ist der Punkt, der sich am schnellsten beheben lässt.

Wie teste ich meine Website kostenlos auf Barrierefreiheit?

Mit einem automatischen Werkzeug für den ersten Überblick und danach von Hand. Diese drei Werkzeuge sind kostenlos:

• WAVE von WebAIM: als Website und als Browsererweiterung, markiert Fehler direkt auf der Seite
• axe DevTools von Deque: Browsererweiterung für die Entwicklerwerkzeuge, in der Grundversion kostenlos
• Lighthouse: in Chrome eingebaut, unter Entwicklertools, mit einer eigenen Kategorie für Barrierefreiheit

Automatische Tests erkennen fehlende Alternativtexte, zu schwache Kontraste und unbeschriftete Felder. Ob ein Alternativtext sinnvoll ist oder ob die Tab-Reihenfolge Sinn ergibt, erkennen sie nicht. Das W3C schreibt dazu, Werkzeuge könnten Barrierefreiheit nicht feststellen, sondern nur bei der Prüfung helfen. Ein grüner Lighthouse-Wert ist deshalb ein Anfang und kein Nachweis.

Für die Prüfung von Hand: Bedienen Sie die Seite nur mit Tastatur, zoomen Sie auf 200 % und hören Sie sie einmal mit einem Bildschirmleser an. VoiceOver ist auf Mac und iPhone eingebaut, NVDA ist für Windows kostenlos. Wer gründlicher vorgehen will, findet die Prüfschritte des BITV-Tests offen auf bitvtest.de. Die Bundesfachstelle verweist selbst darauf.

Reicht ein Barrierefreiheits-Plugin?

Ein Plugin, das eine Leiste für Schriftgröße und Kontrast über die Seite legt, ändert den Code darunter nicht. Fehlende Alternativtexte, falsche Überschriften und unbeschriftete Felder bleiben. Der Maßstab der Norm ist die Seite selbst. Bei einer bestehenden Seite lohnt sich deshalb zuerst eine Prüfung, wie viel im Code zu ändern ist. Je nach Ergebnis ist der Umbau kleiner als befürchtet, oder ein Neubau ist der kürzere Weg.

Muss meine Website barrierefrei sein?→ Wer unter das BFSG fällt und wer ausgenommen ist.

Barrierefreie Website mit Wemodo→ Prüfung, Umbau oder Neubau nach WCAG 2.1 AA.

Quellen

• Barrierefreiheitsstärkungsgesetz (BFSG), § 14 und Anlage 3
• Verordnung zum BFSG (BFSGV), § 12
• Bundesfachstelle Barrierefreiheit: FAQ zum BFSG (Fragen 9, 21, 24)
• W3C: Web Content Accessibility Guidelines (WCAG) 2.1
• W3C WAI: Selecting Web Accessibility Evaluation Tools
• WAVE Web Accessibility Evaluation Tool (WebAIM)
• axe DevTools (Deque)
• Lighthouse (Chrome for Developers)
• BIK BITV-Test: Prüfschritte

Veröffentlicht am 7. Oktober 2026 von Enver Eser. Themenfeld: Barrierefreiheit.