Préface de Vincent Courboulay - Directeur Scientifique de

ISBN

: 97

8-2-

409-

0330

3-2

29,9

0 €

L’écoconception et l’accessibilité des sites web sont des défis ma-jeurs que les entreprises doivent désormais relever. Ce livre à l’ap-proche très pragmatique et concrète est fait pour former et transmettre aux développeurs et développeuses web les bonnes pratiques en ma-tière d’écoconception et d’accessibilité numérique.

Le livre s’ouvre sur un premier chapitre introduisant les différentes facettes du Numérique Responsable afin de bien comprendre les en-jeux 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, formu-laires…) les bonnes pratiques à utiliser et surtout comment les mettre en œuvre.

Deux chapitres sont axés sur le green IT pour montrer comment effec-tuer 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 para-métrage du serveur web.

En complément de ce livre, 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 livre pour illustrer les propos des différents chapitres.

Green IT et accessibilitéDéveloppez votre site web Numérique ResponsablePréface de Vincent Courboulay - Directeur Scientifique de l’Institut du Numérique Responsable

Pour plus d’informations :

Hervé BOISGONTIER

Formateur en développement informatique sur différents langages de programmation depuis près de 10 ans, Hervé BOIS-GONTIER est intéressé depuis longtemps par le développement durable. À ce titre, il a suivi les formations Ecoconception de services numériques par GreenIT.fr et Développer des sites web accessibles par Access42 et obtenu les certifications asso-ciées. Avec ce livre, il a cœur aujourd’hui de transmettre à ses étudiants ainsi qu’aux lecteurs de ce livre la façon de mettre en pratique l’écoconception dans le métier d’informaticien ou d’informaticienne.

Téléchargementwww.editions-eni.fr.fr

sur www.editions-eni.fr : b Exemples développés dans le livre.

Gre

en IT

et a

cces

sibi

lité

Hervé BOISGONTIER

Green IT et accessibilité

Développez votre site web Numérique Responsable

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

En téléchargement

exemples

Les droits d’auteur de ce livre seront reversés en faveur de différentes asso-

ciations humanitaires ou causes en faveur de la protection de la planète et des personnes en situation de handicap.

+ QUIZ

RI_PT_NL_K.indd 62RI_PT_NL_K.indd 62 28/09/2021 14:34:5428/09/2021 14:34:54

1Table des matières

Préface

Avant-propos

Chapitre 1Introduction au numérique responsable

1. Le développement durable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

2. Le green IT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162.1 La multiplication des équipements informatiques. . . . . . . . . . . 162.2 La fabrication des équipements informatiques. . . . . . . . . . . . . . 172.3 La consommation d'électricité . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Les éléments à télécharger sont disponibles à l'adresse suivante :http://www.editions-eni.fr

Saisissez la référence ENI de l'ouvrage RIGREEN dans la zone de recherche et validez. Cliquez sur le titre du livre puis sur le bouton de téléchargement.

2.4 La fin de vie des équipements informatiques . . . . . . . . . . . . . . . 182.5 Le traitement des déchets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182.6 Le green for IT. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192.7 L'IT for green. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

3. L'accessibilité. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203.1 Les différents types de déficiences. . . . . . . . . . . . . . . . . . . . . . . . 21

3.1.1 Les déficiences visuelles . . . . . . . . . . . . . . . . . . . . . . . . . . . 213.1.2 Les déficiences auditives. . . . . . . . . . . . . . . . . . . . . . . . . . . 233.1.3 Les déficiences motrices . . . . . . . . . . . . . . . . . . . . . . . . . . . 243.1.4 Les déficiences intellectuelles. . . . . . . . . . . . . . . . . . . . . . . 253.1.5 Les déficiences cognitives . . . . . . . . . . . . . . . . . . . . . . . . . . 263.1.6 Le polyhandicap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

lcroise

Tampon

2

3.2 La fracture numérique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263.3 Les référentiels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

3.3.1 Le référentiel au niveau mondial . . . . . . . . . . . . . . . . . . . . 273.3.2 Le cadre réglementaire en France. . . . . . . . . . . . . . . . . . . . 283.3.3 Les référentiels dans les pays francophones . . . . . . . . . . . 28

4. La performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

5. Le numérique responsable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

Chapitre 2L'audit d'un site existant

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

2. Les cadres des audits. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322.1 L'accessibilité. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

2.1.1 Le WCAG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322.1.2 Le RGAA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

2.2 Le green IT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

3. Les outils automatisés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363.1 La validité du code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363.2 L'accessibilité. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

3.2.1 Tanaguru. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363.2.2 Les outils de développement

et les plug-ins des navigateurs . . . . . . . . . . . . . . . . . . . . . . 393.3 Le green IT et la performance . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

3.3.1 Ecometer, Ecoindex et GreenITAnalysis. . . . . . . . . . . . . . 423.3.2 Carbonalyser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443.3.3 Greenspector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453.3.4 Lighthouse. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453.3.5 Les outils de développement . . . . . . . . . . . . . . . . . . . . . . . 46


4. La labélisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464.1 Le RGAA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464.2 Les normes volontaires pour des services

numériques écoresponsables . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

Chapitre 3La conception du site

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

2. Les fonctionnalités utiles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

3. La structuration du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 503.1 La profondeur du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 503.2 L'historique de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 503.3 La personnalisation des pages d'erreur . . . . . . . . . . . . . . . . . . . . 51

4. La structuration d'une page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 534.1 Les lecteurs d'écran . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 534.2 Les titres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 534.3 Le rôle des balises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

4.3.1 Les balises sémantiques HTML5 . . . . . . . . . . . . . . . . . . . . 554.3.2 Les landmarks ARIA. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

4.4 Le modèle de page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

5. Le design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 585.1 Le style sans avoir recours aux images . . . . . . . . . . . . . . . . . . . . 585.2 Le responsive web design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 595.3 La gestion du zoom . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 605.4 Le choix des couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

6. Le choix du langage, du framework web ou du CMS . . . . . . . . . . . . 63

7. Les bibliothèques ou frameworks JavaScript ou CSS. . . . . . . . . . . . . 647.1 Une page responsive avec les grilles CSS. . . . . . . . . . . . . . . . . . . 657.2 L'équivalent de code jQuery en JavaScript natif. . . . . . . . . . . . . 70

7.2.1 De l'AJAX en JavaScript natif . . . . . . . . . . . . . . . . . . . . . . 707.2.2 La manipulation du DOM . . . . . . . . . . . . . . . . . . . . . . . . . 71

4

8. Les feuilles de style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 728.1 La séparation du fond et de la forme. . . . . . . . . . . . . . . . . . . . . . 728.2 Le nombre de feuilles de style . . . . . . . . . . . . . . . . . . . . . . . . . . . 738.3 Les propriétés raccourcies. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

8.3.1 La propriété background . . . . . . . . . . . . . . . . . . . . . . . . . . 738.3.2 La propriété font. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 748.3.3 Les propriétés margin et padding . . . . . . . . . . . . . . . . . . . 748.3.4 La propriété border-radius . . . . . . . . . . . . . . . . . . . . . . . . . 75

8.4 Les animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

9. L’impression . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 769.1 La feuille de style pour l'impression . . . . . . . . . . . . . . . . . . . . . . 769.2 Les éléments à ne pas imprimer. . . . . . . . . . . . . . . . . . . . . . . . . . 779.3 Les marges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 789.4 Les liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

10. Le décommissionnement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

11. L'étude d'un cas pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8011.1 Les fonctionnalités utiles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
11.2 La structuration du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8111.3 Le modèle de page et le design . . . . . . . . . . . . . . . . . . . . . . . . . . . 8111.4 La feuille de style pour les écrans. . . . . . . . . . . . . . . . . . . . . . . . . 8411.5 La feuille de style pour l'impression . . . . . . . . . . . . . . . . . . . . . . 8611.6 Le décommissionnement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Chapitre 4Le texte

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

2. La langue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

3. Le contraste. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

4. La mise en forme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 904.1 La taille de la police. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 904.2 La largeur du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90


5. Les polices de caractères . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 915.1 Le nombre de polices de caractères . . . . . . . . . . . . . . . . . . . . . . . 915.2 Le choix d'une police de caractères . . . . . . . . . . . . . . . . . . . . . . . 925.3 Les effets de style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

6. L'impression . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 946.1 Les polices de caractères économes en encre. . . . . . . . . . . . . . . . 946.2 La couleur d'impression . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

7. L'écriture inclusive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

8. La simplification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 998.1 Les phrases et le vocabulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . 1008.2 La mise en forme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1018.3 La page web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103

9. L'étude du cas pratique. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1079.1 La langue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1079.2 Le contraste. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1079.3 La taille de la police. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1079.4 La largeur du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
9.5 Les polices de caractères . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1089.6 L'impression . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Chapitre 5La navigation

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109

2. Les liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1092.1 Les liens vides . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1092.2 Les liens explicites. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110

2.2.1 Les liens explicites hors contexte. . . . . . . . . . . . . . . . . . . 1102.2.2 Les liens explicites avec contexte. . . . . . . . . . . . . . . . . . . 1112.2.3 L'attribut title sur un lien. . . . . . . . . . . . . . . . . . . . . . . . . 112

2.3 La mise en forme du lien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1122.4 Le lien actif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114

6

2.5 Les nouvelles fenêtres. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

3. Les liens d'accès rapide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

4. Les systèmes de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1184.1 Les menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1184.2 Le moteur de recherche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1204.3 Le plan de site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

5. Le fil d'Ariane . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121

6. L'étude d'un cas pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1226.1 Le menu burger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1226.2 Les liens d'accès rapide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1266.3 Les systèmes de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

Chapitre 6Les images

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129

2. Le nombre d'images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129

3. Les formats d'images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1303.1 Les logos, les icônes et les schémas . . . . . . . . . . . . . . . . . . . . . . 130

3.1.1 Le format SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1303.1.2 Le format PNG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1323.1.3 Les polices d'icônes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132

3.2 Les images animées. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1323.3 Les photographies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134

3.3.1 Le format JPEG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1343.3.2 Les formats WebP et AVIF. . . . . . . . . . . . . . . . . . . . . . . . 1343.3.3 Les images de fond . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136

3.4 La transparence. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139

4. La taille . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140


5. La compression . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1415.1 Avec une parfaite qualité d'image . . . . . . . . . . . . . . . . . . . . . . . 1415.2 Avec une qualité dégradée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142

6. L'automatisation de la génération des images . . . . . . . . . . . . . . . . . 143

7. Les alternatives textuelles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1447.1 Les images décoratives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1447.2 Les images porteuses d'informations. . . . . . . . . . . . . . . . . . . . . 146

7.2.1 Alternative courte. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1467.2.2 Alternative longue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148

7.3 Les polices d'icônes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1507.4 Les images vectorielles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1507.5 Les images à zones cliquables. . . . . . . . . . . . . . . . . . . . . . . . . . . 152

8. Le chargement paresseux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

9. Les légendes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156

10. L'étude d'un cas pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15810.1 Le côté green IT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15810.2 Le côté accessibilité. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158

Chapitre 7Les médias audio et vidéo

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159

2. L'audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1592.1 Le choix de l'algorithme de compression. . . . . . . . . . . . . . . . . . 1602.2 Mono ou stéréo ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1612.3 Le contrôle de la lecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162

2.3.1 La lecture automatique . . . . . . . . . . . . . . . . . . . . . . . . . . 1622.3.2 Les boutons de contrôle . . . . . . . . . . . . . . . . . . . . . . . . . . 162

2.4 La transcription textuelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166

8

3. Les vidéos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1673.1 Le poids des vidéos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167

3.1.1 La définition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1673.1.2 La durée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1693.1.3 Les algorithmes de compression . . . . . . . . . . . . . . . . . . . 1693.1.4 L'écoconception des vidéos . . . . . . . . . . . . . . . . . . . . . . . 171

3.2 La balise <video>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1723.3 L'hébergement. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173

3.3.1 L'hébergement sur son serveur web . . . . . . . . . . . . . . . . 1733.3.2 L'hébergement sur une plateforme vidéo . . . . . . . . . . . . 173

3.4 Le sous-titrage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1743.4.1 Sur son serveur web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1743.4.2 Sur une plateforme vidéo . . . . . . . . . . . . . . . . . . . . . . . . . 177

3.5 L'audiodescription. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178

4. L'étude d'un cas pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178

Chapitre 8
Les ressources et le contenu
1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179

2. Les tableaux. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1792.1 La légende . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1802.2 Les en-têtes de ligne et de colonne . . . . . . . . . . . . . . . . . . . . . . 1802.3 Les fusions de colonne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1822.4 L'impression . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185

3. Les cartes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187

4. Les citations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188

5. Les documents à télécharger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1895.1 L'accessibilité. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189

5.1.1 Le format HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1895.1.2 Les formats bureautiques . . . . . . . . . . . . . . . . . . . . . . . . . 1895.1.3 Le format PDF. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190


5.1.4 Les documents inaccessibles . . . . . . . . . . . . . . . . . . . . . . 1905.2 L'information . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1905.3 La compression . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191

5.3.1 La compression des images dans les documents bureautiques . . . . . . . . . . . . . . . . . . 191

5.3.2 La compression des fichiers . . . . . . . . . . . . . . . . . . . . . . . 192

6. L'étude d'un cas pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1936.1 Les tableaux, les cartes et les citations . . . . . . . . . . . . . . . . . . . 1936.2 Les documents à télécharger . . . . . . . . . . . . . . . . . . . . . . . . . . . 193

Chapitre 9Les formulaires

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197

2. La conception du formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1972.1 Les prérequis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1972.2 Les données nécessaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1982.3 L'égalité femmes-hommes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
2.4 La modification possible. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
3. Le texte autour des champs de saisie. . . . . . . . . . . . . . . . . . . . . . . . . 1993.1 Les labels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2003.2 L'attribut aria-describedby . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2013.3 L'attribut placeholder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201

4. Les regroupements de champs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2024.1 Les cases à cocher . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2024.2 Les boutons radio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2034.3 Les regroupements thématiques . . . . . . . . . . . . . . . . . . . . . . . . 204

5. L'aide à la saisie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2065.1 L'absence de saisies multiples. . . . . . . . . . . . . . . . . . . . . . . . . . . 2065.2 La sélection dans une liste à la place de la saisie . . . . . . . . . . . . 208

10

5.3 La saisie automatique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2105.3.1 Les nouvelles valeurs de l'attribut autocomplete . . . . . . 2105.3.2 L'activation et l'enregistrement

des informations dans Firefox . . . . . . . . . . . . . . . . . . . . . 2115.3.3 La création d'un formulaire

à complétion automatique. . . . . . . . . . . . . . . . . . . . . . . . 213

6. Les boutons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2146.1 Les boutons sans texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2146.2 Le texte des boutons. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215

7. La validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2167.1 Les mesures préventives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216

7.1.1 Les champs obligatoires . . . . . . . . . . . . . . . . . . . . . . . . . . 2167.1.2 Le format attendu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218

7.2 La validation côté client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2207.2.1 La validation par les attributs . . . . . . . . . . . . . . . . . . . . . 2207.2.2 La validation avec du code JavaScript . . . . . . . . . . . . . . . 221

7.3 La validation côté serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222

8. Les captchas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224

9. La mise en forme du formulaire. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2289.1 Les champs de saisie et leurs labels . . . . . . . . . . . . . . . . . . . . . . 2289.2 Les messages d'erreur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229


Chapitre 10Les traitements

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235

2. Les traitements côté client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2352.1 L'évitement des traitements en JavaScript . . . . . . . . . . . . . . . . 2352.2 Le contrôle qualité du code JavaScript . . . . . . . . . . . . . . . . . . . 237

1
2.3 L'efficacité du code JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . 2382.3.1 Le chronométrage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2382.3.2 La modification du DOM . . . . . . . . . . . . . . . . . . . . . . . . 239

2.4 L'accessibilité. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2402.4.1 La maîtrise par l'utilisateur . . . . . . . . . . . . . . . . . . . . . . . 2402.4.2 Le positionnement du contenu qui apparaît . . . . . . . . . 2402.4.3 Les pièges au clavier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241

2.5 Les composants ARIA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245

3. Les traitements côté serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2523.1 Le chronométrage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2523.2 L'optimisation de la charge du serveur . . . . . . . . . . . . . . . . . . . 253

3.2.1 La charge CPU. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2533.2.2 La mémoire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2543.2.3 La charge réseau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254

4. L'étude d'un cas pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2554.1 Le menu burger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2554.2 Les traitements en PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2574.3 La minification et la compression . . . . . . . . . . . . . . . . . . . . . . . 257

Chapitre 11Les bases de données

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259

2. La conception de la base de données . . . . . . . . . . . . . . . . . . . . . . . . . 2592.1 Le choix du système de gestion de base de données. . . . . . . . . 2602.2 Le choix du moteur de stockage . . . . . . . . . . . . . . . . . . . . . . . . 2602.3 Les types de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261

2.3.1 Les entiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2612.3.2 Les dates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2622.3.3 Les chaînes de caractères . . . . . . . . . . . . . . . . . . . . . . . . . 262

2.4 Les clés primaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2622.5 Les jointures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263

12

2.6 Les index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2632.7 Les index pour la recherche textuelle . . . . . . . . . . . . . . . . . . . . 264

3. Les procédures et les fonctions stockées . . . . . . . . . . . . . . . . . . . . . . 2663.1 Les avantages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2663.2 La mise en place . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2673.3 La gestion des collections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269

4. L'optimisation des requêtes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2734.1 Le nombre de colonnes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2734.2 Le nombre de lignes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273

4.2.1 La clause LIMIT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2734.2.2 La pagination des résultats du moteur de recherche . . . 274

4.3 Les sous-requêtes corrélées. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277


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

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279

2. Le choix de l'hébergeur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2792.1 L'efficacité énergétique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2792.2 Les sources d'approvisionnement électrique . . . . . . . . . . . . . . . 2802.3 La compensation carbone. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2812.4 La récupération de la chaleur dégagée . . . . . . . . . . . . . . . . . . . . 2812.5 La politique d'achat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2812.6 La politique de renouvellement du matériel . . . . . . . . . . . . . . . 2812.7 La localisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2822.8 Le respect des données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2822.9 Les hébergeurs indépendants . . . . . . . . . . . . . . . . . . . . . . . . . . . 2822.10 Les comparatifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283

3
3. Le paramétrage du serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2853.1 Le certificat SSL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285

3.1.1 La mise en place sur un serveur dédié . . . . . . . . . . . . . . . 2853.1.2 L'obligation de passer par HTTPS . . . . . . . . . . . . . . . . . . 286

3.2 Le cache . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2873.2.1 Le cache du navigateur . . . . . . . . . . . . . . . . . . . . . . . . . . . 2873.2.2 Le cache du serveur web. . . . . . . . . . . . . . . . . . . . . . . . . . 2893.2.3 Le cache de PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2903.2.4 Le cache du serveur de base de données . . . . . . . . . . . . . 290

4. L'étude d'un cas pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2904.1 L'hébergement. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2904.2 Le paramétrage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291

Annexes1. Liens et sources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293

2. Déclaration d’accessibilité RGAA . . . . . . . . . . . . . . . . . . . . . . . . . . . 300

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323

14

47

Chapitre 3La conception du site

La conception du site1. IntroductionLa conception du site est une étape cruciale pour créer un service numériqueavec une faible empreinte environnementale. Les plus gros leviers de gaingreen IT sont accessibles durant cette étape. Par la suite, il sera possibled'effectuer des améliorations, mais elles auront des impacts beaucoup plusfaibles.

La conception d'un service numérique peut s'appuyer sur des solutions utili-sant peu de technologies ou des technologies anciennes et avec un faibleimpact écologique. Ces solutions sont dites low-tech (par opposition à high-tech). Par exemple, ce peut être un service numérique consultable même sur unmatériel ancien ou avec un réseau de faible débit…

Il est également possible de recourir à des solutions n'utilisant pas du tout detechnologie : c'est la no-tech. Par exemple, l'utilisation de chiens pour détecterprécocement, à l'odeur, certains cancers donne de meilleurs résultats qu'uneintelligence artificielle.

lcroise

Tampon

© E

diti

ons

ENI -

All

righ

ts r

eser

ved

48Développez votre site web Numérique Responsable


Bien souvent, les meilleures solutions allient plusieurs niveaux technologiquesparmi les trois (no-tech, low-tech et high-tech). Il existe au Rwanda et auGhana des drones assurant des livraisons de sang, de médicaments et devaccins à des communautés éloignées. Les commandes sont passées par SMS,ce qui est une bonne solution puisque ces pays n'ont pas une couverturesuffisante pour utiliser Internet. La solution alliant high-tech (drone) et low-tech (SMS) est très écologique puisqu'elle a une empreinte environnementalebien moindre que l'acheminement par voie terrestre et elle permet de sauverbeaucoup de vies grâce à une bien meilleure rapidité de livraison.

Lorsque le service numérique est repensé de fond en comble pour trouver unesolution novatrice et à fort impact écologique, cela se nomme une action defacteur 4, par opposition à une action ayant un impact plus faible dite defacteur 1.

Pour illustrer cela de manière imagée, prenons l'exemple d'un déplacementavec un véhicule. La voiture thermique correspond à une solution qui n'a pasété écoconçue. La voiture électrique est une solution de facteur 1 : elle neremet pas en question l'utilisation de la voiture, mais elle cherche à optimiserle déplacement écologiquement parlant. Enfin, l'utilisation d'un vélo est unesolution de facteur 4 : l'impact est réduit drastiquement.

Dans nos choix, il faut se méfier des reports. Cela peut se produire lorsqu'unesolution réduit l'empreinte environnementale directe, mais augmentel'empreinte indirecte. C'est par exemple le cas d'un véhicule électrique. Àl'usage, son empreinte est bien moindre par rapport à un véhicule thermique,mais il faut créer et recycler la batterie du véhicule, ce qui est plus polluant quela création et le recyclage d'un réservoir de carburant.

Enfin, une solution peut être globalement meilleure, mais si son utilisation estdécuplée, au final elle aura une empreinte écologique plus importante. C'estpar exemple ce qui s'est passé avec la mise en place de la 5G en Corée du Sud.

49La conception du siteChapitre 3

2. Les fonctionnalités utilesDans un article de son blog (https://lebondigital.com), Alizée Colin écrit : "Unsite est fini lorsqu’il n’y a plus rien à enlever – et non à ajouter." Cette phrasesurprenante résume très bien la qualité première attendue d'un site internetécoconçu : la frugalité. Nous avons tous tendance à vouloir enrichir nos sitesinternet de nouvelles fonctionnalités, de nouvelles pages. Le terme "enrichir"laisse entendre que le site s'améliore, mais en fait c'est comme les alimentstrop riches : ils font grossir, avec à la clé une surcharge pondérale, voire uneobésité ! Les logiciels et en particulier les sites internet en sont sujetségalement : on parle d'ailleurs d'obésiciel et de gras numérique ! Il est doncnécessaire de faire subir une cure d'amincissement à nos sites existants et defaire attention au régime alimentaire de nos futures créations.

Près de la moitié (45 %) des fonctionnalités d'une application ne sont jamaisou sont très rarement utilisées. Il est donc stratégiquement plus intéressant dese concentrer sur les fonctionnalités vraiment utiles. Moins de lignes de codeà produire, c'est plus de temps à consacrer à la qualité du code, à l'accessibilité,à la sécurité, au respect des règles du green IT…

Cette bonne pratique est difficile à mettre en œuvre, car il faut convaincre sesclients, sa hiérarchie et ses collègues et faire preuve de beaucoup de pédagogie !Pourtant, sur le papier, c'est ce qu'il y a de plus simple à réaliser puisque,justement, il y a moins de choses à créer. Et, sans l'ombre d'un doute, c'estcette bonne pratique qui a le plus gros impact sur l'empreinte numérique dusite internet ! Comme quoi, la paresse est une bien belle qualité !

Pour chaque page internet ou fonctionnalité, il est important de se poser laquestion de sa réelle utilité, et une fois en ligne ou en service, de consulter lesstatistiques d'utilisation pour vérifier sa pertinence.

RemarqueIl est préférable d'adopter une approche "mobile first", c'est-à-dire deconcevoir le site en premier lieu pour les smartphones avant d'envisager lesplus grands écrans. La faible taille de l'écran nous incite à nous concentrer surl'essentiel.

© E

diti

ons

ENI -

All

righ

ts r

eser

ved



3. La structuration du siteUne fois le contenu réellement utile trouvé, il faut se poser la question del'organisation de celui-ci dans les différentes pages du site. Quelles pages faut-il créer ? Comment naviguer de l'une à l'autre ? Cette section répond à cesquestions.

3.1 La profondeur du site

La profondeur d'un site internet est le nombre de clics nécessaires pouraccéder à l'une de ses pages depuis la page d'accueil. Par exemple, sur un sited'e-commerce, il peut être nécessaire d'effectuer un premier clic sur unecatégorie, puis un second sur un article pour pouvoir visualiser la pagedétaillant les caractéristiques de ce produit. La profondeur est alors de 2.

Il faut veiller à ce que cette profondeur soit la plus faible possible. Cela est bonà tous points de vue. La personne rencontrant des difficultés à naviguer surInternet en raison d'une déficience sera heureuse d'accéder rapidement et sim-plement à l'information souhaitée. Ensuite, le nombre de pages demandées etde ressources téléchargées sera faible, donc bon d'un point de vue green IT.Enfin, cela améliorera le référencement naturel. Une profondeur de 1 ou 2 estsouhaitable pour un petit site et cela peut aller jusqu'à 4 pour un gros site.

3.2 L'historique de navigation

Pour ne pas dérouter les internautes, il est important de respecter l'historiquede navigation. C'est-à-dire que lorsque l'internaute demande à son navigateurde revenir à la page précédente, il doit retrouver la page précédemment consul-tée. Dans la plupart des cas, cela se fait naturellement. Mais pas sur un siteweb monopage (SPA - Single Page Application) : l'internaute reste toujours surune seule et même page, le contenu évolue avec des requêtes asynchrones(AJAX) en fonction des actions du visiteur. Il est alors nécessaire de manipulermanuellement l'historique de navigation. En JavaScript, cela peut être réaliségrâce à la fonction history.pushState(). Il faut également écouter l'évè-nement window.onpopstate (déclenché lors d'un retour en arrière dansl'historique) pour restituer la page attendue.

51La conception du siteChapitre 3

Il est également nécessaire de modifier la valeur de la balise <title> afind'aider l'utilisateur à se repérer dans sa navigation. Cela se fait avec la proprié-té document.title en JavaScript.

3.3 La personnalisation des pages d'erreur

Il est très classique de personnaliser la page d'erreur 404 retournée quand laressource demandée n'existe pas. Néanmoins, il est important que cette pagesoit la plus simple et légère possible. Le seul message à indiquer est que l'inter-naute demande une page qui n'existe pas ! Il en est de même pour les autrespages d'erreur. Même s'il est tentant de faire une page web dynamique pourmutualiser le code, il est préférable de faire des pages web statiques pouralléger la charge du serveur.

Voici un exemple avec un serveur Apache :

Fichier .htaccess à la racine du site :

ErrorDocument 403 /erreur403.htmlErrorDocument 404 /erreur404.htmlErrorDocument 500 /erreur500.html

Fichier erreur403.html à la racine du site :

<!DOCTYPE html><html lang="fr">

<head><meta charset="UTF-8"><meta name="robots" content="noindex"><meta name="viewport" content="width=device-width,

initial-scale=1.0"><title>Accès interdit</title>

</head><body><h1>Vous n'êtes pas autorisé à accéder à cette page !</h1><a href="/">Retour à la page d'accueil</a>

</body></html>

© E

diti

ons

ENI -

All

righ

ts r

eser

ved




<!DOCTYPE html><html lang="fr"><head>

<meta charset="UTF-8"><meta name="robots" content="noindex"><meta name="viewport" content="width=device-width,

initial-scale=1.0"><title>Page non trouvée</title>

</head><body>

<h1>La page demandée n'existe pas !</h1><a href="/">Retour à la page d'accueil</a>

</body></html>


<!DOCTYPE html><html lang="fr"><head>

<meta charset="UTF-8"><meta name="robots" content="noindex"><meta name="viewport" content="width=device-width,

initial-scale=1.0"><title>Problème sur le serveur</title>

</head><body>

<h1>Notre site web a rencontré une erreur !</h1><a href="/">Retour à la page d'accueil</a>

</body></html>

Documents

Préface de Vincent Courboulay - Directeur Scientifique de