Zur Navigation Zum Inhalt Kontakt Menu Principes Bases Accessibilité Système de design Guidelines Deutsch Français Italiano English Nos principes de design Centré sur l’utilisateur Reconnaissable Inclusif Minimaliste Holistique Auto-explicatif Axé sur les tâches Approprié Portail de la marque CFF Logo Horloge numérique Droits d’utilisation Couleurs de base Couleurs fonctionnelles Couleurs off-brand Icônes Icônes de l’horaire Pictogrammes À propos de l’accessibilité À propos de ce guide Contact Informations complémentaires Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Conception Développer FAQ Aide Procès Contribution Contact Aperçu Base Composants Aperçu Base Composants Aperçu Base Composants Aperçu Design Tokens Composants Releases Aperçu Base Informations Sens & objectif Community Assets Instructions Power-Apps Bandeaux publicitaires numériques SAP Icônes d’applications Visual Design

Tu conçois l’aspect visuel du produit.

Structure les contenus

Assure-toi que les informations les plus importantes sont visibles au premier coup d’œil. Utilise une structure simple, une hiérarchie claire et respecte l’ordre de lecture. Assure-toi que la page reste parfaitement compréhensible même avec un zoom de 200%.

Comment tester: utilise la fonction zoom de ton navigateur ou de ton téléphone mobile.

Référence: https://www.w3.org/TR/WCAG21/#resize-text

Veille à ce que le contraste soit suffisant

Le contraste entre le texte et l’arrière-plan doit être d’au moins 4,5:1. Pour l’interface et les autres éléments non textuels importants pour la compréhension, respecter un contraste minimum de 3:1. Attention notamment aux images de fond, évite-les autant que possible.

Comment tester: utiliser un analyseur de contrastes de couleurs https://developer.paciellogroup.com/resources/contrastanalyser

Référence 1: https://www.w3.org/TR/WCAG21/#contrast-minimum
Référence 2: https://www.w3.org/TR/WCAG21/#non-text-contrast

Veille à ce que la taille des éléments soit suffisante

Assure-toi que toutes les cibles tactiles ont une taille minimale de 44x44 pixels. Utilise également des polices de caractères suffisamment grandes et lisibles. De manière générale, il est recommandé d’utiliser une taille minimale de 16 pixels.

Comment tester: réaliser des mesures à l’aide des outils de développeur correspondants.

Référence: https://www.w3.org/TR/WCAG21/#target-size

Veille à ce que le focus soit visible

Définis le focus clavier de manière à ce que les utilisateurs sachent où ils se trouvent en toute situation. À titre d’exemple, rends-toi sur le site cff.ch et appuie plusieurs fois sur la touche Tab.

Comment tester: débranche la souris ou connecte un clavier externe à ton téléphone mobile.

Référence: https://www.w3.org/TR/WCAG21/#focus-visible

Impressum Contact Paramètres des cookies