🌳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 :

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

PrécédentTD05 : githubSuivantTP01 : réalisation de la page listing.php

Dernière mise à jour