TP – Auditer et alléger le portail

BTS SIO SISR 2e année – Bloc 1 – S15 – binôme

Note

But. Tu audites une page de contact, tu la corriges, tu calcules des contrastes, tu mesures le poids du portail et l'effet de la compression, puis tu appliques des critères d'éco-conception.

Durée : 2 h 50 (parties A à E), plus le bilan. Prérequis : cours S15 lu. Fichiers : page à auditer, outil d'audit, pages du portail (salles.html, style.css, salles.js). Outils : un navigateur, Node.js (npm install jsdom), gzip, wc.

Note

Comment ce TP fonctionne. Avant chaque manipulation, tu écris ce que tu anticipes (« J'anticipe »). Puis tu confrontes avec les éléments de réponse.

Binôme : ____________ / ____________

Partie A – Audit manuel (≈ 40 min)

Ouvre accessibilite_defauts.html dans un navigateur.

Clavier. Sans utiliser la souris, fais défiler les éléments avec la touche Tab. Peut-on atteindre et activer le bouton « Envoyer » ? ______
Zoom. Agrandis la page à 200 %. Le contenu reste-t-il lisible et complet ? ______
Lecture du code. Relève dans le code tous les défauts que tu repères (liste libre, au moins cinq).
Contraste. Le texte « Réponse sous deux jours ouvrés » est en #999999 sur fond blanc. Calcule le rapport de contraste (outil de contrôle de contraste ou formule du cours) et dis s'il est suffisant pour du texte courant. ______

J'anticipe. Combien de défauts penses-tu trouver ? Lesquels l'outil automatique manquera-t-il probablement ? ______________________

Éléments de réponse

Le « bouton » est un div : il n'est pas atteint par Tab. Défauts à relever : voir le corrigé de l'enseignant. Le contraste calculé est bien inférieur à 4,5:1.

Partie B – Audit automatique et correction (≈ 40 min)

Installe jsdom (npm install jsdom) puis lance node audit.js accessibilite_defauts.html. Combien de problèmes sont détectés ? Recopie-les.
Relie chaque problème à l'un des quatre principes (perceptible, utilisable, compréhensible, robuste).
Compare avec ta liste de la partie A : quel défaut l'outil ne voit-il pas ? Pourquoi ?
Corrige la page (copie accessibilite_defauts.html sous un autre nom). Relance l'outil jusqu'à « Aucun problème détecté ». Corrige aussi le contraste et vérifie le clavier à la main.
Lance l'outil sur salles.html (le portail). Que conclus-tu ?

J'anticipe. L'outil donnera-t-il « aucun problème » sur la page du portail ? Est-ce suffisant pour déclarer le portail accessible ? ______

Éléments de réponse

Sept problèmes sont détectés ; le contraste n'en fait pas partie. Un résultat « aucun problème » sur cinq contrôles ne prouve pas la conformité : il reste le clavier, le zoom, le sens des textes alternatifs, le lecteur d'écran, et beaucoup d'autres critères.

Partie C – Le contraste, par le calcul (≈ 20 min)

Pour une couleur #RRGGBB, chaque composante c (entre 0 et 1) est d'abord transformée : si c ≤ 0,03928, c/12,92 ; sinon ((c + 0,055) / 1,055)^2,4. La luminance est L = 0,2126 R + 0,7152 V + 0,0722 B.

Écris (en Python ou JavaScript) une fonction qui calcule le rapport de contraste de deux couleurs.
Calcule le rapport pour : #999999 sur #ffffff ; #595959 sur #ffffff ; #767676 sur #ffffff ; #ffffff sur #1f4e79. Lesquels respectent le minimum de 4,5:1 ?
Le gris #767676 te semble-t-il un choix prudent pour un texte de 14 pixels ? Pourquoi garder une marge ?

Partie D – Peser le portail (≈ 30 min)

Mesure la taille de chaque fichier (wc -c < fichier) et sa taille compressée (gzip -9 -n -c < fichier | wc -c). Remplis :

Fichier	Octets	Compressé
`salles.html`
`style.css`
`salles.js`
Total

Quelle est l'économie apportée par la compression, en pourcentage ?
Combien de requêtes faut-il pour afficher la page (hors favicon.ico) ?
Le journal de S13 comptait 381 pages vues en une semaine. En supposant le même trafic toute l'année (52 semaines) et sans cache, calcule le volume annuel transféré par les pages vues avec les fichiers compressés. Compare avec une version de la page qui embarquerait une image de 1,5 Mo non optimisée (on garde le même nombre de vues). Quel est le rapport ?
Quelles trois actions réduiraient encore le poids ou les requêtes du portail ?

J'anticipe. La compression fera-t-elle gagner plus ou moins de la moitié ? ______

Éléments de réponse

À contrôler : les trois fichiers sont des textes, qui se compressent bien ; le calcul annuel est une extrapolation grossière (ordre de grandeur), sans cache, avec un trafic supposé constant.

Partie E – Appliquer le RGESN (≈ 20 min)

Pour cinq des neuf familles du cours, propose une mesure concrète pour le portail et la manière de vérifier qu'elle est appliquée.

Famille	Mesure concrète	Vérification

Puis rédige trois lignes pour un futur « brouillon de déclaration » d'accessibilité : état de conformité non mesuré à ce jour (à auditer), moyens de signaler un défaut, plan d'amélioration. Ne déclare aucun taux de conformité.

Rendu

Compte rendu PDF, nommé RENDU-B1A2-S15-NOM.pdf : liste de défauts, sortie de l'outil avant et après, calculs des contrastes, tableau de poids, volumes, tableau RGESN, brouillon de déclaration.

Retour en entreprise (si ta situation le permet)

Teste au clavier une page du site de ton entreprise ou d'un outil interne (sans modifier quoi que ce soit) et note deux points d'accessibilité à améliorer. Anonymise tout document.

Bilan de la séance

Remplis ce bilan seul, honnêtement : il sert à décider ce qu'il faut reprendre. Niveau : Non maîtrisé, Maîtrise partielle, Bonne maîtrise ou Excellente maîtrise (le vocabulaire des grilles nationales d'évaluation), ou Non évalué.

Compétence du référentiel	Ce que j'ai fait dans cette séance	Niveau
B1.3 – Développer la présence en ligne de l'organisation

Note

Les codes sont ceux du référentiel.

Je sais faire, sans aide :

Citer les quatre principes d'accessibilité et les critères courants
Auditer une page (outil et contrôles manuels)
Corriger les défauts courants
Calculer un rapport de contraste
Mesurer le poids d'une page et l'effet de la compression
Appliquer des critères d'éco-conception

Ce que je dois reprendre : ______________________

Ma question à poser à l'enseignant : ______________________