Barrierefreie Websites – Pflicht, Chance und echter Gewinn

1. Herausforderungen einer nicht barrierefreien Website
2. 5 Vorteile einer barrierefreien Website
3. Wer ist gesetzlich verpflichtet, seine Website barrierefrei zu machen?
4. Beispiel aus der Praxis
5. So machst auch Du deine Website barrierefrei
6. Wie überprüfst Du, ob deine Website barrierefrei ist?
7. Wie wichtig sind manuelle Tests von Menschen mit Einschränkung?
8. 5 Vorteile manueller Tests durch Menschen mit Einschränkung:
9. Fazit: Barrierefreiheit ist Pflicht und Chance zugleich

Herausforderungen einer nicht barrierefreien Website

5 Vorteile einer barrierefreien Website

1. Reichweite und Zielgruppenerweiterung

• Sie nutzen die digitale Informations- und Kommunikationstechnologie überdurchschnittlich intensiv und sind eine besonders relevante Gruppe von Nutzern.
• Für den Zugang nutzen Betroffene oft Tastatursteuerung, spezielle Eingabegeräte wie Joysticks sowie Ausgabetechniken wie Braillezeilen oder Sprachausgabe.

• Durch leichte Bedienbarkeit können Menschen mit motorischen Einschränkungen die Anwendungen (leichter) nutzen.
• Einfache Texte sind für Nicht-Muttersprachler und Menschen mit geringer Lesekompetenz (leichter) verständlich.

• leichte und intuitive Bedienbarkeit
• Mit bspw. hohen Kontrasten und Untertiteln ermöglicht die Barrierefreiheit die Interkation mit Ihrer Seite auch in Augenblicken mit situativen Einschränkungen. (Bsp. Lärmbelästigung oder starker Sonneneinstrahlung auf dem Display)
• Einfache Texte sind leicht verständlich und Botschaften können schneller erfasst werden

2. Verbesserte Nutzerfreundlichkeit für alle

• Nutzer*innen mit mobiler Internetverbindung
• Personen in lauten oder sehr hellen Umgebungen
• Menschen mit geringerer technischer Erfahrung
• internationale User, für die Deutsch nicht Muttersprache ist

3. Rechtssicherheit und gesetzliche Erfüllung

4. Besseres SEO und Auffindbarkeit

5. Imagegewinn und gesellschaftliche Verantwortung

• Behindertengleichstellungsgesetz (BGG): Seit 2002 verpflichtet es öffentliche Stellen des Bundes zur digitalen Barrierefreiheit. In den Bundesländern gelten eigene Gleichstellungsgesetze.
• Barrierefreie-Informationstechnik-Verordnung (BITV 2.0): Regelt die konkreten Anforderungen an Websites und Apps öffentlicher Stellen des Bundes. Die Bundesländer haben dazu jeweils eigene landesrechtliche Verordnungen mit ähnlicher Ausrichtung.
• EU-Richtlinie (EU) 2016/2102: Für öffentliche Einrichtungen in der EU.
• EN 301 549: Europäische Norm, definiert technische Standards für Barrierefreiheit.
• Web Content Accessibility Guidelines (WCAG 2.1): International anerkannter Standard mit vier Prinzipien: wahrnehmbar, bedienbar, verständlich und robust.
• Barrierefreiheitsstärkungsgesetz (BFSG): Setzt seit Juni 2025 die EU-Richtlinie 2019/882 (European Accessibility Act) in Deutschland um und verpflichtet viele privatwirtschaftliche Online-Angebote wie Shops, Banking und digitale Dienste zur Barrierefreiheit

Wer ist gesetzlich verpflichtet, seine Website barrierefrei zu machen?

• Öffentliche Stellen (Behörden, Hochschulen, Sozialversicherungen, Kammern, Sparkassen, öffentlicher Nahverkehr, Schulen mit Online-Verwaltung) 
• Unternehmen, die Dienstleistungen im elektronischen Geschäftsverkehr anbieten (z.B. Online-Shops, Banken, Verkehrs- und Transportdienste, Telekommunikation).
• Private Unternehmen mit mehr als 10 Mitarbeitenden oder über 2 Millionen Euro Jahresumsatz
• Unternehmen, die bestimmte Produkte nach BFSG (z.B. Zahlungsterminals, E-Book-Reader, Telekommunikationsgeräte) in Verkehr bringen – unabhängig von Größe oder Umsatz

• Kleinstunternehmen (weniger als 10 Mitarbeitende und unter 2 Mio. Euro Jahresumsatz) ohne relevante Produkte oder Dienstleistungen
• Reine Archiv-/ Blogseiten  

Beispiel aus der Praxis

• Vorher:
  Alt-Text: Übersicht über die Kosten pro 100 km
  • Unklare Aussagekraft
    Der Alt-Text beschrieb nur, dass eine Übersicht existiert, ohne Inhalte zu vermitteln.
  • Fehlender Mehrwert für Screenreader-Nutzende
    Die eigentliche Kostenverteilung blieb unklar.

• Nachher:
  • Alt-Text: Energiekostenvergleich für Pkw in Euro pro 100 Kilometer. Super und Diesel sind deutlich teurer als Antrieb als Strom zum Laden für Elektroautos
  • Klare und inhaltliche Beschreibung
    Der optimierte Alt-Text fasst die Grafik präzise zusammen und vermittelt die Kernaussage.
  • Barrierefreie Kommunikation
    Auch Menschen mit einer Sehbeeinträchtigung erhalten die zentrale Botschaft und können diese eigenständig erfassen.

• Maßnahmen zur Umsetzung:
  • Schulung der Content-Redakteure*innen zu Alternativtexte
  • Anpassung bestehender Alternativtexte
  • Anpassung statischer Elemente (die nicht durchs Redaktions-Team gepflegt werden)
  • Alternativtexte werden in der Webseite durch unsichtbare Attribute angegeben (`alt="Dies ist ein Alternativtext"`)

• Vorher:
  • Ungenügender Farbkontrast 
    Gelber Bewertungstext hob sich kaum vom Hintergrund ab, was die Lesbarkeit einschränkte.
  • Barrierefreiheit nach WCAG nicht erfüllt
    Das erforderliche Kontrastverhältnis nach WCAG 2.1 Richtlinien von 4,5:1 wurde nicht erreicht.

• Nachher:
  • Deutlich höherer Kontrast
    Der Bewertungstext hebt sich jetzt klar vom Hintergrund ab und ist sofort erkennbar.
  • Verbesserte Lesbarkeit 
    Auch bei schwachem Licht, auf mobilen Endgeräten mit Sonneneinstrahlung oder für Menschen mit Sehschwäche ist der Text nun problemlos erfassbar. → Schafft bessere Lesbarkeit für alle Menschen!

• Maßnahmen:
  • Erhöhung des Kontrasts durch Verdunkelung der Bilder
  • Vermeidung von Text-auf-Bild
  • Anpassung aller Farben, die nicht ideal barrierefrei sind (Schaltflächen, Textfarben, Icons)

• Maßnahmen:
  • Schulung des Redaktions-Teams zu Überschriftenstrukturen
  • Behebung von falschen/ unlogischen Überschriftenstrukturen in festkodierten Elementen
  • Behebung von falschen oder unlogisch gesetzten Überschriftenstrukturen im CMS (Inhaltsmanagementsystem)

• Vorher:
  • Barriere durch späte Information: Der Hinweis zu Pflichtfeldern erschien erst am Ende des Formulars, Nutzende erfuhren zu spät, welche Eingaben zwingend erforderlich sind.
  • Screenreader-Nachteile: Assistive Technologien gaben die Information erst nach vollständigem Durchlaufen aller Felder aus. Das führte zu unnötigem Zeitaufwand und Orientierungslosigkeit.

• Nachher:
  • Barrierefreie Platzierung: Die Pflichtfeld-Information wurde an den Anfang des Formulars gesetzt, sichtbar und zugänglich, bevor die Eingaben erfolgen.
  • Verbesserte Screenreader-Ausgabe: Nutzende erhalten die Information nun im logischen Lesefluss, direkt mit den Eingabefeldern.

• Maßnahmen:
  • Explizitere Auszeichnung aller Pflichtfelder
  • Erklärung des Pflichtfeld-Asterisk vor dem Formular, statt danach

• Maßnahmen:
  • Erreichbar machen aller Elemente auf der Webseite durch Tastatur
  • Verschachtelte Navigationen oder "temporär" angezeigte Elemente (Dialoge, Dropdowns, Banner etc.) benötigen hier besondere Aufmerksamkeit
  • Wichtig ist auch die Verwendung von semantisch korrektem HTML 

So machst auch Du deine Website barrierefrei

1. Semantisch korrektes HTML verwenden: Überschriftenstruktur mit H1-H6 einhalten, Listen und Tabellen korrekt auszeichnen.
2. Alternativtexte für Bilder und Grafiken: Screenreader-Nutzer*innen erhalten so die wichtigsten Bildinformationen.
3. Ausreichender Farbkontrast und skalierbare Schriftgrößen.
4. Tastaturbedienbarkeit: Alle Funktionen müssen ohne Maus erreichbar sein.
5. Formulare klar und verständlich beschriften und Fehlerhinweise geben.
6. Videos mit Untertiteln und Audiodeskription versehen.
7. Leichte Sprache oder einfache Sprache anbieten, wo sinnvoll.
8. PDF-Dokumente barrierefrei gestalten.
9. Responsives Design für verschiedene Bildschirmgrößen und Bedienhilfen.

Wie überprüfst Du, ob deine Website barrierefrei ist?

• Axe Dev Tools (Chrome-Extension)
• WAVE
• Lighthouse

Wie wichtig sind manuelle Tests von Menschen mit Einschränkung?

5 Vorteile manueller Tests durch Menschen mit Einschränkung:

1. Authentische Nutzerperspektive: Nur Betroffene können bewerten, ob eine Website oder App wirklich barrierefrei und angenehm nutzbar ist – unabhängig davon, was eine Maschine als „regelkonform“ meldet. 
   Zb. kann ein Tool zwar bewerten, ob ein Alt-Text bei einem Bild hinterlegt ist, jedoch kann es nicht bewerten, ob dieser auch sinnvoll ist.
2. Erkennung individueller Barrieren: Menschen mit Einschränkungen verwenden oft bereits digitale Hilfsmittel, um sich auf Websites zurecht zu finden. Websites müssen dabei so programmiert sein, dass diese Tools den Inhalt korrekt auslesen und wiedergeben können. Automatische Testing-Tools übersehen oft spezifische Probleme, bei der Bedienung einer Website mit dem Screenreader, einer Braillezeile, per Sprachsteuerung oder der Steuerung nur per Tastatur. Ausschließlich manuelle Tests decken Hürden diese zuverlässig auf.
3. Praxistauglichkeit von Barrierefreiheitsfunktionen: Nur echte Nutzer*innen können einschätzen, ob angebotene Barrierefreiheitsfunktionen wie Kontrasteinstellungen, Textvergrößerung oder Navigationshilfen in der Praxis hilfreich und sinnvoll platziert sind.
4. Glaubwürdigkeit & Vertrauen: Tests durch inklusive Teams zeigen echtes Engagement für Barrierefreiheit. Das stärkt die Glaubwürdigkeit und das Vertrauen bei Kund*innen, Nutzer*innen und Partner*innen.
5. Erfüllung gesetzlicher Anforderungen auf hohem Niveau: Im Sinne des Barrierefreiheitsstärkungsgesetzes (BFSG) und des Behindertengleichstellungsgesetzes tragen manuelle Tests dazu bei, nicht nur formale Barrierefreiheitsanforderungen zu erfüllen, sondern echte digitale Teilhabe zu ermöglichen.

Fazit: Barrierefreiheit ist Pflicht und Chance zugleich