Bedienbarkeit und Komfort

Skalierbarkeit und Vergrößerung

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:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Beispiele für eine inkorrekte Anwendung:

<meta name="viewport" content="width=device-width, user-scalable=0">
<meta name="viewport" content="width=device-width, user-scalable=no">

Tastaturbedienbarkeit

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:

• Keine onmouse-Events wie onmouseover, onmouseout, onmousedown, onmouseup, onmousemove, onmouseenter, onmouseleave
• Keine onclick-Events wie onclick, onblclick
• Kein oncontextmenu-Event

Keine Tastaturfalle

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.

Öffnen Sie Ihr HTML-Dokument im Browser und prüfen Sie mittels Tabulatortaste, ob alle Links und Formularelemente erreicht und wieder verlassen werden können.

Barrierefreie mobile Version

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.

Um eine optimale Barrierefreiheit zu gewährleisten, ist umfassendes Testen mit verschiedenen Geräten und E-Mail-Programmen nötig. Gegebenenfalls müssen Bilder, Grafiken, Buttons oder Links angepasst werden, um eine korrekte Darstellung auf allen Geräten zu erreichen.

Responsives Design: Responsives Design ist ein Ansatz im Webdesign, bei dem sich die Gestaltung und Anordnung der Website dynamisch an die Bildschirmgröße und die Fähigkeiten des verwendeten Endgeräts (Desktop, Tablet, Smartphone etc.) anpassen. Dies wird in der Regel durch flexible Layouts, proportionale Bilder und den Einsatz von Media Queries in CSS erreicht.

Barrierefreier Nachtmodus

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.

Um eine optimale Barrierefreiheit zu gewährleisten, ist umfassendes Testen mit verschiedenen Geräten und E-Mail-Programmen nötig. Gegebenenfalls müssen die Farben von Texten und Hintergründen angepasst werden, um geeignete Kontraste in Standard- und Nachtmodus zu erzielen.