Nouveau projet

A chaque étape du processus de création, des recommandations vous sont faites. Vous pouvez les cocher pour rendre compte de vos avancées.

Si certains critères ne peuvent être appliqués sur votre produit. A la fin de votre projet vous pouvez exporter vos résultats de responsabilité numérique.

Critères : 0/0
→ Donnez un nom à votre projet
Tout décocher
Stratégie produit
UX
Contenu
UI
Interaction utilisateur

Stratégie produit

Cookies / Tracking

0 / 1
Éviter l'A/B testing et le mouse tracking récurrents.
Mise en oeuvre :
  • Utilisez ces techniques en phase de création et non pas en phase d’utilisation.
  • Préférez les test utilisateurs de temps à autre.
RGPD Persuasion
Pourquoi ?

Cela permet d’éviter la recherche constante de captation toujours plus efficace de l'attention de l'utilisateur.rice.

Abonnement

0 / 2
Faciliter la sortie de l'abonnement.
Mise en oeuvre :
  • L'utilisateur.rice doit trouver facilement les informations de désinscription et le bouton pour se désinscrire.
Persuasion
La désinscription est particulièrement complexe car elle ne peut se faire sans interaction avec une personne du service.
La désinscription est particulièrement complexe car elle ne peut se faire sans interaction avec une personne du service.
Pourquoi ?

Cela donne du pouvoir à l’utilisateur et ne le piège pas. (Article 25 du DSA). En savoir plus >

Prévenir en cas de débit à venir.
Mise en oeuvre :
  • Envoyer une notification, un mail ou un SMS à la personne peut être un bon moyen de la prévenir.
  • Éviter de multiplier les communications sur diverses canaux.
Persuasion
Une notification rappelle à l’utilisateur.rice un débit à venir.
Une notification rappelle à l’utilisateur.rice un débit à venir.
Pourquoi ?

Cela permet à la personne d'être au courant et de savoir si elle veut ou non continuer son abonnement.

UX

Parcours utilisateur

0 / 5
Ajouter de la friction aux endroits clefs.
Mise en oeuvre :
  • Permettre aux personnes de valider leur besoin / confirmer leur action aux endroits clefs.
  • Informer lorsqu’un traitement est en cours en arrière-plan et rendre indisponible le bouton d’action qui génère ce traitement.
Écoconception Persuasion
Cette fenêtre modale permets à l’utilisateur.rice de confirmer son action.
Cette fenêtre modale permets à l’utilisateur.rice de confirmer son action.
Pourquoi ?

Aide à réduire les erreurs des utilisateur.rice.s et donc leur procurer une meilleure expérience. 
En savoir plus >

> Évite de multiplier les requêtes serveur en laissant le temps aux personnes de prendre conscience de ce qu’il se passe.

Donner aux personnes la possibilité de contrôler certaines fonctionnalités pour en réduire l'impact.
Mise en oeuvre :
  • Proposer par exemple des fonctionnalités de choix pour la définition d'affichage des contenu multimédias.
Écoconception
L’utilisateur.rice peut contrôler ses options pour avoir la main mise sur son impact environnemental.
L’utilisateur.rice peut contrôler ses options pour avoir la main mise sur son impact environnemental.
Pourquoi ?

Certaines personnes sont déjà sensibilisées aux problématiques d’éco-conception numérique. Leur proposer d’avoir la main sur leur usage valorisera donc le positionnement du service et améliorera leur expérience. En savoir plus >

Informer de l'impact environnemental des actions lorsque cela est possible.
Mise en oeuvre :
  • Informer les personnes en amont des impacts environnementaux avant l'utilisation de fonctionnalités coûteuse en énergie.
  • Suggérer plusieurs formats pour les téléchargements.
  • Conseiller aux personnes de naviguer et de télécharger les contenus médias en Wi-FI plutôt qu’en 4G.
Écoconception
Plusieurs formats du même contenu sont proposés pour un usage éclairé.
Plusieurs formats du même contenu sont proposés pour un usage éclairé.
Pourquoi ?

Sensibiliser les personnes à l’impact de leurs actions va permettre de les responsabiliser et de leur faire prendre des choix éclairés.

Proposer divers moyens de naviguer dans le produit numérique.
Mise en oeuvre :
  • Proposer au moins deux moyens de navigation est recommandé : par le menu, le plan du site ou le moteur de recherche.
Accessibilité
Ici il est possible de naviguer par le menu, une barre de recherche et le plan du site.
Ici il est possible de naviguer par le menu, une barre de recherche et le plan du site.
Pourquoi ?

Cela permet de s’adapter aux diverses logiques mentales et donc offrir une expérience adaptée à un plus large groupe de personnes.

Simplifier le parcours pour chaque fonctionnalité.
Mise en oeuvre :
  • S’interroger sur l’unité fonctionnelle du service numérique
  • Réduire les étapes au maximum en différenciant ce qui est essentiel de ce qui est superflu.
Accessibilité Attention Écoconception
Deux parcours pour arriver au même objectif.
Deux parcours pour arriver au même objectif.
Pourquoi ?

Cela réduit les pertes de conversion ainsi que le poids du produit. C’est un critère très impactant en terme d’éco-conception et d’accessibilité. En savoir plus >

Gestes et contrôle

0 / 6
Autoriser la visualisation de la page dans toutes les directions et pour diverses tailles d’écrans.
Mise en oeuvre :
  • Travailler les composants de la page de manière responsive (leur donner des tailles et des espacements qui s’adaptent à la taille de l’écran).
  • Privilégier les tailles flexibles (ex : “Fill container” sur Figma) et les positions en % par rapport à la largeur et hauteur de l’écran.
  • Toujours vérifier ce que donne votre interface sur des écrans très larges et très petits.
Accessibilité
Les éléments de la page s’adaptent à l’écran tout en restant lisibles.
Les éléments de la page s’adaptent à l’écran tout en restant lisibles.
Pourquoi ?

Cela permet de s'adapter aux diverses situation d'utilisation des interfaces et aux diverses formats d'écrans. 
En savoir plus >

Éviter le scroll infini.
Mise en oeuvre :
  • Préférer des pages avec des numéros de pages.
  • Séparer ce qui est nouveau de ce qui est déjà vu.
Attention Écoconception
Ici les pages permettent à l’utilisateur.rice de se repérer dans les produits.
Ici les pages permettent à l’utilisateur.rice de se repérer dans les produits.
Pourquoi ?

La navigation est compliquée pour les personnes ayant l'habitude d'utiliser une barre de défilement si celle-ci a disparu au profit du scroll. En savoir plus >

Le scroll infini augmente le temps passé sur la page donc son poids. En savoir plus >

Éviter le swipe.
Mise en oeuvre :
  • Le remplacer par des éléments de type "cards" visibles sur l’écran.
  • Permettre à l’utilisateur de filtrer le contenu.
Attention
Le système de carte permet d’avoir une visualisation complète du contenu de la page.
Le système de carte permet d’avoir une visualisation complète du contenu de la page.
Pourquoi ?

Ces éléments ne prennent pas tout l’écran, ils permettent à l’utilisateur.rice d’avoir une vision globale du contenu, réduisant les effets de dépendance et de surconsommation. En savoir plus >

Laisser de l'espace entre les éléments pour le défilement.
Mise en oeuvre :
  • Respecter des espaces entre les éléments interactifs de minimum 12 px.
Accessibilité
Recommandations d’espacement entre les éléments interactifs.
Recommandations d’espacement entre les éléments interactifs.
Pourquoi ?

Certaines personnes avec des troubles moteurs, tels que des tremblements de la main, peuvent avoir du mal à faire défiler les éléments interactifs dont l'espacement est nul. En savoir plus >

Limiter le défilement horizontal à certains cas d’usage.
Mise en oeuvre :
  • Réserver le défilement horizontal qu’aux galeries d’image en explicitant bien que du contenu est caché (flèche, “voir tout”, image tronquée).
  • Ne pas faire défiler horizontalement du texte ou une page.
  • Ne pas faire défiler à l’infini pour les navigation clavier.
Accessibilité
Le scroll horizontal cache du contenu qui pourrait ne pas être vu.
Le scroll horizontal cache du contenu qui pourrait ne pas être vu.
Pourquoi ?

Faire défiler les pages horizontalement peut être difficile pour certain.e.s et n'a pas de bons retour utilisateurs (augmente la charge mentale). En revanche cela peut permettre de simplifier la page.

Permettre la réalisation de gestes complexes au clic ou au clavier.
Mise en oeuvre :
  • Penser des alternatives nécessitant un seul pointeur pour les gestes complexes (gestes multipoints, basés sur un chemin ou nécessitant des mouvements de l'appareil).
  • Indiquer aux personnes les alternatives possibles (clic droit, commandes clavier).
Accessibilité
La carte est navigable avec deux doigts, au clic souris sur les commandes et au touches claviers.
La carte est navigable avec deux doigts, au clic souris sur les commandes et au touches claviers.
Pourquoi ?

Cela permet aux personnes d’utiliser le service en toute circonstances ainsi que les personnes ayant des troubles moteurs et/ou visuels. En savoir plus >

Mise en page générale

0 / 2
Utiliser une mise en page simple, directe et cohérente.
Mise en oeuvre :
  • Éviter le superflu et de mettre trop d'information par page.
  • Maintenir des styles graphiques cohérents par composants sur toutes les pages du produit.
Accessibilité Écoconception
Une page épurée et hiérarchisée permet rapidement d’identifier son contenu.
Une page épurée et hiérarchisée permet rapidement d’identifier son contenu.
Pourquoi ?

Une présentation compliquée peut être difficile à comprendre et à utiliser. La page sera par ailleurs moins lourde à charger. En savoir plus >

Vérifier la lisibilité du texte et la cohérence du positionnement des contenus.
Mise en oeuvre :
  • Zoomer le texte à 200% pour vérifier sa lisibilité et que les éléments ne se superposent pas.
  • Faire un poing avec sa main et ouvrir juste assez pour laisser passer une "paille". Placer le poing devant l'un des yeux et fermer l'autre. Vérifier qu’il est possible de voir les informations qui sont liées, ensemble (ex formulaires).
Accessibilité
Ici deux mise en pages. La seconde permet de comprendre le produit numérique même si le contenu de la page est zoomé.
Ici deux mise en pages. La seconde permet de comprendre le produit numérique même si le contenu de la page est zoomé.
Pourquoi ?

Cela permet aux personnes peu à l’aise avec le numérique, ayant des troubles de l’attention ou utilisant des zooms d'interface, de pouvoir utiliser le produit.

Contenu

Images

0 / 4
Choisir des formats de fichiers adaptés au contenu.
Mise en oeuvre :
  • Réduire le nombre d’image et privilégier une image globale à plusieurs juxtaposées pour le même objectif.
  • Format vectoriel pour les illustrations, icônes, logos, graphes, jpg pour des photos, png pour des illustrations avec aplats de couleurs.
Écoconception
Pour représenter une équipe, une image de groupe sera moins lourde que une pour chaque membre.
Pour représenter une équipe, une image de groupe sera moins lourde que une pour chaque membre.
Pourquoi ?

Cela permet un chargement plus rapide des médias et réduit le poids du produit numérique. En savoir plus >

Choisir un niveau de compression adapté au contenu.
Mise en oeuvre :
  • La compression d'un format JPEG à 60% est visuellement acceptable.
  • Réduire la palette de couleur pour les png.
  • Aplatir les calques pour les fichier SVG.
  • Outils : ShortPixel, TinyPNG
Écoconception
La plupart du temps, la compression à 60% est imperceptible. Ici la partie droite de la photo est compressée.
La plupart du temps, la compression à 60% est imperceptible. Ici la partie droite de la photo est compressée.
Pourquoi ?

Cela optimise le poids du produit numérique et permet un chargement facilité des médias, quelque soit le niveau de connectivité.

Fournir une description pour les images complexes telles que les tableaux, les graphiques et les cartes.
Mise en oeuvre :
  • Décrire toutes les informations visibles (axes du graphique, données représentées et légendes).
  • Ajouter un texte alternatif succinct de présentation générale de l’image.
Accessibilité
Ici un exemple de description pour le graphique.
Ici un exemple de description pour le graphique.
Pourquoi ?

Sans description des axes et des données, les lecteurs d’écrans ne vont pas pouvoir décrire l’image et l’information sera perdue. En savoir plus >

Rédiger les textes alternatifs des images.
Mise en oeuvre :
  • Décrire le contenu de l'image de manière claire et concise.
  • Dire ce que l'image veut dire et démontre.
  • Si l'image comporte du texte, inclure celui-ci dans la description.
Accessibilité
Exemple de texte alternatif pour l’image.
Exemple de texte alternatif pour l’image.
Pourquoi ?

Sans textes alternatif les lecteurs d'écrans ne vont pas pouvoir décrire le contenu de l'image aux personnes qui ne la voient pas. Son propos sera donc perdu. En savoir plus >

Audio / Vidéos

0 / 6
Choisir des qualités qui soient adaptée à l’appareil de visionnage.
Mise en oeuvre :
  • Préférer une image cliquable plutôt que d’utiliser un plugin qui intègre la vidéo dans la page.
  • Éviter les vidéos avec une définition de >1080p quand le terminal détecté est un smartphone.
  • Utiliser MP3, OGG ou AAC au lieu du FLAC, AIFF ou WAV pour les fichiers audio.
Écoconception
Des images cliquables qui ouvre le lecteur Youtube dans une autre fenêtre.
Des images cliquables qui ouvre le lecteur Youtube dans une autre fenêtre.
Pourquoi ?

Cela permet le chargement plus rapide des médias et optimise le poids du produit numérique. 
En savoir plus >

Compresser les fichiers audio / video.
Mise en oeuvre :
  • Optimisation du Bitrate (débit) au sein du format pour les videos
  • Optimiser aussi le Ratio (Taux de compression) et de la Fréquence pour les fichiers audio.
  • Préférer le Stéréo pour de la musique et Mono pour des dialogues.
  • Éviter le ratio poids en mega-octet/durée en minute supérieur à 1.
  • Outil de compression de vidéo en Opensource.
Écoconception
Pourquoi ?

Le chargement des médias est optimisé pour tous les niveaux de connectivité. En savoir plus >

Éviter les audio ou vidéos en arrière plan.
Mise en oeuvre :

Si les vidéos ou audio en arrière plans sont nécessaires, permettre leur mise en pause par un bouton ou la barre espace du clavier.

Accessibilité Attention Écoconception
Le bouton de mise en pause pour une vidéo en arrière plan.
Le bouton de mise en pause pour une vidéo en arrière plan.
Pourquoi ?

Les vidéos d'arrière-plan peuvent être gênantes, en particulier si un contenu est placé au-dessus d'elles (comme du texte).

Éviter les audio ou vidéos non porteurs d'information.
Mise en oeuvre :
  • Préférer le texte et les images aux vidéos et audio.
  • S'interroger sur la pertinence d'utiliser des médias décoratifs.
Écoconception
La vidéo en arrière plan ici est décorative et se superpose au texte.
La vidéo en arrière plan ici est décorative et se superpose au texte.
Pourquoi ?

Cela permet de réduire le poids du produit numérique. En savoir plus >

S'assurer que les audio ou video ne soient pas en Autoplay.
Mise en oeuvre :
  • Préférer un bouton play/pause actionnable et visible (le bouton doit être accessible au clavier).
  • Permettre à l’utilisateur.rice de gérer les paramètres d’autoplay dans les paramètres du service.
Accessibilité Attention Écoconception
Un bouton visible pour lire la vidéo.
Un bouton visible pour lire la vidéo.
Pourquoi ?

Les vidéos et les sons inattendus peuvent distraire et perturber, en particulier dans le cas de certains types de handicaps cognitifs. L’utilisateur.rice est maintenu captif et perd la notion de quantité. Cela alourdi aussi le poids de la page.

S’assurer que les vidéos / audio aient des retranscriptions.
Mise en oeuvre :
  • Permettre la mise de sous-titre ou de retranscription audio pour les vidéos.
  • Les retranscriptions audio ou en LSF pour les vidéos peuvent être intéressantes.
  • Permettre aux personnes de paramétrer ces fonctionnalités.
Accessibilité
Les sous-titre d’une vidéo apparaissant petit à petit.
Les sous-titre d’une vidéo apparaissant petit à petit.
Pourquoi ?

Les sous-titres et retranscriptions permettent aux personnes qui ne peuvent pas entendre le contenu audio d'en comprendre le contenu. En savoir plus >

Formulaires

0 / 3
Lister et documenter les cas d'erreur.
Mise en oeuvre :
  • Afficher les erreurs de saisie de formulaire dans une liste au-dessus du formulaire après sa soumission.
Accessibilité Écoconception
Mentionner les erreurs de champs et leur caractère obligatoire aide l’utilisateur à compiler le formulaire.
Mentionner les erreurs de champs et leur caractère obligatoire aide l’utilisateur à compiler le formulaire.
Pourquoi ?

Cela permet aux utilisateur.rice.s de technologies d'assistance d'avoir rapidement une compréhension de ce qui est attendus et des problèmes présents dans le formulaire. 
> Cela évite les allers retour entre les serveurs et les utilisateur.rice.s, procure une meilleure expérience et réduit les risque d'abandons.

Nommer chaque champ de formulaire.
Mise en oeuvre :
  • Mentionner explicitement ce qui doit être rempli, les champs obligatoires ainsi que le format attendu (texte, type de fichier pour le transfert de média, taille max).
  • Placer ces indications au dessus de l'espace de réponse.
Accessibilité Écoconception
Aiguiller l’utilisateur.rice dans l’écriture requise du mot de passe lui permet de ne pas faire d’erreur.
Aiguiller l’utilisateur.rice dans l’écriture requise du mot de passe lui permet de ne pas faire d’erreur.
Pourquoi ?

Cela permet de faciliter le remplissage des informations par l'utilisateur.rice et donc diminuer les risques d’abandon.

Permettre la modification des données personnelles jusqu’à la fin du parcours.
Mise en oeuvre :
  • Permettre à la fin du parcours de revérifier les données enregistrées et de les corriger.
Accessibilité
Ici toutes les données personnelles et de paiement sont modifiables avant la confirmation de commande.
Ici toutes les données personnelles et de paiement sont modifiables avant la confirmation de commande.
Pourquoi ?

Cela réduit les risques d’erreur et permet aux personnes de rectifier leur données, leur offrant ainsi une meilleure expérience.

Téléchargements

0 / 2
Informer du poids des fichiers à télécharger.
Mise en oeuvre :
  • Afficher une information relative au poids du fichier à télécharger.
  • Proposer différentes résolutions lorsque cela est possible.
  • Permettre aux personnes de choisir la résolution des fichiers à télécharger.
Écoconception
Une alternative à la lecture en ligne est proposée avec mention du poids du fichier.
Une alternative à la lecture en ligne est proposée avec mention du poids du fichier.
Pourquoi ?

Cela permet aux personnes de limiter leur impact environnemental et de leur faire prendre conscience de leurs actions.

Réduire le poids des fichiers à télécharger par les personnes.
Mise en oeuvre :
  • Optimiser les paramètres de compression pour générer un PDF en résolution 72 dpi pour tous les médias du document.
  • Outil en ligne.
Écoconception
Outil de compression de PDF.
Outil de compression de PDF.
Pourquoi ?

Cela permet de réduire l’espace de stockage prit sur les appareils.

Textes

0 / 5
Aligner le texte selon le sens de lecture.
Mise en oeuvre :
  • Utiliser un texte aligné à gauche pour les langues de gauche à droite (LTR) et un texte aligné à droite pour les langues de droite à gauche (RTL).
Accessibilité
Deux paragraphes textuels. Le second se lisant plus facilement.
Deux paragraphes textuels. Le second se lisant plus facilement.
Pourquoi ?

Le texte centré ou justifié est difficile à lire. 
En savoir plus >

Écrire dans un niveau de langage clair et compréhensible.
Mise en oeuvre :
  • Utiliser un vocabulaire simple, facilement compréhensible, sans double sens.
  • Éviter les figures de style, les expressions idiomatiques, les métaphores compliquées ou bien la double négation.
Accessibilité Persuasion
La double négation et le choix des mots rend ici difficile la compréhension du message.
La double négation et le choix des mots rend ici difficile la compréhension du message.
Pourquoi ?

Si l’utilisateur ne comprend pas une consigne, il sera alors bloqué. Il risque de ne pas aller au bout du parcours et son expérience avec le service sera mauvaise.

Guider la personne à travers le site sans la pousser à l'action.
Mise en oeuvre :
  • Ne pas utiliser de formulation culpabilisante, agressive ou (trop) sympathique.
  • Éviter de mettre en avant graphiquement des éléments non essentiels (les textes en rouge, les points d’exclamation créent par exemple un sentiment d’alerte et de danger).
Persuasion
La culpabilisation est un mécanisme utilisé ici pour orienter l’action.
La culpabilisation est un mécanisme utilisé ici pour orienter l’action.
Pourquoi ?

Les personnes n’aiment pas être poussés à l’action ou influencés. Cela leur procurera une mauvaise expérience et nuira à l’image du service. En savoir plus >

Hiérarchiser le contenu textuel en titres et sous-titres.
Mise en oeuvre :
  • Hiérarchiser graphiquement les titres et les sous-titre pour les rendre facilement identifiables.
  • Veiller à n'avoir qu'un titre principal par page (H1).
Accessibilité
Exemple d’une hiérarchie textuelle de page.
Exemple d’une hiérarchie textuelle de page.
Pourquoi ?

Les titres et sous-titres sont importants pour aider les personnes qui utilisent des technologies d'assistance à comprendre le sens d'une page ou d'une vue.

Cela facilite l’accès aux informations de manière générale.

Mettre des majuscules avec parcimonie et que quand cela est nécessaire.
Mise en oeuvre :
  • Si possible ne pas écrire en majuscule.
Accessibilité Attention
Les majuscules cherchent ici à pousser l’utilisateur à la consommation.
Les majuscules cherchent ici à pousser l’utilisateur à la consommation.
Pourquoi ?

Cela rend la lecture compliquée et donne un sentiment d'urgence.

Barre de recherche / Filtres

0 / 2
Appliquer les filtres à la validation de la recherche.
Mise en oeuvre :
  • Laisser l'utilisateur.rice sélectionner tous les filtres avant de les valider.
Écoconception
Ici la sélection des filtres se fait avant la validation de la recherche.
Ici la sélection des filtres se fait avant la validation de la recherche.
Pourquoi ?

Cela permet de réduire le poids du produit numérique et les latences de chargement car il y a moins de requête serveur.

Minimiser les requêtes pendant la saisie.
Mise en oeuvre :
  • Il est moins lourd de ne faire aucune suggestion lors de la saisie dans la barre de recherche.
  • Si la suggestion est nécessaire, préférer les requêtes qui apparaissent après plus de 3 lettres ou 200 ms après la saisie.
Écoconception
Trois lettres ont été écrites avant que les suggestions apparaissent.
Trois lettres ont été écrites avant que les suggestions apparaissent.
Pourquoi ?

Cela permet de réduire le poids du produit numérique et les latences de chargement car il y a moins de requête serveur.

UI

Typographie

0 / 1
Choisir une police avec des caractères différentiables.
Mise en oeuvre :
  • Privilégier les polices connues.
  • Attention aux similitudes entre i et l, 0, O et b,d,p,q.
  • Les espacements entre les lettres doivent suffisant (ex : rn et m peuvent se confondre).
Accessibilité
À droite une typographie dont les caractères sont bien différentiables.
À droite une typographie dont les caractères sont bien différentiables.
Pourquoi ?

Cela facilite la lecture pour toutes les personnes et en toutes circonstances. La transmission du contenu est assurée. En savoir plus >

Couleurs / Contraste

0 / 5
Éviter la superposition du texte avec des videos et des images.
Mise en oeuvre :
  • S'assurer de la lisibilité du texte si la superposition est vraiment nécessaire.
Accessibilité
Le titre principal est ici bien visible malgré la superposition. Ce n’est pas le cas pour le mot plus petit en dessous.
Le titre principal est ici bien visible malgré la superposition. Ce n’est pas le cas pour le mot plus petit en dessous.
Pourquoi ?

Cela facilite la lecture des textes pour toutes les personnes et en toute circonstance.

Veiller à ce que la couleur ne soit pas le seul moyen de transmission de l'information.
Mise en oeuvre :
  • Rendre les liens identifiables si tout est en niveaux de gris.
  • Éviter une navigation qui nécessite de cliquer sur des éléments colorés sans autre indications.
Accessibilité
Ici la couleur n’est pas suffisante pour comprendre les erreurs du formulaire.
Ici la couleur n’est pas suffisante pour comprendre les erreurs du formulaire.
Pourquoi ?

Ne pas bloquer les personnes qui ne verraient pas les couleurs.

Vérifier le contraste de tous les textes.
Mise en oeuvre :
  • Rapport de contraste de 4,5:1 pour les textes de tailles normale (<24px et <19px en gras)
  • Rapport de contraste de 3:1 pour les textes de grandes tailles (>24px et >19px en gras).
  • (Conformité niveau AA).
  • Outil de vérification de contraste de texte.
Accessibilité
Exemple de vérification de contraste de texte.
Exemple de vérification de contraste de texte.
Pourquoi ?

Faciliter la lecture des textes pour toutes les personnes et en toute circonstance.

Vérifier le contraste des icônes et des éléments interactifs.
Mise en oeuvre :
  • Rapport de contraste de 3,0:1 (texte, boutons, cases à cocher, etc.).
  • (Conformité au niveau AA).
  • Outil de vérification de contraste sur Figma.
Accessibilité
Deux contrastes sont ici évalués selon les niveaux d'accessibilité.
Deux contrastes sont ici évalués selon les niveaux d'accessibilité.
Pourquoi ?

Cela facilite la navigation pour toutes les personnes et en toute circonstance.

Vérifiez votre contenu dans des modes de navigation spécialisés.
Mise en oeuvre :
  • Vérifier que le contenu (icônes, liens, bordures, formulaires et textes) soient toujours présents et lisibles lorsque les couleurs sont inversées ou que le mode "contraste" est activé.
  • Méthodologie de test
Accessibilité
Certains navigateur ont une “web accessibility toolbar” qui permets de vérifier l’accessibilité du contenu des pages.
Certains navigateur ont une “web accessibility toolbar” qui permets de vérifier l’accessibilité du contenu des pages.
Pourquoi ?

Cela permet d’assurer la clarté de la page pour différents appareils, différents paramètres mais aussi différentes visions.

Boutons

0 / 5
Donner un texte alternatif au bouton.
Mise en oeuvre :
  • Le texte alternatif doit indiquer ce qui va se passer si la personne clique sur le lien.
Accessibilité
Le texte alternatif du bouton “imprimer”, nécessaire à la navigation.
Le texte alternatif du bouton “imprimer”, nécessaire à la navigation.
Pourquoi ?

Si les boutons n’ont pas de textes alternatifs les lecteurs d’écrans ne pourront pas indiquer à la personne ce qu’il se passera si elle clique. De fait, elle pourrait être bloquée dans l’utilisation du service.

Rendre les liens reconnaissables en tant que tels.
Mise en oeuvre :
  • La couleur seule ne suffit pas à indiquer la présence d'un lien. Souligner est un moyen populaire et communément compris.
Accessibilité
Une convention de traitement graphique des liens est le bleu et le soulignage.
Une convention de traitement graphique des liens est le bleu et le soulignage.
Pourquoi ?

Si les liens ne sont pas reconnaissables, le risque est de perdre l'utilisateur.rice et de bloquer son parcours.

Rendre repérables les éléments interactifs.
Mise en oeuvre :
  • Travailler un état graphique des boutons et éléments lorsque la personne navigue au clavier ou le survole avec sa souris.
Accessibilité
Le bouton change d’aspect lorsque la souris le survole, permettant de comprendre que celui-ci est interactif.
Le bouton change d’aspect lorsque la souris le survole, permettant de comprendre que celui-ci est interactif.
Pourquoi ?

Cela aide les personnes identifier qu'elles peuvent effectuer des actions telles que l'activation d'un bouton ou la navigation vers la destination d'un lien.

Rendre visuellement identifiables les liens s'ouvrant dans une nouvelle page.
Mise en oeuvre :
  • Éviter les liens qui ouvrent une nouvelle fenêtre.
  • Si nécessaire, cela doit être communiqué d'une manière visible pour tous les utilisateur.rice.s.
  • Le texte alternatif du bouton doit annoncer l’ouverture dans une nouvelle page.
Accessibilité
Cet icône annonce la redirection vers un autre onglet.
Cet icône annonce la redirection vers un autre onglet.
Pourquoi ?

Cela aidera les personnes à comprendre ce qu'il se passera avant d'activer le lien (y compris les personnes utilisant un lecteur d’écran).

Veiller à ce que les éléments interactifs puissent être activés/cliqués facilement.
Mise en oeuvre :
  • La taille des icônes doit être supérieure à 18px.
  • Largeur boutons supérieure à 40px.
  • La zone de clic supérieure à 48px de large et 48px de hauteur.
Accessibilité
Un exemple de taille de bouton et d’espace entre le texte et la zone de clic.
Un exemple de taille de bouton et d’espace entre le texte et la zone de clic.
Pourquoi ?

Les commandes tactiles doivent êtres utilisables par une large gamme de tailles de mains et de stylets pour permettre à une plus grande diversité de personnes d'utiliser le produit. En savoir plus >

Interaction utilisateur

Paramètres du service

0 / 2
Paramétrer les options par défaut au niveau minimal et permettre leur personnalisation.
Mise en oeuvre :
  • Laisser l’utilisateur.rice choisir les options approfondies.
  • Bien nommer les paramètres et décrire aux personnes quel sera l’impact de leur personnalisation.
RGPD Attention Écoconception
Ici le paramètre est expliqué à l’utilisateur.rice pour lui permettre d’agir de manière éclairée.
Ici le paramètre est expliqué à l’utilisateur.rice pour lui permettre d’agir de manière éclairée.
Pourquoi ?

Cela créée une meilleure expérience et ne demande pas d’efforts aux personnes pour changer leurs paramètres.
Cela est aussi moins intrusif pour elles. En savoir plus >

Rendre visible le temps passé, la consommation d'attention et d'énergie.
Mise en oeuvre :
  • Par des messages instructifs, ou des frictions graduelles (ex: le service devient plus lent ou plus sombre au bout d’un moment).
Attention
Le temps passé sur le service est explicitement mentionné à l’utilisateur.rice.
Le temps passé sur le service est explicitement mentionné à l’utilisateur.rice.
Pourquoi ?

Donner des clefs de compréhension aux personnes et leur donner les clefs pour sortir d'une dynamique de captation. Cela permet aussi de leur faire prendre conscience de leur consommation.

Newsletter

0 / 2
Avoir la possibilité de se désinscrire de certaines catégories.
Mise en oeuvre :
  • Séparer les différents type de newsletters pour que l’utilisateur.rice puisse choisir auxquelles s’inscrire. Cela peut être par exemple une liste à cocher.
RGPD
Ici un bon exemple de liste de désinscription aux newsletters.
Ici un bon exemple de liste de désinscription aux newsletters.
Pourquoi ?

Cela donne du pouvoir aux personnes pour utiliser le service comme elles le désirent. L’expérience avec le service sera meilleure.

Demander le consentement avant inscription à une newsletter.
Mise en oeuvre :
  • Ne pas ajouter des personnes de manière automatique sans formulaire de consentement.
  • Plutôt que de pré-selectionner la réception de la newsletter par défaut, laissez le choix à la personne en expliquant quel sera le contenu et la fréquence de ces newsletters.
Persuasion
L’utilisateur.rice peu choisir quelles newsletters recevoir et les canaux de distribution.
L’utilisateur.rice peu choisir quelles newsletters recevoir et les canaux de distribution.
Pourquoi ?

Les personnes n’aiment pas se sentir piégées. L’image du service sera par ailleurs bien meilleure.

Animations

0 / 3
Minimiser au maximum les animations en Autoplay.
Mise en oeuvre :

Préférer un bouton play/pause actionnable et visible.

Accessibilité Écoconception
Exemple d’un gif animé en boucle qui ne peut être arrêté.
Exemple d’un gif animé en boucle qui ne peut être arrêté.
Pourquoi ?

Les animations inattendues peuvent distraire et perturber, en particulier dans le cas de certains types de handicaps cognitifs. Ce sont aussi des éléments qui alourdissent le poids de la page. En savoir plus >

Supprimer les animations avec les facteurs déclenchant les crises d'épilepsie.
Mise en oeuvre :
  • Bannir les animations lumineuses, brusques ou clignotantes.
Accessibilité
Exemple d’animation lumineuse et contrastée qui peut être à risque.
Exemple d’animation lumineuse et contrastée qui peut être à risque.
Pourquoi ?

Certains types d'animations stroboscopiques ou clignotantes peuvent déclencher des crises d'épilepsie.

Utiliser les animations avec parcimonie.
Mise en oeuvre :
  • Éviter les animations décoratives.
  • Faire attention à ce que les animations puissent être enlevées lorsque le mode "réduire les animations" est activé, ou ralentir sa durée.
Accessibilité Eco-conception
Un contenu gif animé venant cacher le texte de description d’un produit.
Un contenu gif animé venant cacher le texte de description d’un produit.
Pourquoi ?

Les animations pèsent lourd sur la page et peuvent gêner la navigation.