Nos engagements

Déclaration environnementale de ce site

Niveau d’écoconception du site web

• Note Ecoindex : 73,2/100
• Consommation d’eau moyenne rapportée à 1 000 utilisateurs (en litres) : 23 (soit 2 packs et demi d’eau minérale).^*
• Émission de Gaz à Effet de Serre (GES) moyenne rapportée à 1 000 utilisateurs (kilos CO2e) : 1,54 (soit un trajet de 9 km en voiture à énergie thermique).^*

Méthode d’évaluation

Nous utilisons le référentiel EcoIndex proposé par le collectif GreenIT.fr, pour évaluer la performance environnementale de ce site web. Celui-ci est quantifié grâce à deux types d’indicateurs :

• Niveau d’écoconception du site web. Cet indicateur évalue la mise en place de bonnes pratiques permettant de réduire l’impact d’une page web. Le niveau atteint est représenté par une évaluation relative de A à G (A est la meilleure note) associée à un score absolu de 0 à 100 (100 est la meilleure note).

• Consommation d’eau et émission de GES liées au chargement de la page. Cet indicateur quantifie la consommation d’eau douce (cls) et l’émission de GES (gCO2e) liées au chargement d’une page web.

À des fins de synthèse, quatre types de données sont représentées :

• Niveau d’écoconception pour les 5 pages les plus visitées du site web
• Consommation d’eau (exprimée en litres) et émission de GES (kilos CO2e) liée au chargement d’une page web pour 1 utilisateur, et rapportée à 1 000 utilisateurs.

L’analyse indiquée a été effectuée le 28/03/2023, elle est susceptible d’évoluer : la quantification des impacts environnementaux présentée ci-dessous est une photographie réalisée à un instant T.

Evaluation de l’impact des 5 pages les plus visitées du site

Page 1 : ACCUEIL

• Consommation d’eau rapportée à 1 000 utilisateurs (en litres) : 22,2 (soit 2 packs d’eau minérale).
• Émission de GES rapportée à 1 000 utilisateurs (kilos CO2e) : 1,48 (soit un trajet de 8 km en voiture à énergie thermique).

Page 2 : FONDAMENTAUX

• Consommation d’eau rapportée à 1 000 utilisateurs (en litres) : 22,8 (soit 3 packs d’eau minérale).
• Émission de GES rapportée à 1 000 utilisateurs (kilos CO2e) : 1,52 (soit un trajet de 9 km en voiture à énergie thermique).

Page 3 : GENRE

• Consommation d’eau rapportée à 1 000 utilisateurs (en litres) : 22,8 (soit 3 packs d’eau minérale).
• Émission de GES rapportée à 1 000 utilisateurs (kilos CO2e) : 1,52 (soit un trajet de 9 km en voiture à énergie thermique).

Page 4 : HANDICAP

• Consommation d’eau rapportée à 1 000 utilisateurs (en litres) : 23,7 (soit 3 packs d’eau minérale).
• Émission de GES rapportée à 1 000 utilisateurs (kilos CO2e) : 1,58 (soit un trajet de 9 km en voiture à énergie thermique).

Page 5 : LGBT+

• Consommation d’eau rapportée à 1 000 utilisateurs (en litres) : 23,7 (soit 3 packs d’eau minérale).
• Émission de GES rapportée à 1 000 utilisateurs (kilos CO2e) : 1,58 (soit un trajet de 9 km en voiture à énergie thermique).

*Moyenne de l’impact environnemental des 5 pages les plus visitées ce site web.

L’écoconception

L’écoconception s’appuie sur une méthodologie et un ensemble de bonnes pratiques pour réduire l’impact de ce site web sur son environnement. Concrètement, il va s’agir de limiter les ressources techniques nécessaires à l’affichage d’une page ou à l’exécution d’une fonctionnalité, tout en étant au plus proche du besoin de l’utilisateur.

Vous êtes un professionnel du numérique et vous souhaitez réduire l’impact environnemental de vos sites ? Voici quelques bonnes pratiques à mettre en œuvre :

Quelques bonnes pratiques en matière d’ergonomie et de design

• Limiter le nombre de fonctionnalités dès la conception
• Supprimer les fonctionnalités non utilisées
• Limiter le nombre de carrousels
• Choisir des typographies au poids réduit
• Favoriser les designs simples et épurés
• Adopter quand cela est possible une approche « mobile-first »
• Préférer la pagination au défilement infini
• Éviter la lecture et le chargement automatique des vidéos et des sons
• Optimiser les parcours utilisateurs
• …

Quelques bonnes pratiques en matière de gestion des contenus

• Préférer les images aux vidéos
• Limiter le nombre d’images sur chaque page
• Optimiser la taille des images au format cible
• Compresser les images via un outil de type TinyPNG ou ImageCompressor
• Compresser les pdfs via un outil de type iLovePDF
• Limiter l’utilisation des GIFs animés
• Préférer les glyphs aux images
• …

Quelques bonnes pratiques en matière de développement

• Proposer un traitement asynchrone lorsque c’est possible
• N’utilisez que les portions indispensables des bibliothèques JS et CSS
• Mettre en cache les données calculées souvent utilisées
• Limiter le nombre d’appels aux API HTTP
• Réduire le volume de données stockées au strict nécessaire
• Utiliser la version la plus récente du langage
• Fournir une alternative textuelle aux contenus multimédias
• Découper les CSS
• Ne pas faire de modification du DOM lorsqu’on le traverse
• Utiliser le chargement paresseux (lazyload)
• Valider les pages auprès du W3C
• Ajouter des entêtes Expires ou Cache-Control
• Compresser les fichiers texte : CSS, JS, HTML et SVG
• Mettre en place un sitemap efficient

Quelques bonnes pratiques en matière d’hébergement

• Choisir un hébergeur écoresponsable
• Installer le minimum requis sur le serveur
• S’appuyer sur les services managés
• Optimiser l’efficacité énergétique des serveurs
• Réduire au nécessaire les logs des serveurs
• Apache Vhost : désactiver le AllowOverride
• Utiliser des serveurs virtualisés
• Utiliser un serveur asynchrone
• Stocker les données dans le cloud
• …

L’accessibilité numérique consiste à rendre les services de communication au public en ligne accessibles aux personnes handicapées, c’est-à-dire :

• perceptibles : par exemple, faciliter la perception visuelle et auditive du contenu par l’utilisateur ; proposer des équivalents textuels à tout contenu non textuel ; créer un contenu qui puisse être présenté de différentes manières sans perte d’information ni de structure (par exemple avec une mise en page simplifiée) ;
• utilisables : par exemple, fournir à l’utilisateur des éléments d’orientation pour naviguer, trouver le contenu ; rendre toutes les fonctionnalités accessibles au clavier ; laisser à l’utilisateur suffisamment de temps pour lire et utiliser le contenu ; ne pas concevoir de contenu susceptible de provoquer des crises d’épilepsie ;
• compréhensibles : par exemple, faire en sorte que les pages fonctionnent de manière prévisible ; aider l’utilisateur à corriger les erreurs de saisie.
• robustes : par exemple, optimiser la compatibilité avec les utilisations actuelles et futures, y compris avec les technologies d’assistance.

BONNES PRATIQUES

Bon à savoir

Plusieurs thèmes prêts et adaptés pour l’accessibilité existent sur WordPress. Ces options ont passé un audit d’accessibilité, offrant des fonctionnalités supplémentaires pour une navigation facile et une visibilité claire.

Voici quelques caractéristiques de base à rechercher dans un thème « accessibility ready »

• Navigation au clavier
• Structure raisonnable des titres HTML
• Palette de couleurs contrastées

Une autre solution simple pour améliorer les sites web est d’utiliser des plugins d’accessibilité. Nous avons fait le choix de One Click Accessibility qui, sans se substituer à un développement propre et performant, permet de personnaliser l’affichage du site en un clic.

CONTENU

• Faciliter la compréhension rapide d’une page

• Nommer les liens explicitement

• Construire une hiérarchie des titres pertinente

• Rester cohérent sur tout le parcours

• Décrire les images avec le texte alternatif

DESIGN

Contraste et taille

Une attention toute particulière doit être portée aux notions de contraste et de taille des éléments, notamment en ce qui concerne les contenus textuels et les call-to-action. De nombreux outils permettent de s’assurer que ces deux critères sont remplis, par exemple https://contrastchecker.com.

Choix typographique

Nous avons fait le choix de Lexend, une typographie créée spécialement pour faciliter la lisibilité et la fluidité.

De manière plus générale, utiliser une typographie sans serif avec un espacement entre les lettres raisonnable est recommandé.

Couleurs et formes

De la même manière, le sens d’un élément ne peut pas dépendre de sa couleur ou de sa forme. Par exemple, un message d’erreur ne peut pas se réduire à l’utilisation de la couleur rouge, ou à l’utilisation d’une signalétique triangulaire. L’erreur doit être explicitement formulée. Le site doit rester lisible et navigable aisément en noir et blanc.

Exhaustivité des indications textuelles

Les liens, et les éléments de navigation en général, doivent donner une indication claire quant à leur destination. On préférera ainsi les liens explicites de type “Lire l’article”, plutôt que des formulations génériques de type “En savoir plus” ou “Découvrir”.

Fonder la navigation sur l’habileté de l’utilisateur 

Les zones tactiles doivent être suffisamment grandes (au moins 44 × 44 pixels) et éloignées les unes des autres.

Cela sera utile :

• Aux personnes ayant des troubles moteurs
• Utilisant leur support dans un environnement peu stable (transport en commun)
• Faible vision

Aussi on limitera les actions complexes.

Pour assurer la pleine accessibilité du contenu, celui-ci doit être accessible de trois manières différentes, par exemple via la souris ou le trackpad, via une navigation au clavier, et via une commande vocale.

Les gens pensent différemment. En proposant plusieurs moyens de navigation, on permet à chacun de s’y retrouver facilement. La navigation peut se faire par :

• Un menu
• Un plan du site
• Un moteur de recherche

Éviter tout ce qui clignote 

Enfin, les effets “stroboscope” sont à proscrire (clignotements, flashs, lumières intermittentes …).