Déclaration de bonnes pratiques
Numérique Responsable
Ce document recense les pratiques d'accessibilité et d'écoconception mises en œuvre sur le site de l'Académie NR. Il atteste de notre engagement à proposer un service numérique sobre, inclusif et respectueux de l'environnement.
Accessibilité
-
✓Langue
Attribut
langsur toutes les pagesChaque page HTML déclare sa langue via l'attribut
langsur la balise<html>(fr, en, nl). Les lecteurs d'écran adaptent ainsi leur synthèse vocale à la langue du contenu. -
✓Navigation
Lien d'évitement (skip link)
Un lien "Aller au contenu principal" est présent en haut de chaque page. Il devient visible à la prise de focus clavier et permet aux utilisateurs de lecteurs d'écran ou de navigation au clavier de passer directement au contenu sans traverser le menu.
-
✓Structure
HTML sémantique
Les pages utilisent les balises sémantiques appropriées :
<header>,<nav>,<main>,<section>,<footer>. La hiérarchie des titres (<h1>à<h4>) est respectée sur l'ensemble du site. -
✓ARIA
Attributs ARIA sur les composants interactifs
Le menu hamburger utilise
aria-expandedpour indiquer son état ouvert/fermé. Le sous-menu Ressources utilisearia-haspopupetaria-expanded. Les navigations portent desaria-labeldistincts (Navigation, Language). -
✓Focus
Indicateur de focus visible
La pseudo-classe
:focus-visibleest définie globalement avec un contour visible (3px, couleur accent). Les utilisateurs naviguant au clavier disposent d'un repère visuel clair sur tous les éléments interactifs. -
✓Images
Textes alternatifs sur toutes les images
Toutes les balises
<img>du site portent un attributaltdescriptif. Les images décoratives utilisentalt=""pour être ignorées par les technologies d'assistance. -
✓Contraste
Contraste des couleurs conforme WCAG AA
Le bleu INR principal (#0D3280) sur fond blanc offre un ratio de contraste supérieur à 7:1 (AAA). La typographie de base est fixée à 18px pour une lisibilité optimale.
-
✓Responsive
Adaptation mobile complète
Le site est entièrement responsive. En dessous de 820px, le menu principal se replie derrière un bouton hamburger. Les grilles de contenu s'adaptent en une colonne sur mobile. La taille de police de base est réduite à 17px sur petit écran.
-
✓Multilingue
Site disponible en 3 langues
L'ensemble des pages est disponible en français, anglais et néerlandais. Les boutons de changement de langue sont accessibles depuis toutes les pages. Lorsqu'une version linguistique n'est pas encore disponible, le bouton est désactivé avec une indication "Prochainement".
Écoconception
-
✓Architecture
Site 100 % statique
Le site est composé exclusivement de fichiers HTML, CSS et JavaScript statiques. Il ne nécessite aucun serveur d'application, aucune base de données, aucun moteur de rendu côté serveur. L'empreinte serveur est minimale et les ressources sont directement mises en cache par le navigateur.
-
✓Code
Zéro framework JavaScript
Le site n'utilise aucune librairie ou framework JavaScript tiers (pas de React, Vue, jQuery…). Les interactions (menu hamburger, dropdown) sont gérées par quelques dizaines de lignes de JavaScript natif, sans dépendances externes à télécharger.
-
✓Code
CSS centralisé, sans duplication
Un unique fichier
style.csscontient l'intégralité du design system (variables, composants, utilitaires). Il est partagé par toutes les pages, ce qui réduit le volume total de données transférées et facilite la maintenance. -
✓Code
Composants partagés via injection JavaScript
Le header et le footer sont générés dynamiquement par un unique fichier
components.js. Chaque page ne charge que son contenu propre, éliminant la duplication de code HTML sur 22 pages et réduisant le poids total du site. -
✓Images
Chargement différé des images (lazy loading)
L'attribut
loading="lazy"est appliqué à toutes les images situées hors du viewport initial (vignettes de modules, logos de footer, badge de licence). Seule l'image au-dessus du pli (logo header) est chargée immédiatement. -
✓Polices
Auto-hébergement de la police Source Sans 3
La police Source Sans 3 est hébergée directement sur le serveur du site (fichiers WOFF2 locaux). Aucune requête DNS vers Google Fonts n'est émise, ce qui supprime une dépendance externe, améliore la disponibilité hors connexion et renforce la vie privée des utilisateurs.
-
✓Requêtes
Absence de traceurs et cookies non essentiels
Le site ne charge aucun outil d'analytics tiers (Google Analytics, Matomo…), aucun pixel de tracking, aucun widget de réseau social. Aucun cookie non fonctionnel n'est déposé. La seule ressource externe est les formulaires Microsoft Forms.
-
✓SEO
Meta descriptions et balises Open Graph sur toutes les pages
Chaque page dispose d'une meta description adaptée à sa langue. Les balises Open Graph permettent un aperçu précis lors du partage sur les réseaux sociaux, réduisant les clics inutiles vers des pages non pertinentes.
-
✓SEO
Sitemap.xml avec annotations multilingues
Un fichier
sitemap.xmlliste l'ensemble des URLs du site avec des baliseshreflangindiquant les équivalences entre versions linguistiques. Google peut ainsi indexer efficacement le site sans explorer inutilement des pages redondantes. -
✓Contenu
Contenus pédagogiques hébergés en propre
Les modules de formation (exports Articulate Rise) sont hébergés directement sur le même serveur que le site. Aucun appel vers des plateformes LMS tierces n'est nécessaire pour accéder aux formations, limitant les dépendances externes et la consommation réseau.
Axes d'amélioration identifiés
Les points suivants ont été identifiés comme améliorations à envisager dans une prochaine itération.
Les vignettes des modules MOOC sont au format PNG. Une conversion en WebP réduirait leur poids de 2 à 3 fois, avec un fallback PNG pour les navigateurs anciens.
L'image de prévisualisation utilisée pour les partages sur les réseaux sociaux est actuellement le logo INR. Une image aux dimensions recommandées (1200×630 px) améliorerait l'impact visuel lors des partages.
Les contenus pédagogiques sont des exports Articulate Rise dont l'accessibilité dépend des paramétrages effectués lors de leur production. Un audit spécifique de ces modules est recommandé.
Institut du Numérique Responsable
Document mis à jour en mars 2026 — Académie NR v3