Design mit Fokus auf Barrierefreiheit: Wie man Websites für alle benutzerfreundlich gestaltet

Im digitalen Zeitalter, in dem Websites und Web-Apps oft der erste Kontaktpunkt zu einer Marke sind, ist Barrierefreiheit mehr als nur ein nettes Extra. Sie wird zu einem Schlüsselelement für gutes Nutzererlebnis und digitale Verantwortung. Eine barrierefreie Website ist nicht nur für Menschen mit Behinderungen relevant, sondern auch für Benutzerfreundlichkeit, Klarheit, Inklusion und geschäftliche Vorteile (weniger Barrieren bedeuten mehr Reichweite).
In diesem Artikel betrachten wir folgende Aspekte:

• Welche neuen Versionen der WCAG 2.x-Standards gibt es und welche Tools können zur Überprüfung der Barrierefreiheit verwendet werden?

• Praxisbeispiele zur Anpassung von Websites an die Barrierefreiheit – was funktioniert, wo liegen die Fallstricke?

Was ist WCAG und warum ist es wichtig?

Die Richtlinien für barrierefreie Webinhalte (Web Content Accessibility Guidelines, „WCAG“) des W3C definieren, wie Webinhalte für Menschen mit verschiedenen Behinderungen – Seh-, Hör-, motorischen und kognitiven Beeinträchtigungen – besser zugänglich gemacht werden können.

WCAG 2.1 und WCAG 2.2 sind eine logische Weiterentwicklung von WCAG 2.0 und beinhalten zusätzliche Kriterien, die moderne Technologien (Mobilgeräte, Touchscreens, Gestensteuerung usw.) berücksichtigen. 

Wichtige Ergänzungen in WCAG 2.1 / 2.2 (als „Barrierefreiheit 2.0“)

Zu den wichtigsten Neuerungen gehören:

• Kriterium 1.3.4 „Ausrichtung“ (die Fähigkeit, sowohl im Hoch- als auch im Querformat zu arbeiten) – WCAG 2.1.
• 1.4.10 „Reflow“ – Der Inhalt sollte sich beim Zoomen ohne horizontales Scrollen anpassen.
• 1.4.11 „Nicht-Text-Kontrast“ – Sicherstellung eines ausreichenden Kontrasts zwischen Nicht-Text-Elementen.
• Die Version 2.5.x bietet Vorteile bei Touch-Gesten, großen Schaltflächen und konsistenter Interaktion.
• Mit WCAG 2.2 wurden neue Erfolgskriterien hinzugefügt (z. B. 2.5.7 Drag & Drop Reordering) – dies ist nun für eine große Anzahl von Geräten relevant. 

POUR-Prinzipien

WCAG basiert auf vier Prinzipien:

• Wahrgenommen – der Inhalt muss wahrnehmbar sein (z. B. Text statt nur Bilder, Untertitel für Videos).
• Bedienbar – die Benutzeroberfläche sollte bedienbar sein (z. B. Tastaturnavigation).
• Verständlich – Inhalt und Interaktion sollten klar sein (z. B. Navigationsreihenfolge, logische Struktur).
• Robust – Inhalte sollten von verschiedenen Agenten (Browsern, Hilfstechnologien) genutzt werden können. 

Tools zur Überprüfung der Barrierefreiheit

Um den Barrierefreiheitsprozess besser handhabbar zu machen, gibt es eine ganze Reihe von Hilfsmitteln:

• WAVE ist ein visuelles Werkzeug zur Überprüfung einer Seite, das anzeigt, wo Alternativtexte fehlen, der Kontrast unzureichend ist usw.
• axe DevTools ist eine Browseranwendung, die sich in CI/CD integriert und automatisch WCAG-Berichte erstellt.
• Weitere Hilfsmittel: Wir können sie kaum alle aufzählen – manuelle Überprüfung mithilfe von Hilfstechnologien (Bildschirmleseprogramme, Vergrößerungsfunktionen), Überprüfung der Tastaturnavigation usw.

„Automatisierte Scans erfassen nur einen Teil des Problems – manuelle Überprüfungen mit Bildschirmleseprogramm und Tastaturnavigation sind weiterhin unerlässlich.“ 

Integration in den Entwicklungsprozess

• Barrierefreiheit sollte von Anfang an berücksichtigt werden – sogar schon im Prototypenstadium.
• Implementieren Sie eine Checkliste zur Barrierefreiheit und integrieren Sie Tests in CI/CD.
• Führen Sie regelmäßige Prüfungen durch – keine einmaligen.

• Beziehen Sie echte Nutzer mit Einschränkungen ein – das liefert mehr Erkenntnisse als nur automatisierte Tests.

Braille-Institut

Eine Organisation, die mit Menschen mit Sehbehinderungen arbeitet. Bei der Neugestaltung wurde die Website von Grund auf unter Berücksichtigung der Barrierefreiheit neu entwickelt:

• Typografie – Es wurde die Schriftart Atkinson Hyperlegible verwendet, die speziell für Menschen mit Sehbehinderung entwickelt wurde.
• Klare Farbpaletten, hoher Kontrast, logische Seitenstruktur.
• Um den Nutzern eine sofortige Anpassung der Benutzeroberfläche an ihre Bedürfnisse zu ermöglichen, wurde ein kurzer Fragebogen erstellt (zum Beispiel: „Welchen Teil Ihres Sehvermögens haben Sie?“, „Verwenden Sie eine Bildschirmvergrößerung?“).
• Tests mit NVDA, JAWS, Bildschirmleseprogrammen und sehenden Nutzern. Dieses Beispiel zeigt, dass Barrierefreiheit nicht nur bedeutet, eine Checkliste abzuarbeiten, sondern ein tiefes Verständnis für den Nutzer erfordert. 

TPGi (Update-Website)

Ein Unternehmen, das Dienstleistungen im Bereich Barrierefreiheit anbietet, hat seine Website selbst aktualisiert, um den Anforderungen der WCAG 2.1 AA zu entsprechen:
neue Navigation, einfacherer Zugang, aktualisierte Inhalte.

Das Unternehmen, das Dienstleistungen im Bereich Barrierefreiheit anbietet, hat seine Website selbst aktualisiert, um den Anforderungen der WCAG 2.1 AA zu entsprechen:

• Neue Navigation, einfacherer Zugriff, aktualisierte Inhalte.
• Ergebnisse: Steigerung des Traffics um 474 % und der Seitenaufrufe sowie Senkung der Absprungrate. Diese Fallstudie zeigt, dass Nutzer positiv auf qualitativ hochwertige und inklusive Interaktionen reagieren, was sich in geschäftlichen Vorteilen niederschlägt.
   

Prüfungsfall für den Arun-Rat

Die Kommunalverwaltung führte eine gründliche Prüfung der bestehenden Website durch, entdeckte zahlreiche Fehler und implementierte daraufhin ein Update. Die neue Website bestand die Prüfung ohne technische oder sonstige Mängel.
Dieser Fall verdeutlicht, dass auch Regierungswebsites hinsichtlich ihrer Barrierefreiheit verbessert werden können – und zwar mit messbaren Ergebnissen.

Praktische Tipps für IT-Unternehmen: So implementieren Sie Barrierefreiheit

Strategiedefinition

• Barrierefreiheit sollte als explizites Ziel des Projekts festgelegt werden (nicht „vielleicht können wir es schaffen“, sondern „wir werden es schaffen/erreichen …“).
• Benennen Sie eine verantwortliche Person oder ein Team (Barrierefreiheitsbeauftragter) – jemanden, der die Einhaltung der Barrierefreiheit überwacht, koordiniert und testet.
• Ermitteln Sie den Grad der Konformität (z. B. WCAG 2.1 AA) und legen Sie KPIs fest (Anzahl der erkannten Fehler, Zeit bis zu deren Behebung, UX-Indikatoren).

Integration in den Entwicklungsprozess

• In der Entwurfsphase: Verwenden Sie ein Designsystem mit Komponenten, die bereits Standards erfüllen (Kontrast, Fokus, Tastaturunterstützung).
• Während der Entwicklungsphase: Semantisches HTML anwenden, gegebenenfalls ARIA-Attribute verwenden, mit der Tastatur testen, Fokuszustände prüfen.
• In der QA-Phase: Automatisches Testen oder Filtern über Axe, WAVE und Integration in CI hinzufügen. Nach der Berichtserstellung: Manuelles Testen mit Screenreader und für Benutzer mit Einschränkungen.

Inhalts- und Gestaltungsansätze

• Stellen Sie Alternativtexte für Bilder (Alt-Texte) und Beschreibungen für Medien bereit.
• Überprüfen Sie den Kontrast von Text und Elementen (gemäß Abschnitt 1.4.11 Nicht-Text-Kontrast).
• Bieten Sie eine logische und übersichtliche Navigation: „Zum Inhalt springen“, klare Überschriften, eine Tabulatorkette.
• Tastaturunterstützung bereitstellen: Alle Aktionen sollten ohne Maus möglich sein.
• Vermeiden Sie übermäßige Animationen, die Schwindel oder Krämpfe verursachen können; beachten Sie Kriterium 2.3.3 Animationen aus Interaktionen.
• Gewährleisten Sie ein responsives Layout – der Inhalt sollte beim Zoomen ohne horizontales Scrollen korrekt fließen.

Nach dem Start – Überwachung und Unterstützung

• Führen Sie regelmäßige Prüfungen durch (z. B. vierteljährlich).
• Nutzerkennzahlen erfassen – zum Beispiel: ob die Anzahl der Sitzungen gestiegen ist, ob die Absprungrate gesunken ist, ob die Kundenzufriedenheit gestiegen ist.
• Pflegen Sie die Dokumentation – Designsystem, Richtlinien, Testberichte –, damit neue Funktionen auch den Anforderungen an die Barrierefreiheit entsprechen.
• Schulen Sie Ihr Team – sowohl Designer als auch Entwickler – in den Grundlagen der Barrierefreiheit und Inklusion.

Barrierefreiheit bedeutet mehr als nur die Einhaltung von Normen oder Checklisten. Sie ist ein Design- und Entwicklungsansatz, der alle Nutzer berücksichtigt – mit oder ohne Einschränkungen, auf Mobilgeräten oder Desktop-Computern. Sie ist auch eine strategische Investition: Eine bessere User Experience, eine größere Zielgruppe, geringere Risiken (rechtlicher und reputationsbezogener Art) und die Möglichkeit, ein Produkt „für alle“ zu entwickeln, verschaffen einen Wettbewerbsvorteil.
 Wenn Ihr IT-Unternehmen bereit ist, das Thema ernst zu nehmen, integrieren Sie Barrierefreiheit von Anfang an in den Entwicklungsprozess und machen Sie sie nicht zu einem nachträglichen Bestandteil. Setzen Sie sie mit Verständnis, den richtigen Werkzeugen und messbaren Ergebnissen um – und die Erfolge werden sich einstellen.