Barrierefreie Websites in der Medizin: Was Praxen wissen müssen

Barrierefreiheit im Web: Warum sie gerade für Arztpraxen relevant ist

Menschen mit Behinderungen, ältere Patient:innen mit eingeschränktem Sehvermögen, Personen mit motorischen Einschränkungen – sie alle nutzen das Internet, um Arztpraxen zu finden, Informationen zu lesen und Termine zu buchen. Doch viele Praxis-Websites sind für diese Personengruppen nur eingeschränkt oder gar nicht nutzbar.

Barrierefreie Webgestaltung stellt sicher, dass alle Menschen unabhängig von ihren Fähigkeiten auf Ihre Website zugreifen und sie bedienen können. Das ist nicht nur eine Frage der Inklusion, sondern wird zunehmend auch zur rechtlichen Pflicht. In diesem Beitrag erfahren Sie, was barrierefreie Websites ausmacht, welche gesetzlichen Anforderungen gelten und wie Sie Ihre Praxis-Website Schritt für Schritt zugänglicher gestalten.

Gesetzliche Anforderungen: Das Barrierefreiheitsstärkungsgesetz (BFSG)

Was das BFSG für Praxen bedeutet

Das Barrierefreiheitsstärkungsgesetz (BFSG), das die europäische Richtlinie (European Accessibility Act) in deutsches Recht umsetzt, trat am 28. Juni 2025 in Kraft. Es verpflichtet Anbieter digitaler Dienstleistungen, ihre Angebote barrierefrei zu gestalten.

Wichtige Punkte für Arztpraxen:

• Websites, über die Dienstleistungen angeboten oder gebucht werden, fallen unter das Gesetz.
• Praxen mit Online-Terminbuchung, Kontaktformularen oder Online-Rezepten sind in der Regel betroffen.
• Ausnahmen gelten nur für Kleinstunternehmen mit weniger als 10 Mitarbeitenden und unter 2 Millionen Euro Jahresumsatz bei bestimmten Dienstleistungen.
• Bei Verstößen drohen Abmahnungen, Bußgelder und Reputationsschäden.

Für Praxisinhaber:innen bedeutet das: Wer digitale Services anbietet, sollte die eigene Website frühzeitig an die Anforderungen des BFSG anpassen – nicht erst, wenn eine Abmahnung ins Haus flattert.

WCAG: Der internationale Standard

Die Web Content Accessibility Guidelines (WCAG) sind der internationale Standard für barrierefreie Webinhalte. Die aktuelle Version WCAG 2.1 definiert drei Konformitätsstufen:

• Stufe A: Grundlegende Barrierefreiheit (Mindestanforderung)
• Stufe AA: Erweiterte Barrierefreiheit (empfohlener Standard, auch vom BFSG gefordert)
• Stufe AAA: Höchste Barrierefreiheit (Idealziel, in der Praxis nicht immer vollständig erreichbar)

Für Praxis-Websites ist die Stufe AA der anzustrebende Standard, weil hier ein gutes Verhältnis aus Aufwand, rechtlicher Sicherheit und praktischer Nutzbarkeit erreicht wird.

Die vier Grundprinzipien der Barrierefreiheit (POUR)

Die WCAG basieren auf vier Grundprinzipien, die als POUR bekannt sind: Perceivable, Operable, Understandable, Robust – auf Deutsch: wahrnehmbar, bedienbar, verständlich, robust.

1. Wahrnehmbar (Perceivable)

Alle Inhalte müssen so dargestellt werden, dass sie von allen Nutzer:innen wahrgenommen werden können.

Wichtige Maßnahmen für Praxis-Websites:

• Alternativtexte für Bilder

Jedes aussagekräftige Bild benötigt einen beschreibenden Alt-Text, damit Screenreader den Inhalt vorlesen können (z. B. „Dr. Müller im Behandlungsraum“ statt „Bild1.jpg“).

• Untertitel und Transkripte

Videos und Audioinhalte sollten Untertitel bzw. Text-Transkripte haben, damit auch Menschen mit Hörbeeinträchtigung die Inhalte erfassen können.

• Ausreichende Kontraste

Text muss sich deutlich vom Hintergrund abheben. Für normalen Text gilt ein Kontrastverhältnis von mindestens 4,5:1, für große Schrift (ab ca. 18 pt fett) mindestens 3:1.

• Skalierbare Schriftgrößen

Text muss sich bis auf 200 % vergrößern lassen, ohne dass Inhalte abgeschnitten werden oder Funktionen verloren gehen.

2. Bedienbar (Operable)

Die Website muss mit verschiedenen Eingabemethoden bedienbar sein – nicht nur mit der Maus.

Wichtige Punkte:

• Tastaturnavigation

Alle Funktionen (Menüs, Buttons, Formulare, Terminbuchung) müssen ohne Maus erreichbar sein, z. B. mit der Tab-Taste.

• Sichtbarer Fokus

Beim Navigieren per Tastatur muss klar erkennbar sein, welches Element gerade ausgewählt ist (z. B. durch einen gut sichtbaren Rahmen).

• Ausreichend Zeit

Nutzer:innen müssen genügend Zeit haben, Inhalte zu lesen und Formulare auszufüllen. Zeitlimits sollten vermieden oder verlängerbar sein.

• Keine blinkenden Inhalte

Blinkende oder stark flackernde Elemente können Anfälle auslösen und sollten vermieden werden.

• Klare Navigation

Eine übersichtliche Menüstruktur mit konsistenter Bedienung hilft allen Nutzer:innen, sich schnell zurechtzufinden.

3. Verständlich (Understandable)

Inhalte und Bedienung müssen leicht verständlich sein.

Das bedeutet:

• Klare Sprache

Vermeiden Sie unnötig komplexen medizinischen Fachjargon oder erklären Sie ihn in einfachen Worten.

• Vorhersehbare Bedienung

Navigation und Interaktionen sollten konsistent sein – Menüs, Buttons und Links verhalten sich auf allen Seiten gleich.

• Fehlervermeidung und -erklärung

Formulare sollten klare Beschriftungen und verständliche Fehlermeldungen enthalten (z. B. „Bitte geben Sie eine gültige E-Mail-Adresse ein“ statt nur „Fehler“).

• Sprachauszeichnung im Code

Die Sprache der Website (z. B. lang="de") muss im HTML-Code angegeben sein, damit Screenreader korrekt vorlesen.

4. Robust (Robust)

Die Website muss mit verschiedenen Technologien kompatibel sein – heute und in Zukunft.

Dazu gehören:

• Sauberer HTML-Code

Valides, semantisches Markup, das von Browsern und assistiven Technologien korrekt interpretiert wird.

• ARIA-Attribute

Sinnvoll eingesetzte ARIA-Rollen und -Attribute (z. B. für modale Dialoge oder dynamische Inhalte), um Screenreader zu unterstützen.

• Kompatibilität

Die Website sollte mit gängigen Browsern, Screenreadern und Vergrößerungssoftware funktionieren.

Praktische Umsetzung für Praxis-Websites

Kontraste und Farben

• Verwenden Sie dunklen Text auf hellem Hintergrund als Standard.
• Prüfen Sie Kontraste mit Tools wie dem WebAIM Contrast Checker.
• Vermitteln Sie Informationen nie ausschließlich über Farbe (z. B. „rote Felder sind Pflichtfelder“ – ergänzen Sie immer ein Sternchen oder einen erklärenden Text).
• Bieten Sie idealerweise einen Kontrastmodus oder „High-Contrast“-Schalter an.

Schriften und Textgestaltung

• Mindestschriftgröße von 16 px für Fließtext.
• Zeilenabstand von mindestens 1,5-fach für bessere Lesbarkeit.
• Linksbündiger Text ist in der Regel leichter lesbar als Blocksatz.
• Kurze Absätze und klare Überschriften-Hierarchie (H1, H2, H3) erleichtern das Scannen von Inhalten.
• Genügend Abstand zwischen interaktiven Elementen (mindestens 44 × 44 Pixel Klickfläche), damit auch Menschen mit motorischen Einschränkungen Buttons gut treffen.

Navigation und Struktur

• Skip-Links

Ein „Zum Inhalt springen“-Link ermöglicht das Überspringen der Navigation direkt zum Hauptinhalt – wichtig für Screenreader- und Tastaturnutzer:innen.

• Breadcrumbs

Eine Brotkrumen-Navigation zeigt die aktuelle Position in der Website-Struktur (z. B. „Startseite > Leistungen > Dermatologie“).

• Konsistente Navigation

Die gleiche Menüstruktur sollte auf allen Seiten vorhanden sein.

• Sinnvolle Seitentitel

Jede Seite benötigt einen eindeutigen, beschreibenden Titel (z. B. „Hausarztpraxis Musterstadt – Online-Termin buchen“).

• Logische Tab-Reihenfolge

Die Reihenfolge beim Navigieren per Tastatur muss der visuellen und inhaltlichen Struktur folgen.

Formulare barrierefrei gestalten

Kontakt- und Terminformulare sind zentrale Elemente einer Praxis-Website – und häufige Fehlerquellen.

Achten Sie auf:

• Beschriftungen (Labels)

Jedes Formularfeld braucht ein sichtbares Label, das programmatisch mit dem Feld verknüpft ist.

• Pflichtfelder klar kennzeichnen

Nutzen Sie nicht nur Farbe, sondern z. B. ein Sternchen und einen erklärenden Hinweis („* Pflichtfeld“).

• Verständliche Fehlermeldungen

Fehler sollten direkt am Feld angezeigt werden und konkrete Hinweise zur Korrektur geben.

• Autovervollständigung

Nutzen Sie autocomplete-Attribute (z. B. autocomplete="name", "email", "tel"), um das Ausfüllen zu erleichtern.

• Ausreichend große Eingabefelder und Buttons

Besonders auf mobilen Geräten ist eine großzügige Gestaltung wichtig.