En tant que client Premium de YUMPU, vous avez la possibilité d'adapter entièrement votre WebKiosk ou votre App à votre identité visuelle (CI). Cela inclut la possibilité d'importer un CSS personnalisé pour styliser les polices, les couleurs, les espacements, les boutons, la navigation et bien plus encore.
Pour garantir que vos personnalisations reflètent non seulement votre marque mais restent également accessibles à tous les utilisateurs, nous vous encourageons vivement à suivre les bonnes pratiques en matière d'accessibilité. Vous trouverez ci-dessous des conseils utiles et des outils de test pour vous aider à vérifier que vos choix de design respectent les normes d'accessibilité actuelles.
Pourquoi l'accessibilité est importante lors de l'utilisation d'un CSS personnalisé
Bien que le style personnalisé permette d'exprimer votre marque, certaines modifications CSS peuvent involontairement créer des obstacles pour les utilisateurs en situation de handicap, tels que :
Un contraste de couleurs insuffisant
Des polices difficiles à lire ou des tailles de texte très petites
Des éléments cachés ou inaccessibles lors de la navigation au clavier
Des fonctions accessibles uniquement au survol
Des problèmes de mise en page lors du zoom ou sur les appareils mobiles
Nous recommandons que toutes les personnalisations soient évaluées au regard de l'accessibilité selon les normes WCAG 2.1 Niveau AA.
Recommandations clés pour un style accessible
Voici les éléments importants à prendre en compte lors de la création de votre design personnalisé :
Élément | Bonne pratique |
Couleurs | Assurez un contraste suffisant entre le texte et l'arrière-plan (au moins 4.5:1). |
Polices | Utilisez des polices lisibles et évitez les tailles de police inférieures à 14px. |
États de focus | Tous les éléments interactifs doivent être accessibles au clavier et clairement focalisables. |
Effets de survol | Assurez-vous que les fonctions essentielles sont accessibles sans souris. |
Outils recommandés pour les tests d'accessibilité
Vous pouvez utiliser les outils gratuits suivants pour vérifier si votre CSS personnalisé respecte les normes d'accessibilité :
Outil d'évaluation de l'accessibilité Web WAVE → https://wave.webaim.org/
Teste les contrastes, la structure, les textes alternatifs et plus encore.Accessible Colors Checker → https://accessible-colors.com/
Évaluez facilement les combinaisons de couleurs texte/arrière-plan.WebAIM Contrast Checker → https://webaim.org/resources/contrastchecker/
Simple et efficace pour vérifier les rapports de contraste.Lighthouse (Chrome DevTools) → Clic droit > « Inspecter » > onglet « Lighthouse »
Génère des rapports d'accessibilité automatisés.axe DevTools (by Deque Systems) → https://www.deque.com/axe/devtools/
Extension de navigateur pour des tests d'accessibilité complets.
Ce que YUMPU fournit par défaut
YUMPU veille à ce que la structure par défaut de votre WebKiosk et de votre App soit développée en tenant compte de l'accessibilité. Cela inclut la navigation au clavier, le balisage sémantique et les mises en page évolutives.
Cependant, lors de l'importation d'un CSS personnalisé, vous assumez la responsabilité de tout aspect lié au style et à l'accessibilité supplémentaire.
Remarque : Nous vous recommandons vivement de tester régulièrement votre design, en particulier après le lancement de nouveaux contenus, l'ajustement des couleurs ou l'application de modifications majeures de la mise en page.
Ressources supplémentaires