Designkonzept für den AWS Content Marketing Hub

Konformitätsstatus

Wir sind fest davon überzeugt, dass das Internet für alle Menschen verfügbar und zugänglich sein sollte, und verpflichten uns, eine Website bereitzustellen, die für ein möglichst breites Publikum zugänglich ist – unabhängig von Umständen und Fähigkeiten.

Um dies zu erreichen, orientieren wir uns so genau wie möglich an den Web Content Accessibility Guidelines 2.1 (WCAG 2.1) des World Wide Web Consortium (W3C) auf Konformitätsstufe AA. Diese Richtlinien erklären, wie Webinhalte für Menschen mit einer Vielzahl von Behinderungen zugänglich gemacht werden können. Die Einhaltung dieser Richtlinien hilft uns sicherzustellen, dass die Website für alle Menschen zugänglich ist: für blinde Menschen, Menschen mit motorischen Einschränkungen, Sehbehinderungen, kognitiven Beeinträchtigungen und viele mehr.

Diese Website nutzt verschiedene Technologien, um jederzeit so barrierefrei wie möglich zu sein. Wir setzen eine Barrierefreiheits-Schnittstelle ein, die es Personen mit spezifischen Einschränkungen ermöglicht, die Benutzeroberfläche (UI) der Website an ihre persönlichen Bedürfnisse anzupassen.

Zusätzlich verwendet die Website eine KI-basierte Anwendung, die im Hintergrund läuft und das Barrierefreiheitsniveau kontinuierlich optimiert. Diese Anwendung korrigiert den HTML-Code der Website, passt Funktionalitäten und Verhaltensweisen für Screenreader (für blinde Nutzer) sowie Tastaturfunktionen (für motorisch eingeschränkte Nutzer) an.

Wenn Sie einen Fehler gefunden haben oder Verbesserungsvorschläge haben, freuen wir uns auf Ihre Nachricht. Sie können sich an die Betreiber der Website unter folgender E-Mail-Adresse wenden: hello@450heartbeats.com

Screenreader- und Tastaturnavigation

Unsere Website implementiert ARIA-Attribute (Accessible Rich Internet Applications) und verschiedene Verhaltensanpassungen, um sicherzustellen, dass blinde Nutzer mit Screenreadern die Funktionen der Website lesen, verstehen und nutzen können. Sobald ein Nutzer mit Screenreader die Website betritt, erhält er direkt eine Aufforderung, das Screenreader-Profil zu aktivieren, um effektiv zu navigieren und zu interagieren. Hier sind einige der wichtigsten Funktionen, die wir dafür bereitstellen – inklusive Codebeispielen in der Konsole:

1. Screenreader-Optimierung: Ein Hintergrundprozess analysiert die Website vollständig, um auch bei Aktualisierungen eine kontinuierliche Einhaltung sicherzustellen. Dabei werden Screenreadern durch die ARIA-Attribute sinnvolle Informationen bereitgestellt, z. B. korrekte Formularbeschriftungen, Beschreibungen für interaktive Icons (wie Social Media, Suche, Warenkorb), Validierungshinweise, Rollenkennzeichnungen für Buttons, Menüs, Modaldialoge (Pop-ups) und mehr. Zudem werden alle Bilder der Website gescannt und mit beschreibenden ALT-Texten versehen – basierend auf einer Bilderkennungs-KI. Texte innerhalb von Bildern werden per OCR (optische Zeichenerkennung) extrahiert.

   Um Screenreader-Anpassungen zu aktivieren, genügt die Tastenkombination Alt+1. Screenreader-Nutzer erhalten zudem automatisch eine Aufforderung, den Modus zu aktivieren, sobald sie die Website betreten.

   Diese Anpassungen sind mit allen gängigen Screenreadern kompatibel, darunter JAWS und NVDA.

2. Tastaturnavigations-Optimierung: Der Hintergrundprozess passt den HTML-Code der Website an und fügt über JavaScript zusätzliche Verhaltensfunktionen hinzu, damit die Website vollständig mit der Tastatur bedienbar ist. Dazu gehören Navigation per Tab- und Shift+Tab-Taste, Dropdown-Menüs mit Pfeiltasten steuern, Schließen per Esc, Buttons und Links mit Enter aktivieren, Radiobuttons und Checkboxen mit Pfeiltasten auswählen und mit Leertaste oder Enter bestätigen. Zusätzlich stehen Schnellnavigations- und Inhaltsüberspring-Menüs zur Verfügung – entweder mit Alt+1 oder gleich zu Beginn der Tastaturnavigation.

   Auch Pop-ups werden erkannt: Der Fokus der Tastatur wird automatisch auf das Pop-up gelegt und kann sich nicht außerhalb bewegen.

   Es gibt zudem Tastenkürzel wie “M” (Menüs), “H” (Überschriften), “F” (Formulare), “B” (Buttons) und “G” (Grafiken), um direkt zu bestimmten Elementen zu springen.

Unterstützte Profile für Behinderungen auf unserer Website

• Epilepsie-Sicher-Modus: Dieser Modus ermöglicht es Menschen mit Epilepsie, die Website sicher zu nutzen, indem blinkende Animationen und riskante Farbkombinationen deaktiviert werden.
• Modus für Sehbehinderte: Dieser Modus passt die Website für Menschen mit Sehbeeinträchtigungen wie abnehmendem Sehvermögen, Tunnelblick, Katarakt, Glaukom u. a. an.
• Modus für kognitive Beeinträchtigungen: Dieser Modus bietet unterstützende Optionen für Menschen mit Dyslexie, Autismus, Schlaganfall (CVA) u. a., um sich besser auf die wichtigen Inhalte zu konzentrieren.
• ADHS-freundlicher Modus: Unterstützt Nutzer mit ADHS und neurodiversen Störungen, indem Ablenkungen reduziert und wichtige Inhalte hervorgehoben werden.
• Blindheitsmodus: Dieser Modus konfiguriert die Website für Screenreader-Kompatibilität mit JAWS, NVDA, VoiceOver und TalkBack. Ein Screenreader ist eine Software für blinde Nutzer, die auf Computern und Smartphones installiert wird – Websites müssen mit ihr kompatibel sein.
• Tastaturnavigationsprofil (motorische Einschränkungen): Dieses Profil ermöglicht die Bedienung der Website per Tastatur (Tab, Shift+Tab, Enter). Zusätzlich stehen die Tastenkürzel “M” (Menüs), “H” (Überschriften), “F” (Formulare), “B” (Buttons) und “G” (Grafiken) zur Verfügung.

Weitere UI-, Design- und Lesbarkeitsanpassungen

1. Schriftanpassungen – Nutzer können Schriftgröße, -art, -abstand, -ausrichtung, Zeilenhöhe und mehr verändern.
2. Farbkontraste – Es stehen verschiedene Kontrastprofile zur Verfügung: hell, dunkel, invertiert, monochrom. Zudem können Farben von Titeln, Texten und Hintergründen individuell angepasst werden – mit über sieben Farbschemata.
3. Animationen – Personen mit Epilepsie können alle laufenden Animationen per Klick deaktivieren (Videos, GIFs, CSS-Effekte).
4. Hervorhebungen – Wichtige Elemente wie Links und Überschriften können hervorgehoben werden. Auch fokussierte oder hovernde Elemente lassen sich betonen.
5. Audio-Stummschaltung – Für Menschen mit Hörhilfen kann automatisches Audio störend sein. Diese Funktion erlaubt das sofortige Stummschalten der gesamten Website.
6. Kognitive Unterstützung – Eine integrierte Suche nutzt Wikipedia und Wiktionary, um Begriffe, Abkürzungen und Slang zu erklären.
7. Weitere Funktionen – Anpassung von Cursorfarbe und -größe, Druckmodus, virtuelle Tastatur und viele weitere Tools stehen zur Verfügung.

Kompatibilität mit Browsern und Hilfstechnologien

Wir streben größtmögliche Kompatibilität mit allen gängigen Browsern und unterstützenden Technologien an, damit unsere Nutzer frei wählen können, welche Tools sie verwenden möchten – mit möglichst wenigen Einschränkungen. Deshalb unterstützen wir alle gängigen Systeme mit über 95 % Marktanteil: Google Chrome, Mozilla Firefox, Apple Safari, Opera, Microsoft Edge sowie die Screenreader JAWS und NVDA.

Anmerkungen, Kommentare und Feedback

Trotz größter Bemühungen, allen Nutzern die Anpassung der Website zu ermöglichen, kann es sein, dass einzelne Seiten oder Inhalte noch nicht vollständig barrierefrei sind oder sich derzeit in Überarbeitung befinden. Wir verbessern die Barrierefreiheit laufend – durch neue Funktionen, technische Weiterentwicklungen und Optimierungen. Für Unterstützung oder Rückfragen schreiben Sie uns bitte an hello@450heartbeats.com