Barrierefreie Websites 2026: BFSG-Pflicht, Checkliste & Strafen

Barrierefreiheit richtig umsetzen: Technische Leitlinien im Überblick

Die Web Content Accessibility Guidelines (WCAG) sind internationale Richtlinien für die Barrierefreiheit von Webinhalten und somit die Grundlage für barrierefreie Websites. Sie werden vom World Wide Web Consortium (W3C) entwickelt und regelmäßig aktualisiert, um den technologischen Fortschritt sowie neue Anforderungen in der digitalen Barrierefreiheit zu berücksichtigen.

Mit der Veröffentlichung von WCAG 2.1 im Juni 2018 lag der Fokus insbesondere auf der Barrierefreiheit für mobile Geräte wie Smartphones und Tablets. Diese Version ergänzte bestehende Erfolgskriterien, um sicherzustellen, dass Webinhalte auch auf kleineren Bildschirmen und unter variablen Bedienbedingungen gut zugänglich bleiben. Die nächste Weiterentwicklung folgte im Oktober 2023 mit WCAG 2.2, die neun zusätzliche Erfolgskriterien der Stufen A, AA und AAA einführt. Diese Erweiterungen sollen die digitale Zugänglichkeit weiter verbessern und gewährleisten, dass moderne Technologien und Geräte noch besser berücksichtigt werden.

Es wird empfohlen, WCAG 2.2 als neues Konformitätsziel anzunehmen, um die bestmögliche Barrierefreiheit zu gewährleisten und sich frühzeitig auf zukünftige gesetzliche Anforderungen vorzubereiten. Auch wenn formale Verpflichtungen häufig noch frühere Versionen nennen, bietet eine frühzeitige Umsetzung der neuesten Standards langfristige Vorteile für die digitale Zugänglichkeit.

Die Prinzipien der WCAG

• Wahrnehmbarkeit: Inhalte müssen von allen Nutzern erkannt und verstanden werden können, z. B. durch alternative Texte für Bilder und Untertitel für Videos.
• Bedienbarkeit: Die Navigation muss für alle Nutzer einfach zugänglich sein, z. B. durch Tastaturnavigation und sichtbare Fokus-Indikatoren.
• Verständlichkeit: Inhalte sollten klar und einfach formuliert sein, damit sie auch von Nutzern mit kognitiven Einschränkungen erfasst werden können.
• Robustheit: Inhalte müssen mit einer Vielzahl von Geräten und assistiven Technologien kompatibel sein.

Die Drei Konformitätsstufen der WCAG

Die WCAG sind in drei Konformitätsstufen unterteilt: A, AA und AAA. In Deutschland orientiert sich die BITV 2.0 (Barrierefreie-Informationstechnik-Verordnung) an der WCAG 2.2 AA und macht diese Stufe für viele öffentliche Stellen verpflichtend. Diese Stufen bestimmen, in welchem Umfang eine Website barrierefrei gestaltet ist:

• WCAG A: Die niedrigste Stufe der Barrierefreiheit. Sie umfasst die grundlegendsten Anforderungen, die notwendig sind, damit eine Website überhaupt von Menschen mit Behinderungen genutzt werden kann. Dazu gehören z. B. Alternativtexte für Bilder, Tastaturbedienbarkeit und erkennbare Inhalte.
  
• WCAG AA: Diese Stufe baut auf WCAG A auf und stellt höhere Anforderungen. Sie ist die meistempfohlene Stufe für Unternehmen und öffentliche Einrichtungen, da sie eine gute Balance zwischen Barrierefreiheit und Designmöglichkeiten bietet. Beispiele sind ein ausreichendes Farbkontrastverhältnis, anpassbare Textgrößen und eine verständliche Navigation.
  
• WCAG AAA: Die höchste Stufe der Barrierefreiheit. Sie beinhaltet sehr strenge Anforderungen, die oft schwer vollständig umzusetzen sind, insbesondere für komplexe Websites. Beispiele sind eine noch höhere Farbkontrastanforderung, die Bereitstellung von Gebärdensprachvideos und eine besonders einfache Sprache.

Wer muss das Barrierefreiheitsstärkungsgesetz umsetzen?

Verpflichtung zur Barrierefreiheit für Unternehmen im digitalen Bereich

Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet Unternehmen, digitale Barrieren abzubauen und auf barrierefreies Webdesign zu setzen, um Menschen mit Behinderungen den gleichberechtigten Zugang zu digitalen Dienstleistungen zu ermöglichen. Diese Regelung betrifft vor allem Unternehmen in den Bereichen E-Commerce, Telekommunikation, Finanzen, Transport und Gesundheitswesen.

E-Commerce:

Online-Händler, von großen Plattformen bis zu kleinen Shops, müssen ihre Websites so gestalten, dass alle Nutzer – unabhängig von körperlichen Einschränkungen – problemlos auf ihre Angebote zugreifen können.

Telekommunikation:

Telekommunikationsanbieter sind ebenfalls gefordert, ihre Serviceportale und Apps barrierefrei zu machen. Das BFSG fordert hier unter anderem die Möglichkeit, Verträge und Serviceanfragen barrierefrei abzuwickeln.

Finanzinstitute und Banken:

Auch Banken sind zur Anpassung verpflichtet, um sicherzustellen, dass ihre Online-Banking-Dienste für alle zugänglich sind und Kunden Konten verwalten und Finanzprodukte online nutzen können.

Transport und Reise:

Im Transport- und Reisebereich umfasst die Verpflichtung, dass Buchungssysteme, Fahrplaninformationen und digitale Ticketkäufe ohne Hindernisse nutzbar sind. Dies schließt alle Reisenden ein, einschließlich Menschen mit Behinderungen.

Gesundheitswesen:

Auch im Gesundheitsbereich gilt das BFSG. Krankenhäuser, Apotheken und andere Gesundheitsdienstleister müssen digitale Patientenportale und Online-Terminbuchungssysteme barrierefrei gestalten.

Ausnahmen des Barrierefreiheitsstärkungsgesetz

Kleinstunternehmen, die Dienstleistungen erbringen, sind befreit, sofern sie weniger als zehn Mitarbeiter beschäftigen und entweder einen Jahresumsatz oder eine Bilanzsumme von maximal zwei Millionen Euro nicht überschreiten. Diese Ausnahme gilt jedoch nicht für Kleinstunternehmen, die Produkte herstellen, die unter das BFSG fallen. Ebenso können Unternehmen von der Verpflichtung ausgenommen werden, wenn die Umsetzung der Barrierefreiheit eine unverhältnismäßige Belastung darstellen würde. Dies muss jedoch individuell geprüft und nachgewiesen werden. Darüber hinaus sind Online-Shops, die sich ausschließlich an Geschäftskunden (B2B) richten, nicht betroffen, sofern ihr Webauftritt eindeutig als B2B-Angebot gestaltet ist und das B2B Online Marketing klar auf Unternehmen ausgerichtet ist und sich nicht an Verbraucher richtet.

Individuelle Umsetzung der digitalen Barrierefreiheit

Erfüllen Sie die Anforderungen und machen Sie Ihre Website fit für alle Nutzer! Lassen Sie sich von uns beraten, wie Sie digitale Barrierefreiheit erfolgreich umsetzen und neue Zielgruppen gewinnen können. Kontaktieren Sie uns für Ihre barrierefreie Lösung!

BFSG seit Juni 2025 in Kraft — was jetzt zu tun ist

Das Barrierefreiheitsstärkungsgesetz (BFSG) ist am 28. Juni 2025 in Kraft getreten — die Übergangsfrist ist also seit fast einem Jahr abgelaufen. Wenn Ihre Website (oder Ihr Onlineshop) zu den vom BFSG erfassten Diensten gehört und nicht barrierefrei ist, befinden Sie sich seit Juli 2025 in einem rechtlichen Risikobereich.

Was Sie jetzt konkret tun sollten:

1. BFSG-Audit beauftragen — externe Prüfung, welche Bereiche Ihrer Website nicht-konform sind. Aufwand typischerweise 800–2.500 €, Ergebnis ist ein priorisierter Maßnahmenplan.
2. Akute Risiken zuerst schließen — Formulare, Kontaktwege, Kauf-Prozesse müssen tastatur-bedienbar sein und Screen-Reader-Labels haben. Das ist die häufigste Abmahn-Ursache.
3. Barrierefreiheitserklärung im Footer veröffentlichen — Pflicht-Dokument mit Konformitätsstatus, bekannten Mängeln und Kontakt zur Meldung.
4. Mittel- bis langfristig: Vollständige BFSG-Konformität auf WCAG 2.2 AA-Niveau anstreben, regelmäßige Re-Audits planen.

In den ersten Monaten nach Inkrafttreten (Juli–Dezember 2025) war die behördliche Marktaufsicht eher beratend orientiert — das Abmahnrisiko durch Wettbewerber und Verbraucherverbände war jedoch von Anfang an real. Im Laufe von 2026 wird auch die behördliche Durchsetzung deutlich strenger.

Strafen bei Nicht-Einhaltung: Bis zu 100.000 € Bußgeld plus Abmahnrisiko

Die Nicht-Einhaltung der Barrierefreiheitsanforderungen nach BFSG kann seit Juni 2025 in fünf verschiedenen Formen teuer werden:

• 1. Bußgelder bis 100.000 € pro Verstoß
  Die Marktüberwachungsbehörden der Länder können laut BFSG §37 Bußgelder von bis zu 100.000 € verhängen — pro Verstoß, nicht pro Unternehmen. Bei mehreren nicht-konformen Funktionen kann sich das summieren.
• 2. Abmahnungen durch Wettbewerber und Verbraucherschutzverbände
  Das BFSG ist ein abmahnfähiges Marktverhaltensgesetz nach UWG. Wettbewerber und qualifizierte Verbraucherverbände (z.B. vzbv) können Sie kostenpflichtig abmahnen — typische Abmahnkosten liegen bei 1.500–5.000 € pro Fall, plus die Pflicht zur Beseitigung.
• 3. Untersagung des Vertriebs
  In schwerwiegenden Fällen können die Behörden den Vertrieb der nicht-konformen Dienstleistung untersagen — bedeutet: Ihr Onlineshop oder Ihre Service-Plattform geht offline, bis Konformität hergestellt ist.
• 4. Ausschluss von öffentlichen Ausschreibungen
  Öffentliche Auftraggeber sind verpflichtet, Barrierefreiheit in ihren Ausschreibungen zu berücksichtigen. Wer als Anbieter nicht BFSG-konform ist, fliegt aus dem Bewerbungsprozess. Betrifft besonders B2B-Anbieter für öffentliche Hand.
• 5. Image- und Reputationsschaden
  Nicht-konforme Websites werden zunehmend öffentlich kritisiert — von Aktivistinnen, Branchenmedien und Social-Media-Plattformen. Der reputative Schaden übersteigt häufig die Bußgeld-Höhe deutlich.

Praxistipp: Wenn Sie die Risiken realistisch einschätzen wollen, ist ein Webdesign-Audit mit BFSG-Check der schnellste Weg. Wir prüfen, welche Verstöße bei Ihnen aktuell anliegen, und sortieren nach Dringlichkeit.

Was kostet eine barrierefreie Website?

Die ehrliche Antwort: Es kommt darauf an, ob Sie eine bestehende Website nachrüsten oder neu bauen.

• Bei einem Neubau: BFSG-Konformität ist bei modernen Agenturen heute Standard und kostet nichts extra. Bei uns zum Beispiel in jedem Webdesign-Paket automatisch enthalten.
• BFSG-Audit allein: 800–2.500 € einmalig — Sie bekommen einen klaren Maßnahmenplan und können selbst entscheiden, ob Sie umsetzen lassen oder intern erledigen.
• Nachrüstung kleiner Website (10–30 Seiten): 2.500–5.000 € — Farbkontraste, Alt-Texte, Formular-Labels, Tastatur-Navigation, ARIA-Attribute, Barrierefreiheitserklärung.
• Nachrüstung mittlere Firmenwebsite (30–100 Seiten): 5.000–12.000 € je nach Komplexität.
• Nachrüstung E-Commerce-Plattform: 15.000–50.000 € — Onlineshops haben deutlich mehr interaktive Elemente (Filter, Warenkorb, Checkout), die alle nach WCAG 2.2 AA umgesetzt werden müssen.

Mehr zu Website-Kosten allgemein im Ratgeber Was kostet eine Website.

Gilt das BFSG auch für B2B-Websites?

Die häufigste Rückfrage aus dem Mittelstand: „Wir verkaufen nur an Geschäftskunden — gilt das BFSG dann überhaupt für uns?"

Grundregel: Das BFSG verpflichtet Anbieter, die Produkte oder Dienstleistungen an Verbraucherinnen und Verbraucher richten. Reine B2B-Websites ohne Verbrauchergeschäft sind formell nicht erfasst.

Aber Vorsicht: In der Praxis sind viele „B2B-Websites" doch BFSG-relevant, weil sie Funktionen für Verbraucher anbieten:

• Kontaktformular auf der Website (auch von Verbrauchern nutzbar)
• Karriereseite mit Bewerbungs-Funktion (Bewerber sind Verbraucher)
• Newsletter-Anmeldung
• Webinare oder Whitepaper-Downloads gegen E-Mail-Adresse
• Jede Service-Buchung, die auch Einzelpersonen offensteht

Ausnahme für Kleinstunternehmen: Unternehmen mit unter 10 Mitarbeitenden UND unter 2 Mio. € Jahresumsatz sind von vielen BFSG-Pflichten ausgenommen — das gilt aber nur, wenn beide Kriterien erfüllt sind.

Unser pragmatischer Rat: Selbst wenn das BFSG nicht zwingend für Sie gilt — Barrierefreiheit ist heute auch ein SEO-Faktor und ein Zeichen professioneller Webentwicklung. Wer barrierefrei baut, hat bessere Rankings, weniger Reklamationen und keine Abmahn-Diskussionen.

Vorteile der Barrierefreiheit im Web

Größere Reichweite durch barrierefreie Websites

Barrierefreiheit im Web bietet viele Vorteile, die über die reine Erfüllung gesetzlicher Anforderungen hinausgehen. Eine barrierefreie Webseite ermöglicht es, eine größere Zielgruppe zu erreichen, da sie nicht nur für Menschen mit Behinderungen, sondern auch für ältere Nutzer oder Menschen mit technischen Einschränkungen einfacher zu bedienen ist. Barrierefreiheit sorgt für eine benutzerfreundlichere Website, was wiederum zu höheren Konversionsraten und einer stärkeren Kundenbindung führen kann. Unternehmen, die ihre Webseiten barrierefrei gestalten, steigern somit nicht nur ihre Reichweite, sondern verbessern auch die Nutzererfahrung für alle Besucher.

Rechtliche Absicherung und SEO-Vorteile

Ein weiterer Vorteil einer barrierefreien Webseite ist die rechtliche Absicherung. Unternehmen, die ihre Webseiten frühzeitig an die neuen Vorschriften anpassen, vermeiden mögliche Bußgelder und rechtliche Konsequenzen. Zudem trägt Barrierefreiheit zur Suchmaschinenoptimierung (SEO) bei, die einen wichtigen Bestandteil des Suchmaschinenmarketings bildet. Webseiten, die barrierefrei gestaltet sind, bieten oft eine bessere Benutzerführung, klarere Strukturen und schnellere Ladezeiten – alles Faktoren, die auch von Suchmaschinen wie Google positiv bewertet werden. Eine barrierefreie Webseite kann also nicht nur das Ranking verbessern, sondern auch die Sichtbarkeit in den Suchergebnissen steigern.

Barrierefreie Website Checkliste: So gestalten Sie Ihre Website barrierefrei

Um sicherzustellen, dass Ihre Webseite den Anforderungen des BFSG entspricht, können Sie eine Webseitenprüfung durchführen, um Schwachstellen zu eliminieren und Barrieren zu entfernen. Nutzen Sie die folgende Checkliste als Leitfaden, um Ihre Website barrierefrei zu gestalten.

1. Textalternativen für Bilder und Grafiken

Alle visuellen Inhalte, wie Bilder und Grafiken, sollten mit alternativen Texten (Alt-Tags) versehen werden, die den Inhalt oder Zweck des Bildes beschreiben. Dies stellt sicher, dass Nutzer von Screenreadern die Information erfassen können. Alternativtexte sind zudem hilfreich, wenn die Ladezeit der Webseite langsam ist, da sie den Bildinhalt ersetzen können. Dabei ist zwischen dekorativen und sinntragenden Bildern zu unterscheiden:

• Dekorative Bilder sollten von Screenreadern ignoriert werden, indem das Alt-Attribut leer bleibt (alt=““).

• Für sinntragende Bilder sollte der Alt-Text den Inhalt prägnant und sinnvoll beschreiben, ohne dabei auf eine Ansammlung von Keywords für SEO-Zwecke zurückzugreifen.

(Quelle: Contrast Checker von WebAIM)

2. Gute Farbkontraste

Achten Sie darauf, dass der Kontrast zwischen Text und Hintergrund stark genug ist, um eine gute Lesbarkeit zu gewährleisten. Besonders Nutzer mit Sehbehinderungen oder Farbfehlsichtigkeit profitieren davon. Ein Kontrastverhältnis von mindestens 4,5:1 für normale Texte und 3:1 für große Schriftgrößen (ab 18 pt) ist der Mindestanspruch. Ideal wäre ein Verhältnis von 7:1.

Tipp:
Es gibt Tools und Plugins, die bei der Umsetzung eines optimalen Kontrastverhältnisses helfen, um die Barrierefreiheit von Internetseiten zu fördern. Zum einen gibt es die bekannte Chrome-Erweiterung Skilltide, mit der es einem einfach gemacht wird die Kontrastwerte einzusehen. Aber es gibt auch innerhalb der Developer Tools von Chrome und Firefox eine Möglichkeit eine Prüfung der Kontrastwerte durchzuführen, diese zeigt zwar nicht explizit die Werte an, aber ist trotzdem ein guter Anhaltspunkt für den Anfang. Ein weiteres nützliches Webtool ist der Contrast Checker von WebAIM. Hier kann man auch die Hex-Werte eintragen und das Ergebnis des Web Accessibility Tests einsehen (Siehe Abbildung).

3. Strukturierte und zugängliche Überschriften

Die Barrierefreiheit einer Webseite hängt maßgeblich von ihrer semantischen Struktur ab, da Screenreader Inhalte in linearer Reihenfolge erfassen. Sehende Nutzer nehmen Informationen hingegen durch Blicksprünge und Fixationen auf.

Damit Screenreader effizient navigieren können, ist eine korrekte Kennzeichnung von Überschriften und Landmarks unerlässlich. Es ist essenziell, die semantisch korrekte Auszeichnung von Überschriften in HTML zu beachten, um die Navigation für Screenreader-Nutzer zu optimieren. Eine Webseite sollte mit einer klar definierten H1-Überschrift beginnen, auf die logisch aufgebaute H2-Überschriften folgen. Falls erforderlich, können weitere Hierarchieebenen von H3 bis H6 eingesetzt werden, um die Inhalte sinnvoll zu gliedern. Dieser Punkt ist besonders wichtig in der Checkliste für barrierefreie Websites, da in der Praxis oft Überschriften basierend auf ihrem optischen Erscheinungsbild statt ihrer inhaltlichen Struktur gewählt werden. Dies kann jedoch die Verständlichkeit für assistive Technologien erheblich beeinträchtigen.

(barrierefreie Überschriftenstruktur einer Seite)

4. Tastatur Navigation

Für eine barrierefreie Tastaturnavigation muss sichergestellt werden, dass Webseiten und Anwendungen vollständig ohne Maus nutzbar sind. Dies ist insbesondere für Menschen mit motorischen Einschränkungen sowie für blinde oder sehbehinderte Nutzer von Screenreadern essenziell.

Zentrale Aspekte:

• Vollständige Bedienbarkeit über die Tastatur: Stelle sicher, dass alle interaktiven Elemente wie Links, Formularfelder, Schaltflächen und Menüs mit der Tastatur erreichbar und bedienbar sind. Die Navigation innerhalb der Webseite sollte ausschließlich über die Tastatur möglich sein
• Intuitive Navigation: Die Navigation durch die Webseite sollte mit der Tab-Taste möglich sein. Auch das Auswählen von vorherigen Elementen (Umschalt + Tab) ist dabei wichtig. Um mit Schaltflächen interagieren zu können ist die Verwendung von Pfeiltasten unerlässlich.
• Tastaturfokus: Der Tastaturfokus ist essenziell für die barrierefreie Navigation und hebt das aktuell ausgewählte Element visuell hervor, meist durch einen Rahmen oder eine andere Markierung. Ein gut sichtbarer Fokus erleichtert es insbesondere blinden und motorisch eingeschränkten Nutzern, sich auf einer Webseite zu orientieren. Die logische Fokusreihenfolge sollte der natürlichen Leserichtung folgen und darf nicht unerwartet springen. Zudem müssen Tastaturfallen vermieden werden, die verhindern, dass der Fokus wieder verlassen werden kann. Die WCAG 2.1 fordert, dass alle interaktiven Elemente per Tastatur erreichbar sind. Der Fokus sollte nicht auf verdeckte Inhalte springen, sich innerhalb geöffneter Dialogfenster befinden und Cookie-Banner müssen per Tastatur bedienbar sein.

5. Beschriftungen und Anweisungen in Formularen

Formulare müssen mit klaren Beschriftungen oder Anweisungen versehen sein, wenn eine Benutzereingabe erforderlich ist. Die Web Content Accessibility Guidelines (WCAG) 2.2 definieren hierzu spezifische Vorgaben für die Gestaltung von Beschriftungen und Anleitungen in Formularen. Besonders bei Authentifizierungsprozessen, die zur Formularübermittlung erforderlich sind – etwa das Lösen einer mathematischen Gleichung –, können kognitive Barrieren für bestimmte Personengruppen entstehen. In solchen Fällen sollte eine Alternative oder unterstützende Hilfestellung angeboten werden, um sicherzustellen, dass alle Nutzer das Formular barrierefrei nutzen können.

• Fehlererkennung: Bei einem Eingabefehler muss das fehlerhafte Element erkannt und der Fehler in Textform beschrieben werden.

• Beschriftungen oder Anweisungen: Beschriftungen oder Anweisungen sind bereitzustellen, wenn der Inhalt eine Benutzereingabe erfordert.

6. Barrierefreie Multimedia-Inhalte

Um Audio- und Videoinhalte barrierefrei zu gestalten, müssen Transkripte oder Audiobeschreibungen bereitgestellt werden, damit alle Nutzer die Inhalte erfassen können. Audiodeskriptionen sind essenziell für sehbehinderte Personen, da sie visuelle Elemente wie Szenenwechsel oder Handlungen erklären.

Untertitel erleichtern das Verständnis gesprochener Inhalte, indem sie Dialoge und akustische Hinweise wie Soundeffekte oder Musik wiedergeben. Zusätzlich kann eine Gebärdensprachdolmetschung die Zugänglichkeit für hörgeschädigte Nutzer verbessern.

Automatisch abgespielte Audioinhalte sollten eine Steuerungsmöglichkeit bieten, um Lautstärke zu regulieren oder den Ton auszuschalten. Hintergrundgeräusche müssen minimiert oder abschaltbar sein, damit sie nicht die Sprachverständlichkeit beeinträchtigen.

7. PDF-Dokumente

PDF-Dokumente sollten ebenfalls barrierefrei gestaltet sein. Durch entsprechende Tags im PDF versteht ein assistives System die semantische Struktur. Verwenden Sie in Word-Dokumenten die Formatvorlagen „Überschrift 1“ und „Überschrift 2“, um Überschriften für Screenreader zugänglich zu machen, wenn Sie ein PDF erzeugen. Achten Sie zudem darauf, Alternativtexte für Bilder, eine logische Lesereihenfolge und korrekt ausgezeichnete Tabellen zu verwenden. Beim Export sollten die Optionen „Dokumentstrukturtags für Barrierefreiheit“ und „Textmarken mithilfe von Überschriften erstellen“ aktiviert sein. Zudem können Dokumenteneigenschaften wie Titel, Autor und Betreff festgelegt werden, was nicht nur die Zugänglichkeit, sondern auch die Auffindbarkeit in Suchmaschinen verbessert – denn auch PDFs werden von Google gerankt. Eine abschließende Prüfung mit Adobe Acrobat Pro hilft, Fehler zu identifizieren und die Lesbarkeit mit Screenreadern zu testen.

Wenn Sie Unterstützung bei der Erstellung eines persönlichen, barrierefreien PDFs benötigen, sind wir der richtige Ansprechpartner. Lesen Sie unseren Artikel „PDF beschreibbar machen“ durch um mehr zu erfahren oder treten Sie gleich jetzt in Kontakt mit uns!

Barrierefreie & individuelle PDFs für Ihr Unternehmen

Sorgen Sie für professionelle, zugängliche und maßgeschneiderte PDFs, die alle gesetzlichen Anforderungen erfüllen. Unser Service hilft Ihnen, barrierefreie Dokumente zu erstellen, die für alle Nutzer leicht verständlich und nutzbar sind.

Unsere barrierefreien PDFs sind 100 % rechtskonform, perfekt gebrandet und überall optimal nutzbar – digital und gedruckt. Jetzt Ihre Dokumente professionell optimieren lassen!

8. Verzicht aufblinkende oder flackernde Elemente

Das Vermeiden von blinkenden oder flackernden Elementen ist ein wesentlicher Bestandteil der Barrierefreiheit, da solche Effekte Anfälle oder körperliche Reaktionen bei empfindlichen Nutzern auslösen können.

Definition von Blitzen und Flackern – Testen und Vermeiden

Ein Blitz entsteht durch abrupte Helligkeitswechsel, die unter bestimmten Bedingungen Anfälle auslösen können. Die WCAG 2.2 legt hierfür klare Grenzwerte fest. Eine Ausnahme bilden kleine, gleichmäßig verteilte Muster wie weißes Rauschen oder feine Schachbrettmuster, die unterhalb der kritischen Schwelle bleiben.
Um sicherzustellen, dass Webinhalte keine gesundheitsgefährdenden Blitzeffekte enthalten, sollten Entwickler geeignete Analyse-Tools nutzen, die problematische visuelle Reize identifizieren. Inhalte, die nicht mehr als drei Blitze pro Sekunde enthalten, gelten automatisch als konform mit den WCAG-Richtlinien. Um Risiken zu minimieren, sollten Designentscheidungen von Anfang an so getroffen werden, dass bekannte Auslöser für Anfälle oder körperliche Reaktionen ausgeschlossen werden. Ein hilfreiches Tool zur Überprüfung ist das Photosensitive Epilepsy Analysis Tool (PEAT), das potenziell gefährliche Blitzeffekte analysiert und frühzeitig auf problematische Inhalte hinweist.

Zusätzliche Aspekte für barrierefreie Inhalte

• Animationen sollten deaktivierbar sein, sofern sie nicht essenziell sind.
• Blinkende, bewegliche oder scrollende Inhalte, die automatisch starten und länger als fünf Sekunden dauern, müssen anpassbar sein.

9. Klare und einfache Sprache

Orientieren Sie sich an den Vorgaben der DIN ISO 24495-1, die Kriterien für verständliche Kommunikation definiert, und verwenden Sie eine klare, einfache Sprache. So stellen Sie sicher, dass Inhalte für möglichst viele Menschen zugänglich sind, insbesondere für Nutzer mit kognitiven Einschränkungen. Eine verständliche Sprache ist ein zentraler Bestandteil der Website-Barrierefreiheit und trägt dazu bei, dass Informationen leicht erfasst und verarbeitet werden können.

Leichte Sprache

Leichte Sprache richtet sich gezielt an Menschen mit kognitiven Behinderungen. Sie vermeidet komplizierte Wörter, nutzt einfache Satzstrukturen und trennt lange Wörter. Eine Normierung (DIN SPEC 33429:2023-04) befindet sich in Entwicklung.

Richtlinien für klare Sprache

• Einfache Wörter: Vermeidung von Fachbegriffen, Metaphern und Ironie.
• Kurze Sätze: Schachtelsätze vermeiden, ca. 15 Wörter pro Satz.
• Erklärungen: Fachbegriffe und Abkürzungen erläutern.
• Konsistenz: Einheitliche Darstellung und Navigation.
• Fehlervermeidung: Unterstützen Sie die Benutzer dabei, Eingabefehler zu vermeiden.

10. Responsives Design und Zoom Funktion

Ihre Website sollte so gestaltet sein, dass sie auf verschiedenen Geräten gut funktioniert und vergrößert werden kann, ohne an Funktionalität oder Lesbarkeit zu verlieren. Um ein responsives und barrierefreies Design für Ihre Website umzusetzen, sollten Sie folgende Aspekte beachten:

• Flexibles Layout: Relative Einheiten wie Prozentwerte statt fester Pixelwerte sorgen dafür, dass sich Inhalte an verschiedene Bildschirmgrößen anpassen.
• Anpassbare Bilder: Bilder sollten sich dynamisch in ihr Layout einfügen und nicht über den Container hinausragen. Das <picture>-Element oder CSS hilft, verschiedene Bildgrößen für unterschiedliche Geräte bereitzustellen.

• CSS Media Queries: Mithilfe von Media Queries lassen sich Schriftgrößen, Layouts und Designelemente gezielt für verschiedene Geräte anpassen. Media Queries helfen außerdem dabei, epileptische Anfälle zu vermeiden, indem sie die „prefers-reduced-motion“-Einstellung unterstützen, die Nutzern ermöglicht, übermäßige Bewegungen oder blinkende Inhalte zu reduzieren.
• Testen der Darstellung: Websites sollten auf unterschiedlichen Geräten und Bildschirmgrößen geprüft werden, um sicherzustellen, dass sie korrekt dargestellt werden und barrierefrei nutzbar sind. Neben den integrierten Browser-Entwicklungstools kann die Chrome-Erweiterung Mobile Simulator verwendet werden, um verschiedene mobile Endgeräte zu simulieren und das Verhalten der Website auf unterschiedlichen Displaygrößen zu testen.

11. Klickbare Elemente

Größe der Elemente

Die Größe klickbarer Elemente ist ein entscheidender Faktor für die Barrierefreiheit, da kleine Ziele für Menschen mit motorischen Einschränkungen schwer zu treffen sind. Die WCAG 2.2 empfehlen daher eine Mindestgröße von 24 x 24 CSS-Pixeln für Zeigereingaben. Ausnahmen gelten, wenn die Elemente genügend Abstand haben, eine alternative Steuerung auf der Seite vorhanden ist, die Größe durch Textlayout oder den User Agent vorgegeben wird oder eine bestimmte Darstellung gesetzlich erforderlich ist.

Beschriftungen und Anweisungen

Klickbare Elemente benötigen eine eindeutige und verständliche Beschriftung, die ihren Zweck klar beschreibt. Dies erleichtert insbesondere Menschen mit kognitiven Einschränkungen die Nutzung. Ergänzende kurze und prägnante Anweisungen können die Bedienung weiter unterstützen.

12. Statusmeldungen

Live-Regionen

Statusmeldungen sollten von Screenreadern vorgelesen werden, ohne den Fokus des Nutzers zu verändern. Dies kann durch die Verwendung einer Live-Region erreicht werden – einem speziellen Bereich einer Webseite, dessen Inhalt sich dynamisch ändert, ohne dass die Seite neu geladen werden muss.

Live-Regionen ermöglichen es Nutzern von assistiven Technologien, über Aktualisierungen informiert zu bleiben, ohne ihre aktuelle Position auf der Seite zu verlieren. Sie eignen sich insbesondere für dynamische Inhalte wie Statusmeldungen, Chatnachrichten oder Fortschrittsanzeigen. Damit sie barrierefrei sind, müssen sie Screenreader-kompatibel sein und die Inhalte korrekt wiedergeben.

13. Textgröße und Abstände

Textgröße

Das Erfolgskriterium 1.4.4 fordert, dass sich Text ohne den Einsatz assistierender Technologien um bis zu 200 % vergrößern lässt, ohne dass Inhalte oder Funktionen verloren gehen. Davon ausgenommen sind Untertitel und textbasierte Bilder.

• Vergrößerung ohne Assistenztechnologien: Die Textanpassung soll direkt über Browserfunktionen oder benutzerseitige Einstellungen möglich sein, ohne spezielle Software oder Erweiterungen zu erfordern.
• Kein Verlust von Inhalt oder Funktionalität: Vergrößerter Text darf weder abgeschnitten, noch überlagert oder unzugänglich werden. Auch die Bedienbarkeit der Webseite muss vollständig erhalten bleiben.
• Ausnahmen: Logos, nebensächliche Texte, Untertitel und Schriftgrafiken müssen nicht skalierbar sein.

Textabstand

Das Erfolgskriterium 1.4.12 verlangt, dass bei Markup-basierten Inhalten eine Anpassung der Textabstände möglich ist, ohne dass Inhalte oder Funktionen verloren gehen. Dabei müssen folgende Mindestwerte eingehalten werden:

• Zeilenabstand (line-height): Mindestens 1,5-fache der Schriftgröße
• Absatzabstand: Mindestens 2-fache der Schriftgröße
• Buchstabenabstand (letter-spacing): Mindestens 0,12-fache der Schriftgröße
• Wortabstand: Mindestens 0,16-fache der Schriftgröße