Préface de Vincent Courboulay - Directeur Scientifique de l'Institut du Numérique Responsable

L'écoconception et l'accessibilité des sites web sont des défis majeurs que les entreprises doivent désormais relever. Ce support à l'approche très pragmatique et concrète est fait pour former et transmettre aux développeurs et développeuses web les bonnes pratiques en matière d'écoconception et d'accessibilité numérique.

Le support s'ouvre sur un premier chapitre introduisant les différentes facettes du Numérique Responsable afin de bien comprendre les enjeux et l'importance de développer des sites à la fois de manière plus écologique et conçus pour être accessibles à tous. L'auteur indique ensuite comment auditer un site internet à la fois pour faire un état des lieux, mais également pour l'améliorer et attester de son niveau de green IT et d'accessibilité.

Le chapitre sur la conception du site est central puisque de cette étape dépend en grande partie la réussite du site aussi bien d'un point de vue green IT qu'accessibilité. Les chapitres qui suivent détaillent pour chaque élément de contenu des sites (textes, navigation, images, médias audio et vidéo, tableaux, cartes, documents à télécharger, formulaires…) les bonnes pratiques à utiliser et surtout comment les mettre en œuvre.

Deux chapitres sont axés sur le green IT pour montrer comment effectuer des traitements les plus efficaces et économes possibles sur le navigateur et sur le serveur web ainsi que sur le serveur de bases de données.
Enfin, le dernier chapitre traite de l'hébergement et du paramétrage du serveur web.

En complément de ce support, un site web (https://numeriqueresponsable.zici.fr) a été créé permettant d'apporter des compléments et de mettre à jour des informations au fur et à mesure des évolutions du web. Ce site sert d'exemple tout au long du support pour illustrer les propos des différents chapitres.

Les droits d'auteur de ce support seront reversés en faveur de différentes associations humanitaires ou causes en faveur de la protection de la planète et des personnes en situation de handicap.

Téléchargements

• Des fichiers complémentaires (49 879 Ko)

Introduction au numérique responsable

1. 1. Le développement durable
2. 2. Le green IT
   1. 2.1 La multiplication des équipements informatiques
   2. 2.2 La fabrication des équipements informatiques
   3. 2.3 La consommation d'électricité
   4. 2.4 La fin de vie des équipements informatiques
   5. 2.5 Le traitement des déchets
   6. 2.6 Le green for IT
   7. 2.7 L'IT for green
3. 3. L'accessibilité
   1. 3.1 Les différents types de déficiences
      1. 3.1.1 Les déficiences visuelles
      2. 3.1.2 Les déficiences auditives
      3. 3.1.3 Les déficiences motrices
      4. 3.1.4 Les déficiences intellectuelles
      5. 3.1.5 Les déficiences cognitives
      6. 3.1.6 Le polyhandicap
   2. 3.2 La fracture numérique
   3. 3.3 Les référentiels
      1. 3.3.1 Le référentiel au niveau mondial
      2. 3.3.2 Le cadre réglementaire en France
      3. 3.3.3 Les référentiels dans les pays francophones
4. 4. La performance
5. 5. Le numérique responsable

L'audit d'un site existant

1. 1. Introduction
2. 2. Les cadres des audits
   1. 2.1 L'accessibilité
      1. 2.1.1 Le WCAG
      2. 2.1.2 Le RGAA
   2. 2.2 Le green IT
3. 3. Les outils automatisés
   1. 3.1 La validité du code
   2. 3.2 L'accessibilité
      1. 3.2.1 Tanaguru
      2. 3.2.2 Les outils de développement et les plug-ins des navigateurs
   3. 3.3 Le green IT et la performance
      1. 3.3.1 Ecometer, Ecoindex et GreenITAnalysis
      2. 3.3.2 Carbonalyser
      3. 3.3.3 Greenspector
      4. 3.3.4 Lighthouse
      5. 3.3.5 Les outils de développement
4. 4. La labélisation
   1. 4.1 Le RGAA
   2. 4.2 Les normes volontaires pour des services numériques écoresponsables

La conception du site

1. 1. Introduction
2. 2. Les fonctionnalités utiles
3. 3. La structuration du site
   1. 3.1 La profondeur du site
   2. 3.2 L'historique de navigation
   3. 3.3 La personnalisation des pages d'erreur
4. 4. La structuration d'une page
   1. 4.1 Les lecteurs d'écran
   2. 4.2 Les titres
   3. 4.3 Le rôle des balises
      1. 4.3.1 Les balises sémantiques HTML5
      2. 4.3.2 Les landmarks ARIA
   4. 4.4 Le modèle de page
5. 5. Le design
   1. 5.1 Le style sans avoir recours aux images
   2. 5.2 Le responsive web design
   3. 5.3 La gestion du zoom
   4. 5.4 Le choix des couleurs
6. 6. Le choix du langage, du framework web ou du CMS
7. 7. Les bibliothèques ou frameworks JavaScript ou CSS
   1. 7.1 Une page responsive avec les grilles CSS
   2. 7.2 L'équivalent de code jQuery en JavaScript natif
      1. 7.2.1 De l'AJAX en JavaScript natif
      2. 7.2.2 La manipulation du DOM
8. 8. Les feuilles de style
   1. 8.1 La séparation du fond et de la forme
   2. 8.2 Le nombre de feuilles de style
   3. 8.3 Les propriétés raccourcies
      1. 8.3.1 La propriété background
      2. 8.3.2 La propriété font
      3. 8.3.3 Les propriétés margin et padding
      4. 8.3.4 La propriété border-radius
   4. 8.4 Les animations
9. 9. L’impression
   1. 9.1 La feuille de style pour l'impression
   2. 9.2 Les éléments à ne pas imprimer
   3. 9.3 Les marges
   4. 9.4 Les liens
10. 10. Le décommissionnement
11. 11. L'étude d'un cas pratique
    1. 11.1 Les fonctionnalités utiles
    2. 11.2 La structuration du site
    3. 11.3 Le modèle de page et le design
    4. 11.4 La feuille de style pour les écrans
    5. 11.5 La feuille de style pour l'impression
    6. 11.6 Le décommissionnement

Le texte

1. 1. Introduction
2. 2. La langue
3. 3. Le contraste
4. 4. La mise en forme
   1. 4.1 La taille de la police
   2. 4.2 La largeur du texte
5. 5. Les polices de caractères
   1. 5.1 Le nombre de polices de caractères
   2. 5.2 Le choix d'une police de caractères
   3. 5.3 Les effets de style
6. 6. L'impression
   1. 6.1 Les polices de caractères économes en encre
   2. 6.2 La couleur d'impression
7. 7. L'écriture inclusive
8. 8. La simplification
   1. 8.1 Les phrases et le vocabulaire
   2. 8.2 La mise en forme
   3. 8.3 La page web
9. 9. L'étude du cas pratique
   1. 9.1 La langue
   2. 9.2 Le contraste
   3. 9.3 La taille de la police
   4. 9.4 La largeur du texte
   5. 9.5 Les polices de caractères
   6. 9.6 L'impression

La navigation

1. 1. Introduction
2. 2. Les liens
   1. 2.1 Les liens vides
   2. 2.2 Les liens explicites
      1. 2.2.1 Les liens explicites hors contexte
      2. 2.2.2 Les liens explicites avec contexte
      3. 2.2.3 L'attribut title sur un lien
   3. 2.3 La mise en forme du lien
   4. 2.4 Le lien actif
   5. 2.5 Les nouvelles fenêtres
3. 3. Les liens d'accès rapide
4. 4. Les systèmes de navigation
   1. 4.1 Les menus
   2. 4.2 Le moteur de recherche
   3. 4.3 Le plan de site
5. 5. Le fil d'Ariane
6. 6. L'étude d'un cas pratique
   1. 6.1 Le menu burger
   2. 6.2 Les liens d'accès rapide
   3. 6.3 Les systèmes de navigation

Les images

1. 1. Introduction
2. 2. Le nombre d'images
3. 3. Les formats d'images
   1. 3.1 Les logos, les icônes et les schémas
      1. 3.1.1 Le format SVG
      2. 3.1.2 Le format PNG
      3. 3.1.3 Les polices d'icônes
   2. 3.2 Les images animées
   3. 3.3 Les photographies
      1. 3.3.1 Le format JPEG
      2. 3.3.2 Les formats WebP et AVIF
      3. 3.3.3 Les images de fond
   4. 3.4 La transparence
4. 4. La taille
5. 5. La compression
   1. 5.1 Avec une parfaite qualité d'image
   2. 5.2 Avec une qualité dégradée
6. 6. L'automatisation de la génération des images
7. 7. Les alternatives textuelles
   1. 7.1 Les images décoratives
   2. 7.2 Les images porteuses d'informations
      1. 7.2.1 Alternative courte
      2. 7.2.2 Alternative longue
   3. 7.3 Les polices d'icônes
   4. 7.4 Les images vectorielles
   5. 7.5 Les images à zones cliquables
8. 8. Le chargement paresseux
9. 9. Les légendes
10. 10. L'étude d'un cas pratique
    1. 10.1 Le côté green IT
    2. 10.2 Le côté accessibilité

Les médias audio et vidéo

1. 1. Introduction
2. 2. L'audio
   1. 2.1 Le choix de l'algorithme de compression
   2. 2.2 Mono ou stéréo ?
   3. 2.3 Le contrôle de la lecture
      1. 2.3.1 La lecture automatique
      2. 2.3.2 Les boutons de contrôle
   4. 2.4 La transcription textuelle
3. 3. Les vidéos
   1. 3.1 Le poids des vidéos
      1. 3.1.1 La définition
      2. 3.1.2 La durée
      3. 3.1.3 Les algorithmes de compression
      4. 3.1.4 L'écoconception des vidéos
   2. 3.2 La balise <video>
   3. 3.3 L'hébergement
      1. 3.3.1 L'hébergement sur son serveur web
      2. 3.3.2 L'hébergement sur une plateforme vidéo
   4. 3.4 Le sous-titrage
      1. 3.4.1 Sur son serveur web
      2. 3.4.2 Sur une plateforme vidéo
   5. 3.5 L'audiodescription
4. 4. L'étude d'un cas pratique

Les ressources et le contenu

1. 1. Introduction
2. 2. Les tableaux
   1. 2.1 La légende
   2. 2.2 Les en-têtes de ligne et de colonne
   3. 2.3 Les fusions de colonne
   4. 2.4 L'impression
3. 3. Les cartes
4. 4. Les citations
5. 5. Les documents à télécharger
   1. 5.1 L'accessibilité
      1. 5.1.1 Le format HTML
      2. 5.1.2 Les formats bureautiques
      3. 5.1.3 Le format PDF
      4. 5.1.4 Les documents inaccessibles
   2. 5.2 L'information
   3. 5.3 La compression
      1. 5.3.1 La compression des images dans les documents bureautiques
      2. 5.3.2 La compression des fichiers
6. 6. L'étude d'un cas pratique
   1. 6.1 Les tableaux, les cartes et les citations
   2. 6.2 Les documents à télécharger

Les formulaires

1. 1. Introduction
2. 2. La conception du formulaire
   1. 2.1 Les prérequis
   2. 2.2 Les données nécessaires
   3. 2.3 L'égalité femmes-hommes
   4. 2.4 La modification possible
3. 3. Le texte autour des champs de saisie
   1. 3.1 Les labels
   2. 3.2 L'attribut aria-describedby
   3. 3.3 L'attribut placeholder
4. 4. Les regroupements de champs
   1. 4.1 Les cases à cocher
   2. 4.2 Les boutons radio
   3. 4.3 Les regroupements thématiques
5. 5. L'aide à la saisie
   1. 5.1 L'absence de saisies multiples
   2. 5.2 La sélection dans une liste à la place de la saisie
   3. 5.3 La saisie automatique
      1. 5.3.1 Les nouvelles valeurs de l'attribut autocomplete
      2. 5.3.2 L'activation et l'enregistrement des informations dans Firefox
      3. 5.3.3 La création d'un formulaire à complétion automatique
6. 6. Les boutons
   1. 6.1 Les boutons sans texte
   2. 6.2 Le texte des boutons
7. 7. La validation
   1. 7.1 Les mesures préventives
      1. 7.1.1 Les champs obligatoires
      2. 7.1.2 Le format attendu
   2. 7.2 La validation côté client
      1. 7.2.1 La validation par les attributs
      2. 7.2.2 La validation avec du code JavaScript
   3. 7.3 La validation côté serveur
8. 8. Les captchas
9. 9. La mise en forme du formulaire
   1. 9.1 Les champs de saisie et leurs labels
   2. 9.2 Les messages d'erreur
10. 10. L'étude d'un cas pratique

Les traitements

1. 1. Introduction
2. 2. Les traitements côté client
   1. 2.1 L'évitement des traitements en JavaScript
   2. 2.2 Le contrôle qualité du code JavaScript
   3. 2.3 L'efficacité du code JavaScript
      1. 2.3.1 Le chronométrage
      2. 2.3.2 La modification du DOM
   4. 2.4 L'accessibilité
      1. 2.4.1 La maîtrise par l'utilisateur
      2. 2.4.2 Le positionnement du contenu qui apparaît
      3. 2.4.3 Les pièges au clavier
   5. 2.5 Les composants ARIA
3. 3. Les traitements côté serveur
   1. 3.1 Le chronométrage
   2. 3.2 L'optimisation de la charge du serveur
      1. 3.2.1 La charge CPU
      2. 3.2.2 La mémoire
      3. 3.2.3 La charge réseau
4. 4. L'étude d'un cas pratique
   1. 4.1 Le menu burger
   2. 4.2 Les traitements en PHP
   3. 4.3 La minification et la compression

Les bases de données

1. 1. Introduction
2. 2. La conception de la base de données
   1. 2.1 Le choix du système de gestion de base de données
   2. 2.2 Le choix du moteur de stockage
   3. 2.3 Les types de données
      1. 2.3.1 Les entiers
      2. 2.3.2 Les dates
      3. 2.3.3 Les chaînes de caractères
   4. 2.4 Les clés primaires
   5. 2.5 Les jointures
   6. 2.6 Les index
   7. 2.7 Les index pour la recherche textuelle
3. 3. Les procédures et les fonctions stockées
   1. 3.1 Les avantages
   2. 3.2 La mise en place
   3. 3.3 La gestion des collections
4. 4. L'optimisation des requêtes
   1. 4.1 Le nombre de colonnes
   2. 4.2 Le nombre de lignes
      1. 4.2.1 La clause LIMIT
      2. 4.2.2 La pagination des résultats du moteur de recherche
   3. 4.3 Les sous-requêtes corrélées
5. 5. L'étude d'un cas pratique

L’hébergeur et le paramétrage du serveur web

1. 1. Introduction
2. 2. Le choix de l'hébergeur
   1. 2.1 L'efficacité énergétique
   2. 2.2 Les sources d'approvisionnement électrique
   3. 2.3 La compensation carbone
   4. 2.4 La récupération de la chaleur dégagée
   5. 2.5 La politique d'achat
   6. 2.6 La politique de renouvellement du matériel
   7. 2.7 La localisation
   8. 2.8 Le respect des données
   9. 2.9 Les hébergeurs indépendants
   10. 2.10 Les comparatifs
3. 3. Le paramétrage du serveur
   1. 3.1 Le certificat SSL
      1. 3.1.1 La mise en place sur un serveur dédié
      2. 3.1.2 L'obligation de passer par HTTPS
   2. 3.2 Le cache
      1. 3.2.1 Le cache du navigateur
      2. 3.2.2 Le cache du serveur web
      3. 3.2.3 Le cache de PHP
      4. 3.2.4 Le cache du serveur de base de données
4. 4. L'étude d'un cas pratique
   1. 4.1 L'hébergement
   2. 4.2 Le paramétrage

Annexes

1. 1. Liens et sources
2. 2. Déclaration d’accessibilité RGAA
6. Index