🌳TD06 : Eco-conception & accessibilité

Ce TD à pour objectif que le site soit accessible et intègre des critères et règles de bonnes pratiques pour l'éco-conception (au regard des enjeux du S1, et de vos compétences techniques)

Diagnostic général

Vérifiez votre site avec les outils vus en S1 :

• Wave ou équivalent

• Lighthouse (sur Chrome) ou équivalent

• Dareboost ou équivalent

A partir de ces analyses essayez d'améliorer votre site en terme d'accessibilité, de SEO, de performance et d'éco-conception.

Quelques éléments (liste non exhaustive) sont données dans parties suivantes

Vérifier les règles minimales d'accessibilité

N'oubliez pas de relire et prendre en compte les points vus au S1 : https://cours.davidannebicque.fr/accessibilite-numerique

Accessibilité des formulaires

• Est-ce que tous les champs de vos formulaires ont le bon type, un label associé, un libellé clair, un texte d'aide si nécessaire ?

• Est-ce que je peux naviguer dans le formulaire avec la touche tabulation ?

Accessibilité des images

• Est-ce que les images ont une alternative textuelle adaptée ?

Tableau

• Est-ce que les tableaux sont correctement structurés (en-tête, légende...)

Contrastes / couleurs

• Est-ce que les contrastes sont au moins de 4.5 pour tous les éléments de votre site ?

• Aucune information n'est passé uniquement par la couleur ?

Navigation

• Le menu est identique sur toutes les pages

• Je peux revenir à l'accueil (et si besoin à la page précédente) depuis toutes les pages, et sans utiliser le bouton précédent

• Les pictos/icônes sont doublé d'un texte significatif

• La langue et l'encodage de toutes les pages sont précisées

Intégrer l'eco-conception dans le projet

Les images

• Est-ce que les images sont dans le format le plus approprié ?

  • SVG pour le logo par exemple

  • Webp ou png optimisé pour les autres images

• Est-ce que la résolution des images est adaptée au web ?

CSS / JS

• Ne garder que ce que vous utilisez

  • Supprimer le CSS inutile

  • Supprimer le JS non utilisé

  • Manuellement pour le moment

    • Très vite avec des outils automatiques (purifyCSS par exemple)

• Mimifier vos fichiers CSS et JS

  • Avec des outils en lignes pour le moment,

    • exemple : https://www.websiteplanet.com/fr/webtools/jscssminifier/
    • Très vite de manière automatique (webpack par exemple)