Eine Website für alle

1. Definition: Was ist eine barrierefreie Website?

Eine barrierefreie Website ist eine Internetseite, die so gestaltet ist, dass sie von allen Menschen, unabhängig von ihren körperlichen oder geistigen Fähigkeiten, problemlos genutzt werden kann. Ziel der Barrierefreiheit ist es, allen Nutzern einen gleichberechtigten Zugang zum Informations- und Funktionsumfang der Website zu ermöglichen.

Die Umsetzung von Barrierefreiheit im Web ist nicht nur eine gesetzliche Verpflichtung. Sie bietet auch die Chance, die Verständlichkeit der eigenen Website sowie ihr SEO-Ranking zu verbessern und auf diese Weise mehr Nutzerinnen und Nutzer zu erreichen. Zugleich kommt eine erhöhte Benutzerfreundlichkeit und Zugänglichkeit allen Usern zugute und kann auch einen Wettbewerbsvorteil bedeuten. 

2. Zielgruppen: Wer braucht eine barrierefreie Website?

Barrierefreie Websites sind essenziell für die folgenden Gruppen:

• Menschen mit Behinderungen, einschließlich Seh-, Hör- und Mobilitätseinschränkungen
• Ältere Menschen mit altersbedingten Einschränkungen
• Menschen mit technischen Einschränkungen, wie z. B. langsamen Internetverbindungen
• Menschen mit Leseschwächen oder kognitiven Einschränkungen
• temporär eingeschränkte Personen, wie etwa jemand mit einem gebrochenen Arm

Zielgruppen barrierefreier Websites

3. Gesetzliche Verpflichtungen: Welche Unternehmen und Institutionen müssen ab Juni 2025 eine barrierefreie Website anbieten?

Das Barrierefreiheitsgesetz (BFG) tritt im Juni 2025 in Kraft. Es verpflichtet die folgenden Unternehmen und Institutionen zur Bereitstellung barrierefreier Websites:

• Öffentliche Einrichtungen: Alle staatlichen und kommunalen Verwaltungen, Schulen, Universitäten und Bibliotheken.
• Unternehmen der Daseinsvorsorge: Dies umfasst Unternehmen im Bereich öffentlicher Verkehrsmittel, Energieversorgung, Telekommunikation und Gesundheitsdienstleistungen.
• Dienstleistungsanbieter: Banken, Versicherungen und andere Dienstleister, die wesentliche gesellschaftliche Funktionen erfüllen.
• E-Commerce und digitale Plattformen: Online-Händler und Betreiber digitaler Marktplätze.

Diese Unternehmen und Institutionen müssen sicherstellen, dass ihre Websites und mobilen Anwendungen den Anforderungen der Barrierefreiheit entsprechen, um allen Nutzern einen gleichberechtigten Zugang zu ihren Dienstleistungen und Informationen zu ermöglichen.

4. Die Grundprinzipien: Welche Anforderungen gelten für barrierefreie Websites?

Die technischen Anforderungen für barrierefreie Websites sind in den Web Content Accessibility Guidelines (WCAG) 2.1 definiert, die international anerkannt sind. Die Richtlinien stützen sich auf vier Säulen:

Die vier Prinzipien der Barrierefreiheit

• Visuelle Zugänglichkeit: Inhalte müssen so präsentiert werden, dass sie von Nutzern wahrgenommen werden können. Dazu gehören neben anpassbaren Schriftgrößen und einem ausreichenden Kontrast zwischen Text und Hintergrund auch alternative Texte für Bilder oder Untertitel für Multimedia-Inhalte. 
• Bedienbarkeit: Benutzer müssen die Website navigieren und bedienen können. Dies umfasst verständliche und konsistente Navigationselemente ebenso wie die Ermöglichung einer Navigierbarkeit mit der Tastatur.
• Verständlichkeit: Inhalte und Bedienung der Website müssen verständlich sein. Dazu gehören zum Beispiel ein klar strukturierter Inhalt und die Verwendung einer klaren und einfachen Sprache. 
• Robustheit: Die Inhalte der Website müssen mit verschiedenen Browsern und assistiven Technologien wie zum Beispiel Screenreadern kompatibel sein. 

5. Technische Anforderungen: Was muss bei der technischen Umsetzung beachtet werden?

Bei der Gestaltung barrierefreier Inhalte sind folgende Punkte wesentlich:

• Klare, standardkonforme HTML-Struktur und Navigation: Semantisch korrekte Auszeichnung von HTML-Überschriften (h1, h2, h3) und Listen zur Strukturierung des Inhalts
• Responsive Design für verschiedene Endgeräte: Die Gestaltung muss sich flexibel an eine Vielzahl verschiedener Gerätetypen anpassen.
• Farben und Kontraste: Sicherstellung ausreichender Farbkontraste sowie Vermeidung von ausschließlicher Informationsvermittlung durch Farben.
• Sichtbarkeit und Lesbarkeit: Ausreichender Kontrast zwischen Text und Hintergrund, anpassbare Schriftgrößen.
• Alternative Textbeschreibungen für Bilder und Grafiken: Bereitstellen von Alternativtexten (alt-Tags) für Bilder, um deren Inhalt zu beschreiben.
• Beschreibende Links: Vermeidung von vagen Linktexten wie „hier klicken“; stattdessen beschreibende Texte wie „mehr über unsere Dienstleistungen erfahren“.
• Formulare: Gestaltung von Formularen mit eindeutigen Beschriftungen und Hinweisen für die Eingabefelder und Bedienelemente. 
• Untertitel und Transkripte für audiovisuelle Inhalte: Für Audiobeiträge oder audiovisuelle Inhalte sollten Transkripte oder Untertitel angeboten werden.
• Vermeidung von Barrieren: Dazu gehören zum Beispiel blinkende Elemente oder automatische Weiterleitungen.
• Kompatibilität mit assistiven Technologien: Hierzu zählen z. B. Screenreader, für die u. a. die korrekte Verwendung von ARIA-Attributen wichtig ist.

6. Prozess: Wie läuft ein barrierefreier Website Relaunch ab?

Ein Web Relaunch zur Erstellung einer barrierefreien Website umfasst typischerweise die folgende Schritte:

Phasen eines barrierefreien Website Relaunchs

1. Analyse und Planung

• Analyse: Bewertung der bestehenden Website auf Barrieren und Identifikation von Verbesserungsbedarf.
• Planung: Festlegung von Zielen und Anforderungen an die Barrierefreiheit basierend auf WCAG-Richtlinien.

2. Design

• Konzeption: Erstellung eines barrierefreien Konzepts, Festlegung des umzusetzenden Barrierefreiheitslevels (A, AA oder AAA)
• Design und Entwicklung: Erstellung von Designs und Prototypen unter Berücksichtigung der Barrierefreiheit. Implementierung der Website mit Fokus auf barrierefreie Technologien.

3. Implementierung

• Technische Umsetzung: Berücksichtigung technischer Anforderungen, Implementierung barrierefreier Funktionen und Inhalte
• User Testing: Durchführung von Tests mit verschiedenen Nutzergruppen und assistiven Technologien, einschließlich Tests mit Personen mit Behinderungen. Verwendung von automatisierten und manuellen Testmethoden zur Sicherstellung der Barrierefreiheit.
• Launch: Veröffentlichung der neuen Website und kontinuierliche Überwachung sowie Feedback-Mechanismen zur weiteren Verbesserung.

4. Nach dem Launch

• Ständige Optimierung: Kontinuierliche Überwachung und Verbesserung der Barrierefreiheit

7. Tools zum Testen: Mit welcher Software kann ich die Barrierefreiheit meiner Seite testen?

Zur Überprüfung der Barrierefreiheit einer Website können folgende Tools eingesetzt werden:

• Figma Extension stark 
• WAVE – Web Accessibility Evaluation Tool: Gute kostenlose API, die über Browser Extensions z.B. für Chrome, Firefox oder Edge genutzt werden kann. Sie überprüft Webseiten auf Barrierefreiheit und liefert Vorschläge zur Verbesserung.
• Axe DevTools: Ein Browser-Add-on, das Entwicklern hilft, Barrierefreiheitsprobleme direkt in der Entwicklungsumgebung zu identifizieren und zu beheben.
• BITV-Test 
• Colour Contrast Analyzer
• Lighthouse: Ein automatisiertes Open-Source-Tool von Google, das Audits für Performance, Zugänglichkeit und SEO durchführt.
• Screenreader wie z.B. JAWS, NVDA: Assistive Software, mit deren Hilfe die Benutzererfahrung von sehbehinderten Nutzern getestet werden kann.

Durch die Nutzung dieser Tools und die Einhaltung der WCAG-Richtlinien können Website-Betreiber sicherstellen, dass ihre digitalen Angebote für alle Nutzer zugänglich und nutzbar sind.

Es ist wichtig zu beachten, dass automatisierte Tests allein nicht ausreichen, um eine vollständige Barrierefreiheit zu gewährleisten. Um gute Ergebnisse zu erzielen, empfehlen wir Tests mit Personen mit Behinderungen, um echte Nutzerbedürfnisse zu berücksichtigen und zu bewerten, ob das Konzept die gewünschten Ergebnisse erreicht.

Wichtig ist auch, das Thema Barrierefreiheit der eigenen Website als einen kontinuierlichen Prozess zu begreifen, nicht als einmaligen Sprint. Wer das Thema ernst nimmt, sollte regelmäßige Überprüfungen, Anpassungen und Optimierungen mit in die Planung der Digitalstrategie aufnehmen.

Visionaere Design: Wir unterstützen Euch beim barrierefreien Webdesign

Als Agentur, die sich für ein soziales Miteinander engagiert, ist uns Inklusion auch im digitalen Raum wichtig. Darum unterstützen wir Unternehmen und Institutionen bei der Umsetzung von Barrierefreiheit in ihren Digitalauftritten, damit sie den neuen gesetzlichen Vorgaben gerecht werden. 

Dabei kommen uns unsere langjährigen Erfahrungen im nutzerzentrierten UI- und UX-Design zugute. Sie helfen uns dabei, einem immer größeren Kreis von Kundinnen und Kunden einen einfachen und informativen Besuch eurer barrierefreien Website zu ermöglichen. Gern unterstützen wir auch Eure eigenen Entwickler und Designer durch Schulung und Weiterbildung, um die langfristige Umsetzung von Barrierefreiheit durch Eure eigenen Expertinnen und Experten sicherzustellen.