🌐 Barrierefreie Gestaltung Ihres WEBKiosks oder Ihrer App mit individuellem CSS
✅ Als Premiumkunde von YUMPU haben Sie die Möglichkeit, Ihren WEBKiosk oder Ihre App vollständig an Ihre Corporate Design (CI) anzupassen.
Dies schliesst auch die Verwendung von eigenem CSS zur Gestaltung von Farben, Schriftarten, Abständen, Buttons, Navigationselementen und mehr ein.
Damit Ihre digitale Präsenz nicht nur markenkonform, sondern auch barrierefrei ist, möchten wir Ihnen im Folgenden Hinweise, Empfehlungen und Prüfmöglichkeiten zur Verfügung stellen.
❗ Warum Barrierefreiheit auch bei individuellem CSS wichtig ist
Wenn Sie individuelles CSS einsetzen oder selbst wählen, können visuelle und funktionale Anpassungen unbeabsichtigt zu Barrieren für Nutzer und Nutzerinnen mit Behinderungen führen – zum Beispiel durch:
Zu geringe Farbkontraste
Schwer lesbare Schriftgrössen oder -arten
Versteckte Elemente, die nicht per Tastatur erreichbar sind
Unlogische Fokusreihenfolge oder Hover-only-Interaktionen
⚖️ Um dies zu vermeiden, empfehlen wir dringend, Ihre Anpassungen auf Zugänglichkeit gemäss den internationalen WCAG-Richtlinien (Level AA) zu überprüfen.
📄 Was Sie beachten sollten
Achten Sie bei der Gestaltung Ihres WEBKiosks oder Ihrer App insbesondere auf folgende Punkte:
Gestaltungselement | Empfehlung |
Farben | Stellen Sie sicher, dass Textfarbe und Hintergrund einen Mindestkontrast von 4,5:1 aufweisen. |
Schriften | Verwenden Sie gut lesbare Schriftarten und vermeiden Sie zu kleine Schriftgrössen (< 14px). |
Fokus | Alle interaktiven Elemente sollten per Tastatur erreichbar und klar sichtbar fokussierbar sein. |
Hover-/Mouseover-Effekte | Stellen Sie sicher, dass wichtige Funktionen auch ohne Maus erreichbar sind. |
🧪 Tools zur Barrierefreiheitsprüfung
Folgende Tools können Sie nutzen, um Ihre CI-Anpassungen und Ihr CSS auf Barrierefreiheit zu überprüfen:
✅ WAVE Web Accessibility Evaluation Tool → https://wave.webaim.org/
Prüft Kontraste, Strukturelemente, Alternativtexte u. v. m.✅ Accessible Colors Checker → https://accessible-colors.com/
Ideal zur Kontrolle von Farbkombinationen (Text auf Hintergrund)✅ WebAIM Contrast Checker → https://webaim.org/resources/contrastchecker/
Schnelle Kontrastanalyse mit Schwellenwertanzeige✅ Lighthouse (Chrome DevTools) → In Chrome: Rechtsklick → „Untersuchen“ → Reiter „Lighthouse“
Führt eine automatisierte Prüfung der Barrierefreiheit durch✅ axe DevTools (by Deque Systems) → https://www.deque.com/axe/devtools/
Browser-Plugin für detaillierte Analyse und Empfehlungen
🧰 Unterstützung durch YUMPU
Unser Team sorgt dafür, dass die Grundstruktur des WEBkiosks und der App barrierefrei gestaltet ist.
Mit individuellem CSS übernehmen Sie jedoch die Verantwortung für zusätzliche Layoutänderungen.
📌 Hinweis: Bitte testen Sie Ihre Anpassungen regelmäßig – insbesondere bei Launch, Redesigns oder Farbänderungen.