Éco-conception et Design Inclusif : le duo gagnant pour un web durable et équitable

L’éco-conception et le design inclusif sont aujourd’hui des enjeux majeurs dans la création de services numériques. L’éco-conception vise à réduire l’empreinte carbone des sites web en optimisant leur performance et leur consommation énergétique. Tandis que le design inclusif cherche à garantir que chaque utilisateur, quelles que soient ses capacités et contraintes, puisse naviguer sans obstacle.

Ces deux approches se renforcent mutuellement : un site bien conçu, frugal et performant est bénéfique tant pour l’expérience utilisateur que pour son impact environnemental.

Voici un florilège des bonnes pratiques allant dans ce sens-là, pour un web plus accessible et responsable.

Conception inclusive, conception accessible : quelles différences ?

Une interface inclusive et accessible vise à garantir que tous les utilisateurs, quelles que soient leurs capacités physiques, cognitives ou technologiques, puissent naviguer et interagir avec de manière fluide et efficace.

En conception web, l’inclusivité consiste à prendre en compte la diversité des utilisateurs dès la phase de conception afin d’éviter l'exclusion involontaire de certains publics. Cela inclut :

• L’accessibilité numérique pour les personnes en situation de handicap.
• Une adaptation aux différents niveaux de compétences numériques (utilisateurs novices ou expérimentés).
• La prise en compte des divers contextes d’usage (faible connexion internet, appareils variés, limitations technologiques).
• L’inclusion culturelle et linguistique, en évitant les contenus discriminatoires et en proposant des traductions adaptées.

Quant à l’accessibilité, elle consiste à concevoir un site conforme aux normes et recommandations établies, notamment les Web Content Accessibility Guidelines (WCAG). Voici une liste non exhaustive de quelques bonnes pratiques :

Accessibilité visuelle 👁️

• Garantir un bon contraste entre le texte et l’arrière-plan (au moins 4.5:1 pour le texte normal, 3:1 pour le texte large)
• Permettre le redimensionnement du texte sans perte de lisibilité
• Éviter les informations uniquement transmises par la couleur
• Offrir des textes alternatifs si les images ne s'affichent pas correctement

Accessibilité auditive 👂

• Fournir des sous-titres et des transcriptions pour les contenus audio et vidéo
• Proposer des alternatives textuelles aux sons critiques

Accessibilité motrice 🖖

• Permettre la navigation uniquement au clavier
• Assurer des boutons et liens suffisamment grands et faciles à cliquer
• Éviter les animations ou interactions nécessitant des gestes complexes
• Proposer des alternatives aux interactions tactiles (exemple : boutons cliquables en plus du "swipe")

Accessibilité cognitive 🧠

• Rédiger un contenu clair et structuré (titres, listes, paragraphes courts)
• Éviter les éléments distrayants ou des animations excessives, qui se lancent de manière automatique
• Proposer des aides à la navigation comme un plan du site ou une fonction de recherche
• Veiller à la consistance du design d’une page à une autre

Accessibilité numérique 📱

• Offrir un design qui s'adapte et épouse les différents terminaux (mobile, tablette, desktop et dispositifs annexes)
• Offrir un site léger qui reste opérationnel même dans des zones à faible connectivité

Adopter une démarche d’inclusion et d’accessibilité dans la conception web ne se limite pas à répondre aux obligations légales ; elle permet d'améliorer l'expérience utilisateur pour tous en rendant les contenus et services accessibles à un maximum de personnes, quels que soient leurs besoins.

Vous augmentez votre audience en incluant un public plus large, et améliorez votre référencement naturel puisque Google valorise les sites accessibles.

Design éco-responsable

Le web pollue (5% de la pollution mondiale). L’éco-conception d’un site web vise à minimiser son impact environnemental tout en optimisant ses performances et l’expérience utilisateur.

Voici les bonnes pratiques à adopter - certaines vont de pair avec celles du design inclusif que nous avons vues plus haut.

Spoiler alert : L'écoconception ne se fait pas au détriment de la qualité d’une interface. 😉

Réduire le poids des pages et limiter les requêtes :

• Compresser les images en utilisant des formats légers et optimisés (WebP, AVIF, SVG)
• Limiter le nombre de requêtes serveurs
• Utiliser le lazy loading pour charger uniquement les images et vidéos visibles à l’écran
• Limiter le nombre de polices téléchargées
• Éliminer les plugins
• Utiliser un maximum de composants natifs des navigateurs.

Optimiser l’hébergement et le serveur :

• Choisir un hébergeur éco-responsable utilisant des énergies renouvelables
• Mettre en place un système de cache pour limiter les sollicitations serveur
• Utiliser un CDN (Content Delivery Network) pour réduire la distance des transferts de données

Concevoir une interface épurée et efficace :

• Favoriser un design minimaliste
• Éviter les animations lourdes et superflues
• Optimiser le CSS et JavaScript, en supprimant le code inutile
• Éviter les carrousels et les fonds animés, qui alourdissent le site

Améliorer l’expérience utilisateur et l’accessibilité :

• Simplifier le parcours et aller à l’essentiel
• Proposer un mode sombre, qui réduit la consommation énergétique des écrans OLED
• Faciliter l’accès aux informations clés pour limiter les recherches prolongées
• Veiller à paginer les actualités (éviter le défilement infini)
• Assurer une bonne compatibilité mobile, pour éviter les chargements inutiles sur petits écrans.

Réduire la consommation de ressources côté utilisateur :

• Encourager l’utilisation de modes hors ligne, comme la mise en cache des pages
• Optimiser les formulaires et interactions, en réduisant les étapes inutiles
• Fournir une version allégée du site, sans tracking ni publicités intrusives

Mesurer et améliorer l’empreinte carbone du site

• Utiliser des outils comme Website Carbon, EcoIndex ou Lighthouse pour évaluer l’impact du site
• Analyser les performances et supprimer les fonctionnalités inutiles
• Éviter le stockage excessif des données en purgeant régulièrement les bases de données

L’éco-conception et le design inclusif sont étroitement liés, car ils partagent des objectifs communs : optimiser l'expérience utilisateur tout en réduisant les impacts négatifs qu’ils peuvent porter (environnementaux, sociaux et économiques). Un site simple, léger et efficace profite autant à l’environnement qu’aux utilisateurs en situation de handicap ou disposant de connexions limitées.

En intégrant l’éco-conception et l’accessibilité dans nos process design, nous sommes plus à même de créer des expériences numériques plus durables, équitables et ce plus pour le plus grand nombre.

📖 Ressources pour aller plus loin

• Outil pour tester l’accessibilité d’un site : Google Light House
• Outil pour vérifier l’impact environnemental d’un site : ecoindex.fr de Green IT
• Règles pour l’accessibilité des contenus Web : WCAG Guidelines
• Référentiel général d’amélioration de l’accessibilité : RGAA 4
• Référentiel général de l’écoconception des services numériques : rapport de l’ARCEP
• Guide de Référence de Conception Responsable de Services Numériques : GR491 par l'INR.
• 10 Usability Heuristics for User Interface Design : article de Jakob Nielsen

---

Article rédigé par Michaël Blaizot