UNE DÉMARCHE GLOBALE

ALOEN, de par ses métiers et ses actions, est engagée sur les questions de transitions et de développement durable. C’est pour cette raison que nous avons voulu aller au bout de la démarche et repenser intégralement notre site internet pour l'inscrire dans une démarche d'éco-conception et d'accessibilité. L'objectif ? Limiter son empreinte environnementale tout en le rendant accessible au plus grand nombre.

Ce travail de longue haleine, qui aura pris près de deux ans, est né d'un constat : notre (ancien) site ne reflétait pas la dynamique des projets d'ALOEN ! En effet, l'arborescence* était conçue de manière assez complexe et ne nous permettait pas de mettre à jour facilement le contenu de nos missions.

* L'arborescence est la représentation de la structure et de l'organisation de l'information/des contenus d’un site internet.

éco-conception

accessibilité

éco-conception

Un site éco-conçu intègre dans son cahier des charges (fonctionnalités, graphisme, hébergement...) les contraintes d'un numérique responsable. Il répond à trois critères :

  • La durabilité : il réduit son empreinte environnementale au maximum et est conçu pour durer le plus longtemps possible avec peu de maintenance,
  • L'accessibilité : sa “légèreté” permet à un plus grand public d’y accéder et ce, quelque soit la qualité du réseau et l'âge de l'ordinateur et/ou du smartphone,
  • L'utilité : il répond aux besoins présents et futurs de ses utilisateurs (habitant·es, entreprises, syndicats, collectivités, élu·es, partenaires...), mais aussi de l’équipe d’ALOEN.
l'impact environnemental

Aujourd’hui, l’empreinte environnementale des nouvelles technologies représente plus de gaz à effet de serre que l'aviation civile : le numérique mondial représente un 7ème continent.

La performance environnementale de chaque page est calculée à partir de données quantitatives objectives : le score sur 100 est traduit par une note allant de A à G. A et 100 sont les plus hauts niveaux de performance environnementale atteignables. Environ 75 % des pages web testées se situent entre C et E, la moyenne étant à D, une note de C témoigne d'une performance environnementale supérieure à la moyenne.

Attention : cette note est basée uniquement sur la partie visible du site. Nous avons choisi d’optimiser la partie non visible du site également. On vous en dit plus dans la partie “Et du coup, concrètement ?’ !

L'empreinte environnementale, elle, est matérialisée par les émissions de gaz à effet de serre et la consommation d'eau générées par les pages du site internet.

Source : EcoIndex.

Nous sommes parti·es de loin : le site d'ALOEN avait une note de F sur Website Carbon Calculator et de D sur Eco index. “Hum, pas top... La bonne nouvelle, c'est que vous pouvez faire beaucoup mieux !".

et du coup, concrètement ?

L'éco-conception s'appuie sur un ensemble de bonnes pratiques pour réduire l'impact d'un site internet sur son environnement : concrètement, il s'agit 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.

Pour réduire le poids du site internet d’ALOEN, nous avons choisi de :

  • Optimiser davantage le parcours utilisateur en limitant le nombre de requêtes autant que possible (sans pour autant renoncer à toute fonctionnalité),
  • Faire appel à un prestataire web spécialisé dans l’éco-conception : Laurent Poulard,
  • Utiliser un CMS (Content Management System, c’est-à-dire le système de gestion de contenu du site) léger et facile à maintenir : Grav .
  • Déployer un site statique pour y migrer chaque année les archives des actualités,
  • Favoriser un design simple, épuré et durable dans le temps (parce que oui : éco-conception ne veut pas dire site internet triste !),
  • Proposer une version sombre, plus économe en énergie et qui permet d’éviter à l’utilisateur·ice d’installer une extension sur son navigateur web pour bénéficier de cette version,
  • Revoir la façon de concevoir nos contenus, par exemple : utiliser moins d’images et éviter les carrousels de photos,
  • Utiliser des photos dites “tramées” (la photo est composée de petits points et contient seulement 4 couleurs, qui correspondent à la charte graphique d’ALOEN) et des images compressées.
  • Proposer l’option d’afficher ou non les images sur un maximum de pages, ce qui améliore les performances d’affichage des pages et évite d’augmenter le temps de chargement pour un·e utilisateur·ice disposant d’une mauvaise connexion internet,
  • Favoriser les illustrations et/ou de pictogrammes (format .svg) et les images en format .webp, qui sont plus légères,
  • Utiliser des liens cliquables plutôt que de mettre directement des vidéos, aperçus des réseaux sociaux, documents divers...
  • Respecter vos données personnelles (pas de captation des données), en ne permettant pas aux intégrations tierces de se comporter comme si on était sur ce site tiers.

Aujourd’hui, grâce à tout ça, nos pages les plus consultées ont une note allant de Ecoindex Badge à Ecoindex Badge ou encore Ecoindex Badge en ce qui concerne la partie visible du site (le front-end).

Notre site web est également classé vert en ce qui concerne son hébergement, vérifié par la Green Web Foundation :
This website runs on green hosting - verified by thegreenwebfoundation.org

Vous pouvez également tester les pages de ce site web ou du vôtre sur le calculateur de notre prestataire, qui est calculé à partir de la méthode C02js de la Green Web Foundation. Certains calculateurs d'émissions de c02 utilisent cette méthode.

accessibilité

ALOEN s'est engagée dans une démarche exigeante en faveur de l'accessibilité de son site internet. L'objectif : permettre à chacun·e de naviguer facilement sur le site afin de trouver l'information recherchée.

L’accessibilité numérique consiste à rendre les outils en ligne accessibles aux personnes en situation de handicap, c’est-à-dire : perceptibles, utilisables et compréhensibles. Notre (ancien) site internet était difficile d’accès et l’objectif principal de cette refonte était d’en refaire toute l'arborescence pour simplifier le parcours et l’expérience usager.

Nous nous sommes aussi rendu·es compte, en creusant un peu, que les couleurs du (précédent) site d’ALOEN n’étaient pas adaptées pour les personnes en situation de handicap visuel : les couleurs, jaune sur blanc et/ou blanc sur jaune, n’étaient pas lisibles.

Outil de vérification des contrastes : Webaim (Web Accessibility In Mind).

La typographie utilisée pour le corps de texte pouvait, elle aussi, être la cause de difficultés de lecture.

Pour rendre accessible le site internet d’ALOEN au plus grand nombre, nous avons donc choisi de :

  • Simplifier l’arborescence et l’expérience utilisateur·ice (par exemple, en créant le menu “Vous êtes un·e...”),
  • Simplifier et vulgariser au maximum les informations,
  • Mettre des textes alternatifs sur chaque image,
  • Opter pour le vert d’ALOEN à la place du jaune et ajouter un vert plus foncé à notre charte graphique pour créer du contraste et assurer la lisibilité de nos contenus,
  • Proposer une version sombre (“dark mode”) pour le confort visuel,
  • Utiliser pour les corps de texte ainsi que certains titres et sous-titres, une typographie conçue par Braille Institute, à destination des personnes en situation de handicap visuel. Cette typographie est conçue pour être facile à lire : en effet, les lettres sont claires et distinctes (même celles qui sont similaires !), avec une distinction notable entre les lettres miroirs (par exemple, le « p » et « q »),
  • Mettre un balisage sémantique (une balise sémantique apporte une indication sur le contenu d'une page web) pour les assistants de lecteurs d'écran.
  • Réaliser un audit automatisé et manuel sur toutes les pages du site, pour corriger les erreurs élémentaires d'accessibilité.
déclaration d'accessibilité

L’accessibilité numérique consiste à rendre les contenus et services numériques compréhensibles et utilisables par les personnes en situation de handicap.

Un site internet accessible permet par exemple de : personnaliser son affichage via le système d'exploitation et/ou le navigateur, naviguer à l'aide de technologies d'assistance, naviguer sans utiliser la souris...

état de conformité

Ce site n’a pas encore été testé pour vérifier son niveau de conformité RGAA (Référentiel Général d'Amélioration de l'Accessibilité).

  • Avec l’outil d’audit Google Lighthouse, le site obtient un score de 100% à sur les critères d’accessibilité qu’il permet d’évaluer. Les tests automatiques ont donc été effectués via celui-ci,
  • Une navigation clavier complète a été testée manuellement sur un panel de pages et permet d’accéder à toutes les fonctionnalités et contenus et de naviguer avec la touche tab sur la page entière,
  • Des tests manuels ont été réalisés sur les pages principales du site, via l’outil de test WAVE, qui a permis de corriger toutes les erreurs d’accessibilité repérées par celui-ci. Des avertissements repérés par ce même outil ont été constatés sur toutes les pages et devront faire l’objet d’un audit pour évaluer la nécessité de leur correction ou non,
  • Les contrastes entre le fond, les polices et les liens ont été respectés suivant la norme WCAG.

environnements de test

Technologies front end utilisées :

  • HTML
  • CSS
  • JS
  • TWIG

Les vérifications de restitution de contenus ont été faites avec les navigateurs suivants :

  • Firefox developer edition sous Xubuntu Linux (moteur de rendu Gecko)
  • Epiphany browser sous Xubuntu Linux (moteur de rendu Webkit)
  • Chromium browser sous Xubuntu Linux (moteur de rendu Blink)

Outils pour évaluer l'accessibilité :

  • WebAim contrast link checker
  • Wave
  • Outils de développement et d‘inspection du navigateur (Browser developer tools)
  • Google Lighthouse

retour d'information et contact

Pour toute remarque, signalement, demande d’assistance, ou si vous n’arrivez pas à accéder à un contenu ou à un service, vous pouvez contacter ALOEN pour être orienté vers une alternative accessible ou obtenir le contenu sous une autre forme. Pour ce faire, envoyez un message à contact(at)aloen.fr.

Cette déclaration d’accessibilité a été établie en juillet 2025. Elle sera mise à jour régulièrement, au fur et à mesure de la progression des travaux de mise en conformité de notre site internet.

en savoir plus

Un plan d’actions de mise en conformité d’accessibilité est actuellement en cours de construction.

POUR ALLER PLUS LOIN...

Il est bien sûr possible d’aller plus loin, en obtenant par exemple la certification FALC (Facile À Lire et à Comprendre), de faire une navigation intégrale au clavier, ou encore de réaliser des tests par des utilisateurs avec lecteurs d’écran, ainsi qu'un audit manuel de toutes les pages du site. Peut-être un jour à ALOEN ?