Barrierefreie Website – Pflicht ab 2025
Aktuell sind über 10 % der Menschen in Deutschland auf barrierefreie Zugänge angewiesen. Eine barrierefreie Website bietet allen Menschen – unabhängig von körperlichen oder kognitiven Einschränkungen – Zugang zu Inhalten und Funktionen im Internet. Eine inklusive Webgestaltung wird immer wichtiger, und ab 2025 wird die Barrierefreiheit für viele Unternehmen zur Pflicht.
Der Nutzen geht aber über die gesetzlichen Vorgaben hinaus: Durch barrierefreie Websites erreicht man ein breiteres Publikum, verbessert die Benutzerfreundlichkeit und optimiert seine Seite für Suchmaschinen (SEO).
Inhalt
- Was versteht man unter einer barrierefreien Website?
- Ab wann ist eine Website Barrierefrei?
- Übersicht der gesetzlichen Vorgaben zur Barrierefreiheit von Websites
- Ab wann ist eine barrierefreie Website Pflicht?
- Welche Gesetze gibt es?
- Übersicht der messbaren Faktoren für eine barrierefreie Website
- Wer ist nach aktuellem Stand von dem Gesetz betroffen?
- Barrierefreie Website – der Selbsttest
- Google Lighthouse und Pagespeed Insights:
- Farbkontrast
- Tastaturbedienbarkeit
- Screenreader-Kompatibilität
- Verständliche Sprache
- Formulare barrierefrei gestalten
- BITV-Test
- Warum ist eine barrierefreie Website wichtig?
- Tipps zur Umsetzung Barrierefreier Webseiten
- Semantische HTML-Struktur
- Bilder
- Audio & Videos
- CMS-Systeme
- Einfache & verständliche Sprache verwenden
- Checkliste Barrierefreie Websites
- Vorteile barrierefreier Websites für Unternehmen
dotflow®
dotflow ist die B2B Digitalagentur für smartes Online-Marketing und überzeugende Websites.
Was versteht man unter einer barrierefreien Website?
Eine barrierefreie Website ermöglicht uneingeschränkten Zugang für alle Nutzer, unabhängig von physischen, sensorischen oder kognitiven Einschränkungen. Barrierefreiheit umfasst hier die klare Strukturierung und intuitive Navigation der Website, sodass Inhalte verständlich und zugänglich sind.
Das bedeutet, dass visuelle, auditive und motorische Beeinträchtigungen berücksichtigt werden. Zudem sollten Texte und Funktionen durch Screenreader und andere assistive Technologien unterstützt werden.
Ab wann ist eine Website Barrierefrei?
Vorab: Eine vollständig barrierefreie Website wird es in absehbarer Zukunft nicht geben, da Menschen unterschiedlich starke und individuell ausgeprägte Einschränkungen haben. Es gibt jedoch vier konkrete Barrieren, die je nach Ausmaß der Beeinträchtigungen einen barrierefreien Zugang zum Internet erschweren können:
- Visuelle Barrieren: Zugänglichkeit für Menschen mit Farbenblindheit, Sehschwäche oder Blindheit durch angepasste Kontraste und Alternativtexte.
- Auditive Barrieren: Zugang für Menschen mit Taubheit oder Schwerhörigkeit durch Transkriptionen und Untertitel.
- Kognitive Barrieren: Verständliche Inhalte für Menschen mit Lernschwierigkeiten, leichter Sprache und klaren Strukturen.
- Motorische Barrieren: Bedienbarkeit ohne Maus für Menschen mit motorischen Einschränkungen.
Die genaue Messung und die Regelungen zur Barrierefreiheit sind in verschiedenen Gesetzen verankert, die im Folgenden näher erläutert werden.
Übersicht der gesetzlichen Vorgaben zur Barrierefreiheit von Websites
Ab wann ist eine barrierefreie Website Pflicht?
Ab dem 28. Juni 2025 sind digitale Barrierefreiheitsstandards verpflichtend für alle betroffenen Unternehmen und Institutionen, die im European Accessibility Act definiert wurden. Diese Regelung betrifft insbesondere den B2C-Bereich und zahlreiche öffentliche Einrichtungen, die ihre Websites und Online-Dienste barrierefrei gestalten müssen.
Welche Gesetze gibt es?
European Accessibility Act (EAA)
Der EAA ist eine EU-Richtlinie, die die Barrierefreiheit für digitale Produkte und Dienstleistungen in der gesamten EU sicherstellen soll. Die Richtlinie gilt ab Juni 2025 und betrifft vor allem den B2C-Bereich, darunter E-Commerce, Bankwesen und Kommunikationsdienste.
Norm EN 301 549
Die EN 301 549 definiert spezifische technische Standards für die Barrierefreiheit in digitalen Medien und beruht größtenteils auf den internationalen WCAG-Richtlinien. Diese Norm gilt als Standard für die EU und ist die Basis für das BFSG und die BITV in Deutschland.
Barrierefreiheitsstärkungsgesetz (BFSG)
Das BFSG setzt den EAA in Deutschland um und legt fest, dass private und öffentliche Anbieter im B2C-Bereich ihre digitalen Angebote barrierefrei gestalten müssen. Ziel ist es, die Teilhabe für Menschen mit Behinderungen zu fördern und Diskriminierungen zu vermeiden.
Barrierefreie Informationstechnologie-Verordnung (BITV)
Die BITV regelt die Barrierefreiheit von Websites und mobilen Anwendungen der öffentlichen Verwaltung in Deutschland. Sie fordert die Umsetzung der WCAG auf Konformitätsstufe AA, um die Zugänglichkeit öffentlicher Informationen und Dienstleistungen zu gewährleisten.
Web Content Accessibility Guidelines (WCAG)
Die WCAG sind internationale Richtlinien zur Barrierefreiheit im Web und bilden die Grundlage für alle anderen Regelungen. Sie umfassen drei Konformitätsstufen (A (Mindestmaß), AA (rechtlicher Standard), AAA (Höchste Stufe)) und fordern, dass digitale Inhalte für alle Benutzergruppen zugänglich und nutzbar sind.
Übersicht der messbaren Faktoren für eine barrierefreie Website
In der folgenden Tabelle sind alle Schlagworte zur Umsetzung einer barrierefreien Website übersichtlich dargestellt. Für genauere Details zur Umsetzung jeder einzelnen Maßnahme, empfiehlt sich ein genauerer Blick auf die WCAG Guidelines 2.2. Um auf einer rechtlich sicheren Seite zu sein, sollte jedes betroffene Unternehmen die Faktoren aus A & AA umsetzen, um das Optimum der barrierefreien Website zu ermöglichen.
| A | AA | AAA |
|---|---|---|
| Non-text Content | Captions (Live) | Sign Language (Prerecorded) |
| Audio-only and Video-only (Prerecorded) | Captions (Live) (Prerecorded) | Extended Audio Description (Prerecorded) |
| Captions (Prerecorded) | Orientation | Media Alternative (Prerecorded) |
| Audio Description or Media Alternative (Prerecorded) | Identify Input Purpose | Audio-only (Live) |
| Info and Relationships | Contrast (Minimum) | Identify Purpose |
| Meaningful Sequence | Resize Text | Contrast (Enhanced) |
| Sensory Characteristics | Images of Text | Low or No Background Audio |
| Use of Color | Reflow | Visual Presentation |
| Audio Control | Non-text Contrast | Images of Text (No Exception) |
| No Keyboard Trap | Text Spacing | Keyboard (No Exception) |
| Character Key Shortcuts | Content on Hover or Focus | No Timing |
| Timing Adjustable | Multiple Ways | Interruptions |
| Pause, Stop, Hide | Headings and Labels | Re-authenticating |
| Three Flashes or Below Threshold | Focus Visible | Timeouts |
| Bypass Blocks | Focus Not Obscured (Minimum) | Three Flashes |
| Page Titled | Dragging Movements | Animation from Interactions |
| Focus Order | Target Size (Minimum) | Location |
| Link Purpose (In Context) | Language of Parts | Link Purpose (Link Only) |
| Pointer Gestures | Constistent Navigation | Link Purpose (Link Only) |
| Pointer Cancellation | Consistent Identification | Focus Not Obscured (Enhanced) |
| Label in Name | Error Suggestion | Focus Appearance |
| Language of Page | Error Prevention (Legal, Financial, Data) | Target Size (Enhanced) |
| On Input | Accessible Authentication (Minimum) | Concurrent Input |
| Consistent Help | Status Messages | Mechanisms |
| Error Identification | Unusual Words | |
| Labels or Instructions | Abbreviations | |
| Name, Role, Value | Reading Level | |
| Redundant Entry | Pronunciation | |
| Motion Actuation | Change on Request | |
| On Focus | Accessible Authentication (Enhanced) | |
| Error Prevention (All) | ||
| Help |
Wer ist nach aktuellem Stand von dem Gesetz betroffen?
Derzeit fallen in erster Linie der B2C-Sektor sowie öffentliche und institutionelle Einrichtungen unter die gesetzlichen Vorgaben zur Barrierefreiheit. Diese Regelung betrifft also hauptsächlich Unternehmen, die Dienstleistungen und Produkte direkt an Endverbraucher verkaufen, sowie alle Einrichtungen, die öffentliche Dienste anbieten. Ziel ist es, Informationen und Dienstleistungen zugänglich für alle Bürger zu gestalten, insbesondere für Menschen mit Behinderungen.
| Öffentlicher Nahverkehr | Sozialversicherungen | Industrie- und Handelskammern | Hochschulen & Bildungseinrichtungen |
|---|---|---|---|
| Gesetzliche Krankenkassen | Industrie- und Handelskammern | Kassenärztliche Vereinigungen | Ärztekammern |
| Gerichte und Justizbehörden | Sparkassen | Zweckverbände | Stiftungen |
Praxistipp
Derzeit ist der B2B-Bereich von der Barrierefreiheitspflicht weitgehend ausgeschlossen. Doch angesichts der zunehmenden Bedeutung digitaler Barrierefreiheit und den steigenden Anforderungen an eine inklusive Gesellschaft ist zu erwarten, dass in Zukunft auch der B2B-Sektor stärker in die Gesetzgebung einbezogen wird. Dies könnte für viele Unternehmen bedeuten, dass sie proaktiv Maßnahmen zur Umsetzung von barrierefreien Websites in ihren digitalen Angeboten integrieren sollten, um langfristig wettbewerbsfähig und gesetzeskonform zu bleiben.
Barrierefreie Website – der Selbsttest
Die Barrierefreiheit Ihrer Website sicherzustellen ist eine umfassende Aufgabe, die sich auf viele Aspekte der Benutzererfahrung und technischen Umsetzung bezieht. Auch wenn ein vollständiger, zertifizierter Test oft professionelle Unterstützung benötigt, können Sie mit den folgenden Methoden viele Grundanforderungen überprüfen und potenzielle Barrieren identifizieren. Diese Tests helfen Ihnen, die Zugänglichkeit Ihrer Website zu bewerten und gezielt zu verbessern.
Google Lighthouse und Pagespeed Insights:
Google bietet mehrere Tools, um die Barrierefreiheit Ihrer Website zu testen und zu verbessern. Neben dem Lighthouse-Test, der detaillierte Informationen zur Zugänglichkeit und Bedienbarkeit liefert, bietet auch PageSpeed Insights eine Übersicht zur Barrierefreiheit unter dem Punkt „Barrierefreiheit“.
Mit einem Score von 0 bis 100 zeigt PageSpeed Insights auf, wie zugänglich Ihre Website für verschiedene Nutzergruppen ist und gibt Hinweise auf konkrete Verbesserungen. Diese Empfehlungen helfen Ihnen, grundlegende Barrierefreiheitsstandards auf Ihrer Seite umzusetzen und zu überwachen.
Selbsttest-Anleitung: Geben Sie Ihre URL auf der PageSpeed Insights Website ein und führen Sie die Analyse durch. Scrollen Sie im Ergebnisbereich zum Punkt „Barrierefreiheit“, um detaillierte Anweisungen zur Verbesserung der Zugänglichkeit zu erhalten. Kombinieren Sie diesen Test mit den Ergebnissen aus Google Lighthouse, um eine umfassende Einschätzung der Barrierefreiheit zu gewinnen und gezielt Verbesserungen vorzunehmen.
Farbkontrast
Ein ausreichender Farbkontrast ist entscheidend, damit Text und grafische Elemente von allen Nutzern klar erkannt werden können, besonders von Menschen mit Sehbehinderungen. Die Web Content Accessibility Guidelines (WCAG) empfehlen für Text und Bildtexte ein Mindestkontrastverhältnis von 4,5:1, um eine gute Lesbarkeit zu gewährleisten. Insbesondere Hintergrundfarben und Textfarben sollten so gewählt sein, dass sie sich deutlich voneinander abheben.
Selbsttest-Anleitung: Verwenden Sie ein Tool wie den Contrast Checker, um die Kontrastverhältnisse zwischen Text und Hintergrundfarben Ihrer Website zu überprüfen. Geben Sie einfach die Hex-Codes der Farben in das Tool ein und erhalten Sie eine Bewertung der Kontraststärke gemäß den WCAG-Richtlinien.
Tastaturbedienbarkeit
Für Menschen, die keine Maus verwenden können, ist die Tastaturbedienung essenziell. Die Möglichkeit, Links, Schaltflächen und Formularelemente vollständig per Tab-Taste und Enter zu steuern, ist ein zentraler Aspekt der Barrierefreiheit. Jedes interaktive Element sollte in einer logischen Reihenfolge über die Tab-Taste erreicht werden können, ohne dass der Nutzer „stecken bleibt“.
Selbsttest-Anleitung: Navigieren Sie Ihre Website nur mit der Tastatur, ohne Maus. Drücken Sie die Tab-Taste, um von einem Element zum nächsten zu springen, und achten Sie darauf, ob alle interaktiven Elemente wie Links und Schaltflächen erreicht und hervorgehoben werden. Verwenden Sie Enter, um Schaltflächen und Links zu aktivieren. Sollten Sie Bereiche finden, die nicht mit der Tastatur zugänglich sind, liegt hier Optimierungspotenzial vor.
Screenreader-Kompatibilität
Screenreader sind entscheidend für blinde oder sehbehinderte Nutzer, um eine Website zu bedienen. Eine barrierefreie Website sollte so strukturiert sein, dass Screenreader die Inhalte verständlich und in logischer Reihenfolge vorlesen können. Wichtige Bereiche sollten korrekte HTML-Überschriftenstrukturen und beschreibende Alternativtexte für Bilder aufweisen.
Selbsttest-Anleitung: Verwenden Sie ein Tool wie WAVE oder den Screenreader NVDA, um die Screenreader-Kompatibilität Ihrer Website zu testen. Mit WAVE können Sie Ihre Seite auf strukturelle Probleme und fehlende Alternativtexte überprüfen. Mit NVDA können Sie die Website selbst durchlaufen, um die Reihenfolge und Verständlichkeit der Inhalte zu testen und zu erfahren, wie Ihre Website von einem Screenreader wahrgenommen wird.
Verständliche Sprache
Die Nutzung einfacher und verständlicher Sprache erleichtert es allen Nutzern, die Inhalte zu erfassen, besonders Menschen mit Lernschwierigkeiten oder kognitiven Einschränkungen. Klar formulierte Sätze, eine einfache Wortwahl und kurze Absätze sorgen dafür, dass die Inhalte zugänglich sind und leicht verarbeitet werden können.
Selbsttest-Anleitung: Nutzen Sie ein Tool wie LanguageTool, um Ihre Texte auf Lesbarkeit und sprachliche Komplexität zu überprüfen. LanguageTool erkennt komplexe Satzstrukturen, zu lange Sätze und übermäßigen Fachjargon und bietet Vorschläge zur Verbesserung an. Ergänzend können Sie manuell prüfen, ob alle verwendeten Begriffe leicht verständlich sind und gegebenenfalls Synonyme für Fachausdrücke anbieten.
Formulare barrierefrei gestalten
Formulare sind oft der Hauptkontaktpunkt zwischen Nutzern und Unternehmen. Ein barrierefreies Formular enthält klare Anweisungen, deutliche Beschriftungen für jedes Feld und bietet hilfreiche Hinweise bei Fehlern. Menschen mit motorischen und visuellen Einschränkungen sollten die Formularelemente problemlos identifizieren und bedienen können.
Selbsttest-Anleitung: Prüfen Sie, ob jedes Formularfeld korrekt beschriftet ist und sich durch Klick auf die Beschriftung (Label) aktivieren lässt. Testen Sie die Navigation durch das Formular per Tab-Taste, und achten Sie darauf, ob alle Felder logisch erreichbar sind. Ein barrierefreies Formular zeigt zudem hilfreiche Fehlermeldungen an, wenn Informationen fehlen oder falsch eingegeben wurden. Testen Sie das Formular aus Nutzersicht und versuchen Sie, fehlerhafte Eingaben zu erzeugen, um die Fehleranzeige zu überprüfen.
BITV-Test
Der BITV-Test prüft, ob die Website den Vorgaben der Barrierefreie-Informationstechnik-Verordnung (BITV) entspricht, die sich an den WCAG orientiert. Er ist speziell für Deutschland entwickelt und beinhaltet eine umfassende Analyse von 60 Prüfpunkten, die von der Struktur und Bedienbarkeit bis zur Verständlichkeit und visuellen Gestaltung reichen. Der BITV-Test bietet eine gründliche, standardisierte Bewertung der Barrierefreiheit.
Überprüfung: Eine BITV-Prüfung durch den BITV-Test von BIK, bietet die Möglichkeit, eine detaillierte Analyse durch Experten durchführen zu lassen. Wenn Sie die Website selbst testen, können Sie sich an den Prüfkriterien orientieren, die auf der Website des BITV-Tests zur Verfügung stehen, und damit eine umfassende Einschätzung der Barrierefreiheit erhalten.
Warum ist eine barrierefreie Website wichtig?
Der barrierefreie Zugang zu Informationen und Dienstleistungen ist ein Grundrecht und stärkt die Unabhängigkeit von Menschen mit Einschränkungen. Eine Barrierefreie Website fördert Inklusion und sorgt dafür, dass alle Nutzer – unabhängig von physischen oder kognitiven Fähigkeiten – Zugang zu digitalen Inhalten haben. Für den Endverbraucher bedeutet dies eine höhere Lebensqualität und uneingeschränkten Zugang zu Informationen, die für den Alltag wichtig sind.
Tipps zur Umsetzung Barrierefreier Webseiten
Semantische HTML-Struktur
Eine saubere, semantische HTML-Struktur ist der Grundstein für eine barrierefreie Website. Sie hilft nicht nur Screenreadern, den Inhalt verständlich zu präsentieren, sondern verbessert auch die Orientierung für Nutzer und stärkt Ihr SEO. Durch den Einsatz von Headern (H1-H6), Listen, Tabellen und klar strukturierten Elementen kann die Zugänglichkeit erheblich gesteigert werden.
- Verwenden Sie Header-Tags (H1 bis H6) in logischer Reihenfolge.
- Nutzen Sie <main>, <nav>, <article>, und <footer> zur Strukturierung der Inhalte.
- Erstellen Sie sinnvolle Tabellenstrukturen für tabellarische Daten (keine CSS-Formatierungen für Tabellen).
- Beschriften Sie alle interaktiven Elemente eindeutig (z.B. Buttons, Links).
Bilder
Bilder sollten immer einen beschreibenden Alt-Tag enthalten, der den Inhalt und Zweck des Bildes für sehbehinderte Nutzer verständlich macht.
- Fügen Sie allen inhaltstragenden Bildern Alt-Tags hinzu
- Verwenden Sie kurze, prägnante Beschreibungen, die den Bildinhalt und -kontext wiedergeben.
- Für rein dekorative Bilder lassen Sie das Alt-Tag leer (alt=““), um Screenreader-Nutzer nicht abzulenken.
Audio & Videos
Multimediale Inhalte wie Audio und Video sollten mit Alternativen versehen sein, um für Nutzer zugänglich zu sein, die visuelle oder auditive Einschränkungen haben. Transkripte und Untertitel bieten Alternativen und verbessern die Zugänglichkeit.
- Bieten Sie Transkripte für alle Audioinhalte an.
- Fügen Sie Untertitel für Videos hinzu, die wichtige Informationen enthalten.
- Für visuelle Beschreibungen verwenden Sie eine Audiodeskription, falls im Video keine Sprache den Kontext erklärt.
CMS-Systeme
Ein Content-Management-System (CMS) wie WordPress sollte barrierefreie Optionen unterstützen und benutzerfreundliche Designs ermöglichen. Es gibt speziell entwickelte barrierefreie Themes und Plugins, die den Zugang erleichtern und auch die Pflege der Inhalte für alle zugänglich machen.
- Verwenden Sie barrierefreie Themes und Plugins, die die WCAG-Richtlinien einhalten.
- Achten Sie darauf, dass CMS-Editoren Alt-Text-Felder und semantische HTML-Auszeichnungen unterstützen.
- Testen Sie die Barrierefreiheit nach jedem Plugin-Update, da Inkompatibilitäten auftreten können.
Einfache & verständliche Sprache verwenden
Klare, einfache Sprache hilft Nutzern mit kognitiven Einschränkungen oder geringen Sprachkenntnissen, Inhalte leichter zu verstehen. Verwenden Sie kurze Sätze und vermeiden Sie komplizierte Begriffe.
- Schreiben Sie kurze, klare und prägnante Sätze.
- Erklären Sie Fachbegriffe oder vermeiden Sie sie ganz.
- Verwenden Sie Aufzählungen und Absätze, um Text zu strukturieren.
Barrierefreie Websites erstellen
Die Richtlinien zur Umsetzung barrierefreier Websites nehmen stetig zu und werden auch langfristig im B2B-Bereich unumgänglich sein. Reagieren Sie schon heute proaktiv bei der Optimierung oder dem Relaunch Ihrer Website auf diese Veränderungen. Gerne unterstützen wir Sie in Ihrem vorhaben!
Checkliste Barrierefreie Websites
- Website auf allen Endgeräten (Desktop, Tablet, Smartphone) responsiv gestalten
- Vollständige Navigation über die Tastatur ermöglichen
- interaktive Elemente über Tastatur erreichbar machen
- Alternativtexte für Bilder und Multimedia-Elemente hinzufügen
- Alt-Tags für Bilder hinzufügen
- Cookies-Bestätigung barrierefrei gestalten
- Transkriptionen & Untertitel für Videos und Audioinhalte
- Farbschema, Kontrast und Schriftgröße optimieren
- Einfache Bedienung bei Eingabefeldern z.B. Formularen
- Einfache und verständliche Sprache mit kurzen Sätzen
- Wahl bzw. Konfiguration Barrierefreier Themes und Plugins für Ihr CMS
- Overlays und Pop-ups vermeiden, die die Funktion von Screenreadern beeinträchtigen können
- Klare Überschriftenstruktur und semantisches HTML
- Aussagekräftige Link-Texte statt vager Hinweise wie „Klicken Sie hier“ verwenden
Vorteile barrierefreier Websites für Unternehmen
Eine Barrierefreie Website bietet nicht nur Verbrauchern, sondern auch Unternehmen zahlreiche Vorteile:
- Erweiterte Reichweite: Zugang für zusätzliche Zielgruppen, wie ältere Menschen oder Menschen mit Behinderungen.
- SEO: Barrierefreiheitsmaßnahmen wie strukturierte HTML-Tags, Alt-Texte und eine klare Seitenhierarchie verbessern die Sichtbarkeit in Suchmaschinen. Suchmaschinen „verstehen“ barrierefreie Websites besser, was das Ranking positiv beeinflusst.
- Rechtliche Sicherheit: Die Einhaltung von Standards wie dem Barrierefreiheitsstärkungsgesetz hilft dabei, rechtliche Konsequenzen zu vermeiden.
- Image und Markenbindung: Unternehmen, die auf barrierefreie Websites setzen, stärken ihr Image als sozial verantwortliche Marke.
- Verbesserung der Nutzerfreundlichkeit: Eine barrierefreie Gestaltung sorgt für eine intuitivere Benutzeroberfläche. Klare Strukturen und einfache Bedienbarkeit verbessern die Nutzungserfahrung und erhöhen die Verweildauer auf der Website.