charteACCESSIBILITÉ

définition des objectifs& des critères d'évaluation

Afin de s'assurer du bon fonctionnement et de l'accessibilité de ce site, un sourcing a été réalisé afin de rassembler checklists, référentiels, articles traitant des bonnes pratiques quant à la conception et la mise en ligne d'un site web. Ce travail de recherche a permis, d'une part, d'identifier certains critères incontournables à l'élaboration d'un site accessible. D'autre part, un environnement de tests favorable à la réussite des objectifs fixés a été défini (matériels, navigateurs, débits de connexion, lecteurs d'écran, etc.).

Les critères d'évaluation définis par les référentiels du PIDILA ont guidé l'élaboration d'un environnement de tests perfectible mais dont la qualité évoluera en fonction de l'acquisition de connaissances de l'auteur de cette charte.

  • Objectivables : non soumis à l'interprétation de l'observateur
  • Vérifiables : critères quantifiables ou contrôlés
  • Réalistes : à l'impossible nul n'est tenu
  • Universels : indépendance vis-à-vis d'un langage ou d'une technologie spécifique

Cette charte d'accessibilité, sous forme de checklist, est disponible en téléchargement sous licence CC BY-NC-SA.
TÉLÉCHARGER LA CHARTE PDF

contenu & seo Contenu du site & référencement

Source(s) :

Contenu du site
  • Structuration et hiérarchisation du contenu (titres, contenu textuel, visuels)
  • Vérification de la grammaire et de l'orthographe
  • Existence d'un favicon
  • Respect du droit d'auteur, présence de la license de redistribution du contenu
Seo
  • Le site a été audité et corrigé via Woorank et Sitechecker
  • Les meta comportent les données appropriées pour l'affichage optimal des pages
  • Unicité et pertinence des titres et des descriptions pour chacune des pages
  • Cohérence de la structure Hn
  • Existence d'une page 404
  • Les redirections 301 ont été testées
  • Génération d'un sitemap XML

structure sémantique Validation du HTML, CSS & JS

Source(s) :

Structure du site
  • Validation de la sémantique du HTML avec Validator W3C
  • Vérification de la compatibilité des class suivant les navigateurs avec Can I use
  • Validation du CSS avec CSS Lint
  • Les class CSS ont été préfixées avec Shouldiprefix
  • Aucune erreur détectée dans les scripts JS
  • Tous les liens internes et externes ont été testés et vérifiés avec Link Checker

fonctionnalités Formulaires, etc.

Source(s) :

Formulaire(s)
  • Le formulaire a été testé et l'envoi du message fonctionne
  • Le formulaire fonctionne lorsque le JavaScript est désactivé
  • Les champs obligatoires ont été testés
  • L'internaute est informé de la réussite ou de l'échec de l'envoi du message
  • En cas d'échec de l'envoi, l'internaute est informé des champs qu'il doit corrigé

rendu du site Matériels, OS et navigateurs utilisés

DESKTOP : Asus Zenbook (1920px x 1080px) // OS Solus (Linux) & Windows 10
  • Chrome 84.0.4147.89
  • Firefox 78.0.2
  • Firefox Developper 79.0b8
  • IE 11
  • Edge 83.0.478.64
DESKTOP : Lenovo All-in-one (1600px x 900px) // OS Windows 8.1
  • Chrome 83.0.4103.61
  • Firefox Developper 78.0b2
  • IE 11
DESKTOP : Macbook Air (1366px × 768px) // OS Sierra
  • Chrome 77.0.3865
  • Firefox 76.0.1
  • Safari 13
TABLETTE : Huawei M5 Lite (960px x 600px) // OS Android 8
  • Chrome 83.0.4103.106
  • Firefox 68.10.1
MOBILE : Iphone XR (375px × 812px) // OS iOS 13.5.1
  • Chrome 83.0.4103.101
  • Firefox 26.0
  • Safari 13
MOBILE : Samsung (360px × 780px) // OS Android 10
  • Chrome 80.0.3987.99
  • Firefox Nightly 37.0.20

performance & sécurité Optimisation et sécurisation des ressources

Source(s) :

Performance
  • Le site a été testé et optimisé via GTmetrix, Lighthouse et Dareboost
  • Les images bitmap et svg ont été optimisées via Compressor et Nano
  • Les fichiers CSS et JS sont minifiés via Minify
  • Seuls les caractères et graisses utilisés dans ce site sont installés
Sécurité
  • Le nom de domaine est fonctionnel
  • Vérification de la conformité du protocole HTTPS et la validité du certificat SSL via SSL Labs
  • Les dossiers et fichiers sensibles sont sécurisés et non accessibles aux moteurs de recherche
  • Le site fait appel à des technologies open-source et interopérables
  • Maîtrise des partis tiers : les fichiers JS, CSS, webfonts sont appelés en local
  • Prévention des tentatives d'attaques de type XSS et clickjacking
  • Désactivation du MIME-Type sniffing
  • Configuration et validation du bon usage des en-têtes HTTP via Security Headers

accessibilité web Handicap, inclusivité & diversité

Source(s) :

Outils d'audits WCAG
  • Vérification de la conformité WCAG 2.1 avec HTML CodeSniffer
  • Evaluation automatisée de l'accessibilité web avec WAVE
  • Audit du niveau d’accessibilité d’un site avec Tanaguru Engine
Technologies d’assistance testées
  • JAWS 2019 sous environnement Windows 10 - Firefox 78.0.2
  • NVDA 2020.2 sous environnement Windows 10 - Chrome 84
  • Voice Over sous environnement Mac OS Sierra - Safari 13
  • Voice Over sous environnement iOS 13 - Safari 13
Erreur(s) détectée(s) : correctif(s) envisagé(s)
  • Désactivation des options d'accessibilité lors du rechargement de page : mise en place d'un cookie
  • Disparition des images lors de la désactivation du JS : correction en cours

éco-conception Optimisation de l'empreinte écologique du site

Source(s) :

Graphisme
  • Opter pour un design simple, épuré et responsive
  • Privilégier les polices standards
Côté client
  • Privilégier les pages statiques
  • Optimiser le poids des ressources (polices, images, pdfs)
  • Factoriser les déclarations CSS et JS
Côté serveur
  • Les scripts et les CSS sont minifiés
  • L'hébergeur du site affiche sa politique Green IT
  • Mise en cache des données couramment usitées
Print
  • Le site propose une CSS @print
  • Le contenu de chaque page est imprimable sans blocs de navigation
  • Impressions effectuées en N&B sans aplat de couleur
  • Polices économes en consommation d'encre
  • les pdfs sont disponibles en basse résolution