Eine barrierefreie Website ist nicht nur für Menschen mit Behinderung geeignet, sondern verbessert die Nutzerfreundlichkeit für alle. Der Aktion Mensch zufolge sind 30 % der Bevölkerung von Einschränkungen betroffen, für 10 % der Bevölkerung ist Barrierefreiheit unerlässlich.
Barrierefreiheitsstärkungsgesetz
Aktuell machen einige Agenturen damit Panik, dass am 28. Juni 2025 das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft tritt und damit jede Website barrierefrei gestaltet werden muss. Meines jetzigen Wissensstands (Ich bin kein Rechtsexperte) zufolge tangiert das aber viele Website-Betreiber nicht, sondern lediglich
- Produkte zum digitalen Konsum (z. B. Computer, Smartphones, TVs)
- Websites im B2C-Dienstleistungsbereich (insbesondere im Transportwesen und bei Bankgeschäften).
B2B-Unternehmen und Kleinstunternehmen mit weniger als 10 Beschäftigten oder weniger als 2 Mio. € Jahresumsatz sind vom Gesetz teilweise ausgenommen.
Wessen Unternehmen unter das BFSG fällt, solltte bis zum 28.06 folgende Punkte erfüllen:
1. Pflichtinhalte
- Erklärung zur Barrierefreiheit
- Feedback-Formular mit Link zur Beschwerdestelle
2. Webdesign
- Ausreichender Kontrast gemäß WCAG AA Standard
- Beschriftungen für Icons und Telefon-Nummern
- Tastaturnavigation, fokusbedingte Stiländerungen
- Screenreader-Lösungen für Captchas
3. HTML-Code:
- Klare Auszeichnung von Header, Content, Footer
- Sauberer Code (sog. W3C-Validierung)
- Hierarchische Überschriften, sinnvolle Formatierungen
- Vermeidung leerer Absätze und Listen
Statistiken zu Behinderungen
In Deutschland sind 13 Millionen Menschen von Sehschwäche, motorischen oder auditiven Einschränkungen betroffen (Quelle: Statista 2017). Dazu kommen 11,8 Millionen Ausländer (Quelle: DeStatis 2021), für welche etwa einfache Sprache sinnvoll sein kann. Nicht zu beziffern sind Menschen unter Stress und/ oder mit Konzentrationsschwäche, welche ebenfalls barrierefreien Angeboten im Internet profitieren können.
Im Allgemeinen betreffen Barrieren Menschen
- mit Sehschwäche oder Blinde, die (manche) Inhalte nicht richtig erkennen können,
- mit motorischen Einschränkungen, denen die Navigation mit der Maus oder dem Finger schwerfällt,
- mit auditiven Einschränkungen oder Gehörlose, welche Videos und Audioformate wie Podcasts nicht oder nur schwer verstehen können,
- mit Konzentrationsschwäche oder Migrationshintergrund, welche sich schwertun, komplexe Informationen zu verstehen.
Ziele der Barrierefreiheit
Barrierefreie Websites haben laut AccessbilityChecker im Schnitt 12 % mehr Traffic. Ob das nur durch die Barrierefreiheit kommt, ist zu bezweifeln. Ein offizieller Google-Rankingfaktor ist Barrierefreiheit bislang nicht, allerdings könnte man den Mehr-Traffic auch mit ordentlicheren Layouts und demnach allgemein besserer Nutzerfreundlichkeit erklären. Ferner tendieren behinderte Menschen dazu, entsprechend optimierte Angebote weiterzuempfehlen.
Es gibt vier Grundsätze des barrierefreien Zugangs:
- Wahrnehmbarkeit, d. h., die Informationen und Komponenten müssen den Nutzern in einer Weise dargestellt werden, dass sie sie wahrnehmen können
- Bedienbarkeit, d. h., der Nutzer muss die Komponenten der Nutzerschnittstelle und die Navigation handhaben können
- Verständlichkeit, d. h., die Informationen und die Handhabung der Nutzerschnittstelle müssen verständlich sein
- Robustheit, d. h., die Inhalte müssen robust genug sein, damit sie zuverlässig von einer Vielfalt von Benutzeragenten, einschließlich assistiven Technologien, interpretiert werden können.
Aktuelle Rechtslage
Disclaimer: Ich habe die Inhalte gewissenhaft recherchiert, bin aber kein Rechtsanwalt und kann daher nicht für Korrektheit garantieren.
Barrierefreiheit wird auf Bundesebene in der Barrierefreie-Informationstechnik-Verordnung – BITV 2.0 definiert und ergänzt die EU-Richtlinie 2016/2102, welche den WCAG 2.1 Standard definiert.
Barrierefreiheit ist für die meisten privaten Unternehmen (noch) nicht verpflichtend, aber für öffentliche Stellen auf Bundes-, Landes- und kommunaler Ebene schon. Dazu gehören Museen, die Bahn, Bürgerämter.
Allerdings sind gemäß Artikel 2 Absatz 1 Nr. 4 EU-Vergaberechtsrichtlinie auch private Einrichtungen und Dienstleister, die der Öffentlichkeit offenstehen bzw. bereitgestellt werden müssen, zur barrierefreien Angeboten verpflichtet. Dies trifft insbesondere auf Krankenhäuser und kommunale Nahverkehrsunternehmen zu.
Ausgenommen sind bis Inkrafttreten des Barrierefreiheitsstärkungsgesetz (BFSG) im Juni 2025 Websites und mobile Anwendungen
- von öffentlich-rechtlichen Rundfunkanstalten nach Artikel 1 Absatz 3 a) und Nichtregierungsorganisationen, die keine Belange von Menschen mit Behinderungen vertreten;
- mit Online-Karten und Kartendiensten, sofern bei Karten für Navigationszwecke wesentliche Informationen in einer barrierefrei zugänglichen Weise digital bereitgestellt werden;
- mit Inhalten von Dritten, die von der betreffenden öffentlichen Stelle weder finanziert noch entwickelt werden noch deren Kontrolle unterliegen;
- die als Archive gelten, d. h., die ausschließlich Inhalte enthalten, die weder für aktive Verwaltungsverfahren benötigt werden noch nach dem 23. September 2019 aktualisiert oder überarbeitet wurden.
- Schulen und Kindergärten nach Artikel 1 Absatz 5, unter der Voraussetzung, dass die Inhalte sich nicht auf wesentliche Online-Verwaltungsfunktionen beziehen.
Außerdem kann von der Richtlinie abgesehen werden, wenn eine barrierefreie Website eine unverhältnismäßige Belastung im Sinne des Artikels 5 darstellen würde.
Grundsätzlich muss eine barrierefreie Website über zwei Informationsseiten verfügen, die auf der Startseite (idealerweise im Footer) verlinkt sind:
- Eine Erklärung zur Barrierefreiheit, worin definiert wird, welche Inhalte nicht barrierefrei sind. Eine Mustererklärung zur Barrierefreiheit stellt bspw. das Bayerische Staatsministerium für Digitales bereit.
- Ein Feedback-Formular, womit auf Mängel der Barrierefreiheit hingewiesen werden kann. Dieser Feedback-Mechanismus muss in der Erklärung zur Barrierefreiheit integriert sein und einen Link zur Beschwerdestelle des Gesetzesgebers enthalten, falls nicht zeitnah oder keine zufriedenstellende Antwort gegeben wird (Vgl. Mustererklärung).
Ferner sind ein barrierefreies Webdesign sowie barrierefreie Inhalte erforderlich, auf die ich nachfolgend eingehe.
Barrierefreies Webdesign
Um eine barrierefreie Website zu realisieren, sollte man sein Team sensibilisieren und genügend Zeit für die Umsetzung einplanen. Viele Maßnahmen im Webdesign und der -Entwicklung sind zwar kaum aufwändiger, sollten aber ordentlich konzipiert werden, um Mehrkosten zu minimieren. Dazu kommen allerdings ggf. Kosten für Testing, sowie zur Entwicklung von barrierefreien Inhalten (einfache Sprache, Videos mit Gebärdensprache). Auf letztere gehe ich im nächsten Kapitel ein.
Aber genug Theorie, schauen wir uns jetzt die Anforderungen an barrierefreies Webdesign in der Praxis an:
Code
Das Design einer Website beginnt schon mit der HTML-Auszeichnung des Kopfbereichs („Header“), des Inhaltsbereichs („Content“) und des Fußbereichs („Footer“), damit klar zwischen der Navigation und den Inhalten unterschieden werden kann. Der HTML-Code einer Website sollte zwar W3C-valide sein…
… allerdings muss man die dortigen „Fehler“ prüfen, wie das Beispiel zeigt:
- Pink markiert sind eigentlich keine richtigen Fehler sondern Warnungen, die das Nachladen von JavaScript-Dateien zur Performance-Optimierung betreffen.
- Die unteren beiden Boxen mit angeblichen CSS-Fehlern sind auch nicht unproblematisch: Entgegen des W3C-Tests existiert das Attribut antialiased (Quelle: Mozilla), nur halt wie bei den JavaScript-Dateien nicht nach deren sehr konservativen Standard, der nicht mehr ganz aktuell zu sein scheint.
Der WCAG-Test wird auf einer geringen Auflösung von 1024px x 768px (B x H) durchgeführt. Normale Websites werden zwar meist auf 1280px x 720px entwickelt (HD-Auflösung), aber durch die geringe Auflösung wird sichergestellt, dass auch auf kleinen und älteren Displays alles korrekt und ohne Querscrollbalken dargestellt wird.
Schrift
Es gibt zwar keine minimale Schriftgröße, aber ich empfehle mindestens auf 16px zu gehen, um eine gute Lesbarkeit zu gewährleisten. Der WCAG-Test definiert allerdings, dass unabhängig von der Browser-Breite die Schriftgröße um bis zu 200 % vergrößert werden können muss. Dazu ist eine maximale Zeilenbreite von 80 Zeichen zulässig – was primär Desktop-Geräte betrifft. Wir bewegen uns bei unseren Websites und einspaltigen Inhalten daher in der Regel unter 800px Breite.
Da eine reine Schriftvergrößerung unter Beibehaltung der Spaltenbreiten auf Websites kaum erfüllt werden kann und alle gängigen Browser über eine Zoom-Funktion verfügen, fordert der AA-Test lediglich, dass eine Website diese Funktion unterstützt und es zu keinen Darstellungsfehlern und Überlappungen kommt. Da die meisten Websites responsiv entwickelt werden, sprich gleichermaßen für Desktop- und Mobilgeräte, ist die Schriftvergrößerung mittels Zoom-Funktion meist „automatisch“ gewährleistet.
Interaktionen
Beim Styling sollte außerdem dringend darauf geachtet werden, dass Buttons und Links ausreichend groß sind, um sie auch etwas ungelenker oder mit dickeren Fingern (mobil bzw. auf Touch-Displays) klicken zu können. Buttons und Links sollten verständlich bezeichnet und klar als solche erkennbar sein, beispielsweise durch Unterstreichung letzterer.
Icons- und Telefon-Nummern sollten mit einer Beschriftung eingesetzt werden, da diese für Screenreader-Nutzer meist unzureichend beschriftet sind: So wird bei Fokussierung der Telefon-Nummer überwiegend nur die Rufnummer vorgelesen oder bei Icons nichts. Ein Hinweis wie „Tel.:“ oder Icon-Labels (Bildunterschriften) helfen dabei.
Zudem sollten alle Interaktionen – Buttons, Links, Formulare, Akkordeons etc. – mithilfe der Tastatur navigierbar (Tab- oder Pfeiltasten) sein und funktionieren. Damit Sehgeschädigte ihre Interaktionen mit der Tastatur besser erkennen, empfiehlt es sich, Focus-Styles in Signal- oder Komplementärfarbe zu definieren.
Auch für visuelle Captchas sollte eine Screenreader-Lösung geboten werden wie eine Rechenaufgabe. Ein Sehgeschädigter tut sich sonst schwer, Brücken zu selektieren oder Buchstaben zu drehen.
Farben
Barrierefreiheit bedeutet aber auch, dass die Farben ausreichend Kontrast haben, damit die Inhalte einfach lesbar sind. Texte oder inhaltlich relevante Objekte sollten demnach mindestens den WCAG AA Standard erfüllen:
Elemente wie Schmuck- oder Hintergrundbilder sind davon per se nicht betroffen. Wenn Bilder aber wichtige Informationen für den Kontext enthalten oder Inhalte darauf abgebildet sind, ist ausreichend Kontrast dringend ratsam. Aus Sicht der Ladezeit-Optimierung empfehle ich auf Schmuck- oder Hintergrundbilder komplett zu verzichten.
Aber auch ähnlich satte Farben können problematisch sein, wenn beispielsweise Menschen mit einer Rot-Grün-Schwäche diese nicht mehr unterscheiden können. Ein praktisches Tool, um so etwas nachvollziehen zu können, ist der Color-Blind-Simulator von Venngage.
Barrierefreie Inhalte
Grundsätzlich sollten Inhalte mit einer hierarchischen Überschriften-Struktur und Formatierungen versehen werden. Das ist übrigens auch zur Suchmaschinenoptimierung dringend empfehlenswert.
Außerdem sollten leere Absätze und sinnfreie Listen unbedingt vermieden werden. Und umgekehrt sollten alle auflistbaren Elemente auch als solche formatiert werden.
Metadaten
Der Dokumententitel muss den Inhalt der individuellen Seite und das Webangebot (Firmennamen) enthalten. Aus SEO-Sicht ist der Firmenname zwar nur optional, da dieser meist schon in der Domain enthalten ist, aber wenn man den Firmennamen in Kurzform hinten anstellt, ist der Spagat zwischen Barrierefreiheit und SEO möglich.
Textverständnis
Barrierefreie Texte sollten leicht zu verstehen sein. Dabei kann man entweder Inhalte von vorneherein einfacher und in kurzen Sätzen formulieren, oder man bietet sie optional in leichter Sprache an.
Es gibt zwar keine feste Regel, die vorschreibt, wie einfach oder kompliziert die Inhalte sein sollten, da dies von der Zielgruppe abhängig ist. Wenn man aber alle Menschen erreichen will, sollten Texte auch mit niedriger, sekundärer Schulbildung verstanden werden können. Das bedeutet einen Flesch-Wert von 71 zu erreichen:
| Flesch-Reading-Ease-Score | Lesbarkeit | Verständlich für |
|---|---|---|
| 0–30 | Sehr schwer | Akademiker |
| 30–50 | Schwer | |
| 50–60 | Mittelschwer | |
| 60–70 | Mittel | 13–15-jährige Schüler |
| 70–80 | Mittel leicht | |
| 80–90 | Leicht | |
| 90–100 | Sehr leicht | 11-jährige Schüler |
Bilder & Videos
Wie bereits erläutert empfiehlt es sich aus Performance-Gründen auf Schmuck- und Hintergrundbilder sowie Videos im Hintergrund von Websites zu verzichten, wenn diese nicht zum Kontext beitragen. Sind Schmuckbilder und -Videos unvermeidlich, sollten dafür keine Alternativtexte hinterlegt werden, da diese meist irrelevant sind und es sehgeschädigten und blinden Nutzern erschweren, mithilfe eines Screenreaders die Inhalte einer Website zu verstehen.
Umgekehrt sollten aber alle Bilder, die etwas zum Kontext beitragen, mit beschreibenden Alternativtexten oder Bildunterschriften sowie Videos mit Untertiteln versehen werden. Darin sollten keine Keywords zur SEO auftauchen, sondern wirklich beschrieben werden, was abgebildet ist. Google kann übrigens Bilder auch ohne Alternativtext schon gut verstehen.
Wichtige Videos sollten in Gebärdensprache angeboten werden. Hier möchte ich auch wieder unseren Kunden, die Krankenkasse BKK ProVita nennen, welche diverse Informationen in Deutscher Gebärdensprache (kurz: DGS) auf ihrer Website anbietet.
Die Untertitel von Videos eignen sich übrigens auch zur Video-SEO. Mit anderen Worten: Spricht man die Keywords ein, mit denen man gefunden werden will, erhöht das die Reichweite. Aber wie gesagt, bitte die Untertitel nicht inflationär mit Keywords vollstopfen, sondern Keywords sinnvoll nennen – wir entwickeln unsere Inhalte ja nicht für Google oder YouTube, sondern für Menschen. Hierzu eine Empfehlung von Google zur Videooptimierung:
Formulare
Formulare sollten mit klaren Beschriftungen („Labels“) versehen werden, damit vor und nach Eingabe von Informationen klar ist, was benötigt wird. Außerdem sollte durch Klick auf die Beschriftung (zum Beispiel auf das Wort “Vorname”) der Mauszeiger in das Eingabefeld springen.
Des Weiteren sollten Formularfelder für das automatische Ausfüllen („Autocomplete“) vorbereitet sein, damit Nutzerinnen ihre Kontaktdaten nicht manuell eintippen müssen.
Das Nachricht-Feld in Formularen sollte erst nach Eingabe der Kontaktdaten erscheinen.
Fazit
Barrierefreie Web-Entwicklung ist leicht, wenn man die Grundlagen zur Lesbarkeit (Kontraste, Schriftgröße, Dimensionen) beachtet, ordentliche Formatierungen anwendet und einfache Sätze verfasst.
Durch eine barrierefreie Website erreicht man mehr Menschen und integriert sie besser in die Gesellschaft. Barrierefreiheit ist auch ein Qualitätsstandard für Websites, denn die Effekte einer gut entwickelten Seite wirken sich positiv auf das Ranking (SEO) aus.
Hinweis: Die erste Version dieses Beitrags ist im November 2022 entstanden. Hiermit geht ein Dank an Saskia Bader, deren Vortrag auf der Campixx-Konferenz im Juni 2023 mir bei der Aktualisierung dieses Artikels geholfen hat.