Für uns im Projekt KLIMAready ist es wichtig, dass diese Website möglichst barrierearm aufgebaut ist und somit allen zur Verfügung steht. Dies haben wir insbesondere bei der technischen Entwicklung berücksichtigt und folgende Maßnahmen, mit hilfe des Tools Readabler, umgesetzt:
Bildschirmleser und Tastaturnavigation
Unsere Website setzt die ARIA-Attribute (Accessible Rich Internet Applications) sowie verschiedene Verhaltensänderungen ein, um sicherzustellen, dass beeinträchtigte Benutzer, die Website nutzen können. mit einem Bildschirmlesegerät besuchen, die Funktionen der Website lesen, verstehen und nutzen können. Sobald ein Benutzer mit einem Screenreader Ihre Website betritt, wird er aufgefordert, das Screenreader-Profil einzugeben, damit er Ihre Website effektiv durchsuchen und bedienen kann. Hier sehen Sie, wie unsere Website einige der wichtigsten Anforderungen für Screenreader abdeckt, zusammen mit Konsolen-Screenshots von Codebeispielen:
Optimierung für Bildschirmlesegeräte: Sobald ein User mit einem Screenreader diese Website betritt, wird er aufgefordert, das Screenreader-Profil einzugeben, damit er diese Website effektiv durchsuchen und bedienen kann. Unser Accessibility Tool (Readabler) führt einen Hintergrundprozess durch, bei dem die Komponenten der Website von oben nach unten „erlernt” werden. So gewährleisten es eine kontinuierliche Konformität, auch bei der Aktualisierung der Website. In diesem Prozess versorget es Screenreader unter Verwendung des ARIA-Attributsatzes mit aussagekräftigen Daten. So stelle es beispielsweise genaue Formularbeschriftungen, Beschreibungen für Icons, Validierungsanleitungen für Formulareingaben sowie Elementrollen wie Schaltflächen, Menüs, modale Dialoge (Pop-ups) und andere bereit. Darüber hinaus scannt der Hintergrundprozess alle Bilder der Website und liefert eine genaue, auf Bild-Objekt-Erkennung basierende Beschreibung als ALT-Tag (alternativer Text) für Bilder, die nicht beschrieben sind. Mithilfe einer OCR-Technologie (optische Zeichenerkennung) extrahiert es auch Texte, die in das Bild eingebettet sind. Um die Anpassungen für Bildschirmlesegeräte jederzeit zu aktivieren, müssen die Nutzer lediglich die Tastenkombination „Alt+1” drücken. Screenreader-Nutzer erhalten außerdem automatische Ansagen, um den Screenreader-Modus einzuschalten, sobald sie die Website besuchen.
Diese Anpassungen sind mit allen gängigen Bildschirmleseprogrammen, einschließlich JAWS und NVDA, kompatibel.
Zur Optimierung der Tastaturnavigation:Das Tool passt in einem Hintergrundprozess den HTML-Code der Website an und fügt mithilfe von JavaScript-Code verschiedene Verhaltensweisen hinzu, um die Website über die Tastatur bedienbar zu machen. Dazu gehört die Möglichkeit, mit den Tab- und Shift+Tab-Tasten durch die Website zu navigieren, Dropdowns mit den Pfeiltasten zu bedienen und sie mit der Esc-Taste zu schließen, Schaltflächen und Links mit der Eingabetaste auszulösen, mit den Pfeiltasten zwischen Radio- und Checkbox-Elementen zu navigieren und sie mit der Leertaste oder der Eingabetaste auszuwählen. Außerdem gibt es Schnellnavigations- und Content-Skip-Menüs, die jederzeit durch Klicken auf Alt+1 bzw. das erste Elemente der Website bei der Navigation mit der Tastatur verfügbar sind. Der Hintergrundprozess behandelt auch ausgelöste Pop-ups, indem er den Tastaturfokus zu ihnen hinbewegt, sobald sie erscheinen, und verhindert, dass der Fokus außerhalb des Pop-ups wandert.
Zusätzlich können die Benutzer Tastaturkürzel wie „M” (Menüs), „H” (Überschriften), „F” (Formulare), „B” (Schaltflächen) und „G” (Grafiken) verwenden, um zu bestimmten Elementen zu springen.
Von unserer Website unterstützte Profile:
Epilepsie Safe Mode: Dieses Profil ermöglicht es Menschen mit Epilepsie, die Website sicher zu nutzen, indem es das Risiko von Krampfanfällen durch blinkende oder blitzende Animationen und riskante Farbkombinationen mindert.
Der Modus für Sehbehinderte passt die Website an die Bedürfnisse von Nutzern mit Sehbehinderungen wie nachlassender Sehkraft, Tunnelblick, Katarakt oder Glaukom an.
Modus für kognitive Beeinträchtigungen: Er bietet verschiedene Hilfsoptionen, um Nutzern mit kognitiven Beeinträchtigungen wie Legasthenie, Autismus oder CVA zu helfen, sich leichter auf die wesentlichen Elemente der Website zu konzentrieren.
Der ADHS-freundliche Modus hilft Nutzern mit ADHS und neurologischen Entwicklungsstörungen, sich auf die wichtigsten Elemente der Website zu konzentrieren, während gleichzeitig Ablenkungen deutlich reduziert werden.
Blindenfreundlicher Modus: In diesem Modus wird die Website so konfiguriert, dass sie mit Bildschirmleseprogrammen wie JAWS, NVDA, VoiceOver und TalkBack kompatibel ist. Ein Screenreader ist eine Software für blinde Benutzer, die auf einem Computer oder Smartphone installiert ist und mit der eine Website kompatibel sein muss.
Tastaturnavigationsprofil (motorische Behinderung): Dieses Profil ermöglicht es motorisch beeinträchtigten Personen, die Website mit den Tastaturkombinationen Tab, Umschalt+Tab und Eingabetaste zu bedienen. Die Benutzer:innen können auch Tastenkombinationen wie „M” (Menüs), „H” (Überschriften), „F” (Formulare), „B” (Schaltflächen) und „G” (Grafiken) verwenden, um zu bestimmten Elementen zu springen.
Zusätzliche Anpassungen der Benutzeroberfläche, des Designs und der Lesbarkeit
Schriftanpassungen: Benutzer können die Schriftgröße vergrößern und verkleinern, die Schriftart ändern, den Zeilenabstand, die Ausrichtung und die Zeilenhöhe anpassen.
Farbanpassungen: Benutzer können verschiedene Farbkontrastprofile auswählen, beispielsweise hell, dunkel, invertiert und monochrom. Darüber hinaus können sie die Farbschemata von Titeln, Texten und Hintergründen mit über sieben verschiedenen Farboptionen austauschen.
Animationen: Personen mit Epilepsie können alle laufenden Animationen mit einem Mausklick stoppen. Zu den über die Schnittstelle gesteuerten Animationen gehören Videos, GIFs und blinkende CSS-Übergänge.
Hervorhebung von Inhalten: Benutzer können wichtige Elemente wie Links und Titel hervorheben. Sie können auch festlegen, dass nur fokussierte oder mit dem Mauszeiger gehaltene Elemente hervorgehoben werden.
Audiostummschaltung: Benutzer mit Hörgeräten können aufgrund der automatischen Audiowiedergabe Kopfschmerzen oder andere Probleme bekommen. Mit dieser Option können sie die gesamte Website sofort stummschalten.
Zusätzliche Funktionen: Readabler bieten den Benutzer:innen die Möglichkeit, die Farbe und Größe des Cursors zu ändern, einen Druckmodus zu verwenden, eine virtuelle Tastatur zu aktivieren und viele andere Funktionen.
Kompatibilität mit Browsern und unterstützenden Technologien: Readabler unterstützt Google Chrome, Mozilla Firefox, Apple Safari, Opera und Microsoft Edge sowie die Bildschirmlesegeräte JAWS und NVDA.
Anmerkungen, Kommentare und Feedback
Obwohl wir uns sehr bemühen, jedem die Möglichkeit zu geben, die Website an seine Bedürfnisse anzupassen, kann es sein, dass einige Seiten und Abschnitte nicht optimal sind. Es kann immer noch Seiten oder Abschnitte geben, die nicht vollständig zugänglich sind, gerade zugänglich gemacht werden oder für die eine angemessene technische Lösung fehlt, um sie zugänglich zu machen. Dennoch verbessern wir ständig unsere Zugänglichkeit, fügen Optionen und Funktionen hinzu, aktualisieren und verbessern sie und entwickeln und übernehmen neue Technologien. All dies dient dazu, ein optimales Niveau der Zugänglichkeit zu erreichen, das den technologischen Fortschritten entspricht.
Sollte Ihnen etwas aufgefallen sein, was Sie in der Nutzung einschränkt, dann nehmen Sie gerne Kontakt zu uns auf. Wir werden prüfen, wie wir die Website entsprechend anpassen können.