Web Accessibility: Umsetzung und Anwendungsbeispiele zur Erstellung einer Barrierefreien Website

Die Gewährleistung barrierefreier Websites ist entscheidend, um sicherzustellen, dass Menschen mit Behinderungen, technischen oder altersbedingten Einschränkungen gleichermaßen auf digitale Inhalte zugreifen können. Angesichts des zunehmenden Bewusstseins für Inklusion und der gleichzeitig wachsenden Bedeutung in unserer Gesellschaft wird die Zugänglichkeit kontinuierlich wichtiger. Die Web Content Accessibility Guidelines (WCAG) bieten dabei einen gesetzlichen Rahmen, wie Websites in Bezug auf die Zugänglichkeit optimiert werden können. In unserer vorherigen Blogartikelreihe zur WCAG haben wir uns bereits mit der Konformität, sowie den einzelnen Rahmenbedingungen bezüglich der Prinzipien der Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit beschäftigt.

Wir möchten zeigen, wie die vier Prinzipien der Web Accessibility anhand von Anwendungsbeispielen in der Praxis umgesetzt werden können. Denn oft sind Richtlinien und Gesetze nicht leicht verständlich, und konkrete Beispiele können dabei helfen, das Verständnis zu vertiefen und Umsetzungsmöglichkeiten zu verdeutlichen.

1. Wahrnehmbarkeit:

Dieses Prinzip besagt, dass sämtliche Informationen auf einer Website für jeden User wahrnehmbar sein sollten. Ausgeschlossen von dem Kriterium sind: Steuerelemente und Eingabe, zeitbasierte Medien, Tests, sensorische Elemente, CAPTCHA, sowie die Gestaltung, Formatierung und unsichtbare Elemente. Im folgenden sind einige Beispiele aufgeführt, wie dieses Prinzip umgesetzt werden kann:

Konkrete Beispiele:

• Klare und gut lesbare Texte verwenden, dementsprechend eine Schriftgröße von mindestens 16px verwenden, für eine gute Lesbarkeit
• Eine Schriftart und -stil auswählen, die eine eindeutige Unterscheidung zwischen den Buchstaben ermöglichen
• Den Usern ermöglichen, die Schriftgröße über Browser- oder Betriebssystemeinstellungen ändern zu können
• Auf ausreichend Kontrast (mind. 4,5:1) zwischen Text und Hintergrund achten - Text  sollte 4,5 mal heller sein als der Hintergrund
• Zu allen Bildern alternative Texte bereitstellen, um sicherzustellen, dass User mit Sehbeeinträchtigungen die Inhalte verstehen können
• Für komplexe Infografiken zusätzliche Textbeschreibungen angeben, sodass alle User den Inhalt verstehen
• Transkripte oder Textalternativen für Audio- und Videoinhalte erstellen, für User mit Hörbeeinträchtigungen
• Webpage so eingestellt sein, dass trotz vergrößerter Schriftgröße die Benutzbarkeit nicht eingeschränkt wird und Inhalte gut lesbar sind, da oftmals Struktur der Webpage verschoben wird, sobald diese vergrößert wird
• Vermeiden Informationen ausschließlich über Farben zu vermitteln und zusätzliche visuelle Hinweise integrieren und anbieten
• Eine Vorlesefunktion integrieren, um Menschen zu helfen, die Schwierigkeiten beim Lesen haben
• Bei automatisch abspielenden Audios die länger als 3 Sekunden gehen, muss entweder ein Mechanismus zum Anhalten der Audio oder zur unabhängigen Lautstärkeregelung eingefügt werden

2. Bedienbarkeit:

Die Bedienbarkeit ist entscheidend, um sicherzustellen, dass alle User unabhängig von ihren motorischen Fähigkeiten die Website problemlos navigieren können. Hier sind einige praktische Tipps zur Umsetzung:

Konkrete Beispiele:

• Gewährleistung aller Interaktionen über die Tastatur für eine mausunabhängige Navigation
• Bereitstellung ausreichender Interaktionszeit über die Tastatur und Möglichkeit zur Verlängerung von Zeitlimits, falls diese vorhanden sind. Idealerweise gar keine Zeiteinschränkungen für User einbauen
• Anpassung von automatisch startenden Bewegungs-, Blink- und Scroll-Animationen,die länger als fünf Sekunden dauern oder parallel zu anderen Inhalten angezeigt werden, um sie pausieren, stoppen oder verbergen zu können
• Wenn Informationen automatisch aktualisiert und parallel zu anderen Inhalten gezeigt werden, sollen User diese selbständig anhalten, stoppen oder ausblenden oder die Häufigkeit der Aktualisierungen steuern können
• User nach Ablauf einer authentifizierten Sitzung ermöglichen die Aktivität nach erneuter Authentifizierung ohne Datenverlust fortsetzen zu können
• Angemessene Kennzeichnung von Links, die auf andere Webseiten verweisen. Dementsprechend den Linkzweck im Linktext ersichtlich gestalten
• Navigation auf der Website selbsterklärend und übersichtlich gestalten, unter anderem durch die Verwendung einheitlicher Farben
• Pull-Down Menüs so eingestellt, dass sie nicht von alleine wieder schließen, sondern länger angezeigt werden, zur Erleichterung der Handhabung

3. Verständlichkeit:

Die Verständlichkeit der Website ist von Bedeutung, damit alle User, einschließlich solcher mit kognitiven Beeinträchtigungen, den Inhalt leicht verstehen können. Im Folgenden sind einige Empfehlungen zur Umsetzung:

Konkrete Beispiele:

• Bedeutungen von verwendeten Abkürzungen werden auf der Website erkannt und bereitgestellt
• Verwendung von einfacher Sprache und prägnante Formulierungen, um Informationen für alle User verständlich zu gestalten, einschließlich korrekter Kennzeichnung der Sprache für Assistive Technologien wie Screenreader
• Bereitstellung von Texten in Gebärdensprache
• Klar strukturierte Inhalte mit präzisen Überschriften zur Unterteilung von Texten
• Vermeidung von Fremdwörter in Texten aus Gründen der Lesbarkeit
• Erläuterung komplizierter Wörter in einfacher Sprache
• Verwendung von Bildern zur Unterstützung und Veranschaulichung von Texten  anstelle nur rein dekorativer Zwecke
• Bereitstellung von klaren Beschriftungen und Hilfetexte, um User bei der Interaktion mit Formularen zu unterstützen
• Automatische Erkennung von Eingabefehlern und Beschreibung des Fehlers
• Vermeidung unerwarteter Kontextwechsel

4. Robustheit:

Die Robustheit der Website stellt sicher, dass sie mit verschiedenen Technologien kompatibel ist. Hier sind einige Beispiele zur Umsetzung aufgeführt:

Konkrete Beispiele:

• Semantisch korrekte HTML-Tags verwenden, damit Inhalte konsistent interpretiert werden können
• Alternative Formate für multimediale Inhalte bereitstellen, für die Zugänglichkeit mit unterschiedlichen Technologien
• Entwickeln von flexiblen Layouts, die auf verschiedenen Geräten und Bildschirmgrößen robust funktionieren. Beispielsweise für Fehlermeldungen, wenn Felder von Usern nicht korrekt ausgefüllt werden

Fazit

Die Implementierung der Prinzipien der Web Accessibility geht über eine bloße ethische Verpflichtung hinaus - sie sind der Weg, die Benutzererfahrung für alle User zu verbessern. Ein barrierefreies Design ermöglicht es Menschen mit unterschiedlichen Fähigkeiten und Beeinträchtigungen, nahtlos am digitalen Leben teilzunehmen.

Es ist entscheidend, die von uns vorgestellten Accessibility-Tipps in die Entwicklung und Pflege der Website zu integrieren. Diese aufgeführten Beispiele dienen dabei lediglich als exemplarische Anregungen für die Umsetzung und umfassen nicht alle Anforderungen, die damit verbunden und gesetzlich vorgegeben sind. Durch die konsequente Anwendung dieser Prinzipien schafft man eine inklusive Online-Präsenz, welche für alle gleichermaßen zugänglich ist.