Die Praxis-Webseite barrierefrei gestalten

Teil 4: Verstehen und umsetzen
Individuelle Bedürfnisse erfordern flexible Lösungen, vor allem im digitalen Raum, wo unterschiedliche Anforderungen miteinander kollidieren können. „Barrierefreiheit“ sollte daher weniger als ein erreichbares Ziel verstanden werden, sondern vielmehr als eines, an das wir uns annähern, indem wir Inhalte insgesamt zugänglicher gestalten.

Tipps für eine barrierefreie Praxis-Website. Foto: Overearth/Shutterstock

Internationale Standards für Barrierefreiheit werden durch die Web Content Accessibility Guidelines (WCAG) des World Wide Web Consortium (W3C) definiert.¹ Um als barrierefrei zu gelten, müssen Webseiten festgelegte Kriterien erfüllen. Die WCAG bilden auch die technische Grundlage des Barrierefreiheitsstärkungsgesetzes, das 2025 in Kraft tritt und die Privatwirtschaft zur Einhaltung digitaler Barrierefreiheit verpflichtet.¹

Bestehende Webseite überarbeiten

Die Überarbeitung einer bestehenden Praxis-Webseite erfordert technische Expertise, da viele Aspekte der digitalen Barrierefreiheit in der Webseitenentwicklung verankert sind. Bisher verfügen auch erfahrene Entwicklerinnen und Entwickler nicht zwangsläufig über das spezifische Know-how im Bereich der Barrierefreiheit, weswegen ein spezialisierter Anbieter ratsam sein könnte. Die barrierefreie Überarbeitung kann komplex und aufwendig sein, sodass die Neuentwicklung einer Webseite, bei der Barrierefreiheit von Anfang an implementiert wird, finanziell sinnvoll sein kann.

Erste einfache Schritte

Trotz der Komplexität gibt es einfache Maßnahmen, die Webseitenbetreibende auch ohne tiefes Verständnis von HTML & Co. leicht umsetzen können. Diese mögen zwar (noch) nicht zu einer komplett barrierefreien Webseite führen, tragen jedoch zu einer zugänglicheren Gestaltung bei:

Farbauswahl

Schrift- und Hintergrundfarben sollten einen deutlichen Kontrast aufweisen, der einfach mit kostenlosen Anwendungen wie z. B. dem Colour Contrast Analyser2 berechnet werden kann. Ein Mindestfarbkontrast von 4.5:1 wird empfohlen. Komplementärfarben sollten vermieden werden, weil diese Kombinationen als unangenehm oder sogar schmerzhaft empfunden werden können. Auch bei der Schwarz-Weiß-Kombination empfiehlt sich schwarze Schrift auf einem leicht abgedunkelten Weiß oder sehr hellem Grau.

Schriftart

Viele gängige Schriftarten wie Times New Roman, Calibri oder Arial verwenden ähnliche Symbole für unterschiedliche Zeichen, was die Lesbarkeit beeinträchtigen kann. Wählen Sie daher eine Schriftart, bei der das kleine l, das große I, die Ziffer 1 sowie das große O und die Null deutlich voneinander abweichen. Das ist beispielsweise bei den Google Fonts Aleo, Roboto, Atkinson Hyperlegible und Signika der Fall.

Schriftbild

Für eine verbesserte Lesbarkeit nutzen Sie einen linksbündigen Flattersatz ohne Silbentrennung und einen Zeilenabstand von 1.5. Gliedern Sie Fließtexte in Abschnitte mit Zwischenüberschriften, und platzieren Sie den Text idealerweise auf einem einfarbigen Hintergrund. Vermeiden Sie Muster und Bilder als Hintergrund.

Alternativtexte

Bilder und Grafiken benötigen einen kurzen, objektiven Alternativtext, der das Dargestellte prägnant beschreibt. Die meisten Anwendungen und Content Management Systeme bieten dafür einfache Eingabemöglichkeiten.

Weiterführende Schritte zur digitalen Barrierefreiheit
Alternative Formate	Bereitstellung von Alternativen für verschiedene Sinne, z. B. Transkripte für Podcasts
Information durch Farbkodierung	Vermeidung der Verwendung von Farben zur Informationsübermittlung. Zusätzliche Merkmale wie Muster und Struktur sollten verwendet werden, z. B. gepunktete und gestrichelte Linien in Liniendiagrammen.
HTML	Konsequente und korrekte semantische Auszeichnung aller Inhalte mit Tags und Attributen. Bei entsprechenden Vorkenntnissen ist die Verwendung von ARIA-Attributen (Accessible Rich Internet Applications) empfohlen.
Links	Verwendung von beschreibenden Links: z. B. „Das Barrierefreiheitsstärkungsgesetz tritt 2025 in Kraft.“ anstelle von „Infos zum Barrierefreiheitsstärkungsgesetz: Einsatz eindeutiger Links: z. B. „Hier finden Sie Infos zum Barrierefreiheitsstärkungsgesetz“ anstelle von „Hier klicken“
Tabellen	Verwendung von Tabellen ausschließlich für die Darstellung von Daten, nicht für reine Design-Zwecke. Vermeidung von komplexen Tabellenstrukturen (verbundene Zellen etc.). Einfügen von Überschriftenzeilen bzw. -spalten.
Überfordernde Reize	Vermeidung von blinkenden oder flimmernden Elementen. Bewegliche Elemente oder Videos oder gifs müssen pausiert oder ausgeblendet werden können.
Überschriften	Einfügen von Zwischenüberschriften. Schaffung einer logischen und stringenten Überschriftenhierarchie (z. B. H1 – H2 – H3, nicht H3 – H1 – H1). Verwendung aussagekräftiger und eindeutiger Überschriften.

—
1 Bundesministerium für Arbeit und Soziales. 2021. Gesetz zur Umsetzung der Richtlinie (EU) 2019/882 des Europäischen Parlaments und des Rates über die Barrierefreiheitsanforderungen für Produkte und Dienstleistungen und zur Änderung anderer Gesetze. www.bmas.de/SharedDocs/Downloads/DE/Gesetze/barrierefreiheitsstaerkungsgesetz.pdf?__blob=publicationFile&v=3
2 TPGi. Colour Contrast Analyser (CCA). www.tpgi.com/color-contrast-checker/
3 World Wide Web Consortium. WCAG 2 Overview. www.w3.org/WAI/standards-guidelines/wcag/