Das BaFG (Barrierefreiheitsgesetz) fordert seit 28. Juni 2025 WCAG 2.1 Stufe AA für Praxiswebsites — aber die wenigsten Ärzt:innen wissen, was das technisch konkret bedeutet. „Barrierefrei" klingt abstrakt. In der Realität sind es etwa 50 konkrete Prüfkriterien, sortiert in vier Prinzipien: Wahrnehmbar, Bedienbar, Verständlich, Robust.
Dieser Artikel führt Schritt für Schritt durch die wichtigsten Anforderungen — mit Tool-Empfehlungen, typischen Fehlern auf Arzt-Websites und konkreten Code-Beispielen.
Wahrnehmbar: Inhalte für alle Sinne
Farbkontrast 4.5:1 für Standard-Text. Der klassische Fehler: hellgrauer Text auf weißem Hintergrund — sieht edel aus, scheitert aber an WCAG. Test-Tool: WebAIM Contrast Checker (kostenlos, im Browser). Geben Sie Text- und Hintergrund-Farbe als HEX ein, das Tool zeigt den Kontrast-Wert.
Für große Schrift (über 18 pt bzw. 14 pt fett) reichen 3:1 — aber keine Ausrede für graue Buttons.
Alt-Texte für alle Bilder. Jedes inhaltlich relevante Bild braucht ein alt-Attribut, das den Inhalt beschreibt. „Foto" oder „Bild" reicht nicht.
- Schlecht:
<img src="team.jpg" alt="Bild"> - Gut:
<img src="team.jpg" alt="Team der Ordination Dr. Müller, drei Mitarbeiterinnen im Wartezimmer">
Rein dekorative Bilder bekommen leeres alt="" — dann überspringt der Screen Reader sie automatisch.
Skalierbarkeit auf 200 %. Patient:innen mit Sehschwäche zoomen. Ihre Website muss bei 200 % Zoom lesbar bleiben, ohne dass Buttons abgeschnitten werden oder horizontales Scrollen nötig wird. Test: Browser auf 200 % zoomen und alle Seiten durchklicken.
Bedienbar: Alles per Tastatur erreichbar
Tastatur-Navigation. Jeder Link, jeder Button, jedes Formular-Feld muss mit Tab erreichbar sein, mit Enter oder Space aktivierbar. Test: den Browser öffnen, Maus weglegen, nur Tab + Enter + Pfeiltasten — kommen Sie bis zum Kontaktformular? Können Sie ein Termin-Buchungs-Tool bedienen?
Fokus sichtbar. Wenn Sie mit Tab durch die Seite gehen, muss deutlich sichtbar sein, wo gerade der Fokus ist — meist durch einen farbigen Rahmen (Outline). Viele Designer entfernen den Outline absichtlich („unschön") — das ist ein direkter WCAG-Verstoß.
- Fix in CSS:
:focus-visible { outline: 2px solid #1e3ab8; outline-offset: 3px; }
Skip-Link zum Hauptinhalt. Ganz am Anfang der Seite sollte ein Link sein, der zum Haupt-Content springt — für Screen-Reader-Nutzer:innen, die sonst die Navigation vor jeder Seite neu vorgelesen bekommen. Meist visuell versteckt, aber beim ersten Tab sichtbar.
Verständlich: Sprache und Verhalten
Sprachattribut im HTML. <html lang="de-AT"> muss gesetzt sein, damit Screen Reader die richtige Aussprache wählen. Englische Text-Fragmente (z. B. Fachbegriffe) mit <span lang="en"> markieren.
Formulare mit klaren Fehlermeldungen. Wenn eine Eingabe falsch ist, muss der Text erklären was und wie zu korrigieren ist — nicht nur „Fehler". Beispiel:
- Schlecht: „Eingabe ungültig"
- Gut: „Bitte tragen Sie eine gültige E-Mail-Adresse ein. Sie enthält ein @ und eine Domain (z. B. anna@beispiel.at)."
Konsistente Navigation. Das Menü muss auf allen Seiten gleich aussehen und gleich funktionieren. Überraschungen verwirren Nutzer:innen mit kognitiven Einschränkungen.
Robust: Technisch sauber für assistive Technologien
Semantisches HTML. Echte <button> statt gestylte <div>. Echte <a> statt JavaScript-Klick-Handler. Echte <nav>, <main>, <section>, <article>. Screen Reader verstehen semantische Tags — Divs sind für sie nur unbenannte Kästen.
ARIA-Labels wo semantisches HTML nicht reicht. Wenn ein Icon-Button nur ein Icon zeigt (z. B. 🔍 für Suche), braucht er aria-label="Suchen". Sonst hört der Screen Reader nur „Lupen-Emoji, Button".
Valides HTML. Keine offenen Tags, keine doppelten IDs, korrekt verschachtelt. Test: W3C Markup Validator (validator.w3.org).
Die wichtigsten Test-Tools
-
WAVE Web Accessibility Evaluation Tool (wave.webaim.org) — Browser-Extension, zeigt alle WCAG-Probleme auf einer Seite visuell an. Kostenlos.
-
axe DevTools (Chrome/Firefox Extension) — Entwickler-Tool mit detaillierten Fehler-Beschreibungen. Für tieferes Debugging.
-
Google Lighthouse (in Chrome DevTools eingebaut) — zeigt WCAG-Score plus Verbesserungsvorschläge. Gut für den Überblick.
-
NVDA (Windows, kostenlos) oder VoiceOver (Mac, eingebaut) — echte Screen Reader. Einmal selbst die Website durchhören — der beste Praxis-Test.
-
Kontrast-Checker: WebAIM Contrast Checker oder Firefox-eingebauter Accessibility Inspector.
Typische Fehler auf Arzt-Websites
Aus tatsächlichen Audits 2025/2026:
- Icon-Navigation ohne Labels (Header mit nur Hamburger-Menü-Icon, kein
aria-label) - Zu heller Grau-Text auf weißem Hintergrund (Kontrast 3:1 statt 4.5:1)
- Fehlender Skip-Link zum Hauptinhalt
- Formular-Felder ohne
<label>(nur Placeholder-Text — scheitert bei Screen Readern) - Online-Terminbuchung (externes Tool) nicht WCAG-konform
- Cookie-Banner mit „Alle akzeptieren"-Button auf erster Ebene, aber „Alle ablehnen" erst im zweiten Menü versteckt
- Videos ohne Untertitel (z. B. Praxis-Vorstellungs-Clip)
- PDFs als Hauptinhalt (z. B. Preisliste als Scan-PDF) — nicht screen-reader-tauglich
Die 10-Minuten-Selbstprüfung
Einmal durch diese Checkliste — das deckt ~70 % der WCAG-Anforderungen ab:
- WAVE Browser-Extension installieren, Hauptseite prüfen — Errors müssen null sein
- Mit Tab durch die Seite — kommen Sie überall hin?
- Browser auf 200 % zoomen — alles noch lesbar?
- HTML-Source: gibt es
<html lang="de-AT">? - Alle Bilder: haben sie
alt-Attribut? - Cookie-Banner: „Alle ablehnen"-Button genauso prominent wie „Alle akzeptieren"?
- Online-Terminbuchung: Tastatur-Navigation testen
- Kontaktformular: Fehlermeldung bei leerer E-Mail — verständlich?
- Lighthouse-Accessibility-Score: mindestens 90/100
Fazit: Barrierefreiheit ist keine Kosmetik — sie ist rechtliche Pflicht und SEO-Vorteil
WCAG 2.1 AA erscheint zunächst wie eine technische Hürde. Tatsächlich sind die meisten Anforderungen mit sauberem HTML und ein paar CSS-Anpassungen erfüllt. Wer sie konsequent umsetzt, profitiert dreifach: rechtssicher gegen BaFG-Abmahnungen, bessere SEO-Rankings (Google priorisiert zugängliche Seiten), bessere KI-Sichtbarkeit (semantisches HTML ist auch für Crawler leichter lesbar).
Der ROI einer WCAG-Anpassung ist hoch — gerade im Verhältnis zu den Kosten möglicher Abmahn-Wellen.
Verwandte Themen:
- BFSG für Arztpraxen ab Juni 2025 — die Rechtsgrundlage
- Online-Terminbuchung barrierefrei — Anbieter-Vergleich
- DSGVO-Checkliste für Praxiswebsites — parallele Pflicht
Audit gewünscht? 30 Min kostenloses Erstgespräch — wir prüfen Ihre Website auf WCAG-Konformität. Erstgespräch anfragen →