Bedienbarkeit und Komfort

Texte müssen bis zu 200% vergrößert werden können, ohne dass dabei Inhalte oder Funktionalitäten verloren gehen. Ziel ist es, Nutzern mit geringer Sehschärfe zu ermöglichen, Texte in einer für sie lesbaren Größe darzustellen, ohne dass die Nutzbarkeit der Seite eingeschränkt wird.

Weiterhin müssen Webinhalte so gestaltet sein, dass sie sich an unterschiedliche Bildschirmgrößen und eine Zoomvergrößerung bis 400% anpassen, ohne dass ein horizontales Scrollen erforderlich wird, um den gesamten Inhalt zu sehen. Dies stellt sicher, dass Nutzer, die beispielsweise ihren Bildschirm vergrößern oder mobile Geräte mit kleineren Bildschirmen verwenden, die Inhalte weiterhin problemlos konsumieren können.

Wenn Sie mit Custom-HTML arbeiten, stellen Sie sicher, dass die Skalierungsfunktion nicht im HTML-Element viewport blockiert wird.

Beispiel für eine korrekte Anwendung:

Beispiele für eine inkorrekte Anwendung:

Interaktive Elemente in HTML-Dokumenten wie Links, Eingabefelder und Buttons müssen per Tastatur und ohne Maus bedienbar sein, da dies für Nutzer mit motorischen Einschränkungen, Sehbehinderungen oder bei der Nutzung von Screenreadern unerlässlich ist. Der Design Editor in Optimizely Campaign stellt sicher, dass diese Elemente standardmäßig tastaturbedienbar sind, indem er sauberes HTML erzeugt und interaktive Elemente wie Buttons und Links mit einer klaren Tab-Reihenfolge und sichtbaren Fokus-Indikatoren versieht. Die Tastaturnavigation ist mithilfe der Tab-Taste zum Durchschalten und der Eingabetaste oder der Leertaste zur Aktivierung möglich. Wenn Sie mit Custom-HTML arbeiten, stellen Sie sicher, dass Sie keine der folgenden Elemente im HTML-Code benutzen:

Jedes interaktive Element (Link, Eingabefeld, Button usw.) muss mit der Tastatur auswählbar sein. Kann der Tastaturfokus mittels einer Tastaturschnittstelle zu einem Element bewegt werden, so muss dieser Fokus auch wieder allein über eine Tastaturschnittstelle von diesem Element wegbewegt werden können. Motorisch eingeschränkte oder blinde Menschen sind auf die Tastaturbedienbarkeit angewiesen und könnten andernfalls den Service nicht nutzen.

Für mobile Barrierefreiheit sind touch-optimierte Bedienelemente wesentlich: Sie müssen eine angemessene Größe und genügend Abstand haben, um präzise Eingaben zu ermöglichen und Fehleingaben zu reduzieren. Skalierende Bilder und ausreichend dimensionierte, gut voneinander abgegrenzte Buttons und Links tragen dazu bei, die Interaktion zu vereinfachen und eine insgesamt barrierefreiere mobile Nutzung zu gewährleisten. Eine klare und konsistente Navigation durch die Inhalte ist unerlässlich, ebenso wie deutliche visuelle Hinweise (Fokusindikatoren) für Nutzer, die alternative Eingabemethoden verwenden.

Ein responsives Design ist dabei essenziell, das sich verschiedenen Bildschirmgrößen und -ausrichtungen anpasst und horizontales Scrollen vermeidet, während Text skalierbar sein muss. Die Bildschirmausrichtung sollte zudem nicht erzwungen werden. Der Design Editor in Optimizely Campaign gewährleistet, dass alle E-Mail-Designs vollständig responsiv sind und sich automatisch an verschiedene Geräte (Desktop, Tablet, Smartphone) anpassen, um eine nahtlose und barrierefreie Nutzererfahrung zu bieten.

Beim Nachtmodus ist es wichtig, auf genügend Kontrast zwischen Text und Hintergrund zu achten, wobei reines Schwarz (#000000) und reines Weiß (#FFFFFF) vermieden werden sollten. Stattdessen wird empfohlen, mit entsättigten, abgeschwächten Farben sowie einer Kombination von dunklen und hellen Grautönen zu arbeiten. Für eine gute Lesbarkeit muss die Textgestaltung eine geeignete Schriftstärke und -größe aufweisen. Fokusindikatoren müssen wie im hellen Modus deutlich erkennbar sein. Weiterhin sollte Nutzern die Wahl zwischen Standard- und Nachtmodus ermöglicht werden.