Analyse

Fil des billets

vendredi, 1 mars 2019

Audit web : points à évaluer

Contenu

→ Information, crédibilité, cohérence
•    L’objectif du site est clairement identifiable
•    Le contenu présent est utile
•    Il ne manque pas d’informations importantes
•    Chaque page a un titre pertinent
•    L'équilibre texte et éléments multimédia est bon
•    L’auteur du site est clairement identifiable
•    Les contenus importants sont mis en avant
•    Les textes longs ont une mise en page qui facilite la lecture (titre, chapeau, intertitres, alinéas et paragraphes, aération, etc.)
•    Le site utilise un mode d’écriture adapté au web (concision, mise en page)
•    Le texte est divisé en morceaux lisibles (titres, chapeau, sous-titres, emphase) pour faciliter la lecture en diagonale
•    Le contenu est hiérarchisé
•    Le contenu est structuré avec des paragraphes plutôt succincts
•    La rédaction est d’un bon niveau
•    Le vocabulaire est adapté à la cible
•    Le contenu est daté
•    Le contenu est à jour / régulièrement actualisé
•    Les images, sons, vidéos sont utiles et de bonne qualité
•    Les informations sont crédibles (références, témoignages, copyright, presse)
•    La grammaire et l’orthographe sont correctes
•    L'utilisation des contenus multimédias est justifiée (vidéos, sons, animations, etc.)
•    Le contenu correspond aux attentes de l’utilisateur
•    Le ton employé est en accord avec le site
•    Le ton employé est adapté aux personas
•    Il n’y a pas de publicité sur le site ou cette dernière ne nuit pas à la compréhension de l’information sur le site
•    Le site ne possède aucun lien mort
•    Une FAQ est présente
•    Le contenu est multilingue
•    L’adresse et la localisation de l’entreprise sont facilement identifiables
•    Le secteur et le concept sont facilement identifiables

Graphisme

→ Présentation, lisibilité, compatibilité…
•    Le site est agréable à l'œil, attrayant
•    Le site est moderne (flat design en 2019)
•    Le texte est lisible sans efforts
•    La mise en page est cohérente sur tout le site
•    L’identité du site est indiquée
•    L’emplacement des menus est bon
•    Les éléments principaux sont visibles sans “scroller”.
•    Le graphisme est adapté à la cible
•    Les typographies sont bien utilisées
•    Les couleurs et les contrastes aident la lisibilité
•    Le logo est de qualité professionnelle
•    Le site n’utilise pas de gadgets (GIFs animés, livre d’or, etc.)
•    Le site est homogène d’une page à l’autre (pas de rupture visuelle)
•    Le nombre de couleurs est limité
•    Les visuels (images, logos, icônes...) apportent de l’information
•    Les visuels aident à la navigation
•    Les visuels s'accordent au design global
•    Le design est fidèle à l’image de la marque / de l’entreprise
•    Le site comporte un logo visible et facile à retenir
•    Le site utilise moins de 3 polices
•    Les polices utilisées sont reconnues par le navigateur
•    Le texte est lisible facilement (taille, soulignement, italiques)
•    Le site est responsive (vue adaptative : le fait d’avoir une taille adaptée à l’écran)
•    Une page inexistante mène à une page personnalisée

Structure

→ Navigation, ergonomie, recherche
•    La navigation est facile à comprendre
•    Le menu est tout de suite identifiable sur le site
•    Le menu est toujours visible à l’écran
•    Un lien de retour à l’accueil est visible.
•    La navigation indique où le visiteur se trouve (fil d’Ariane)
•    La navigation offre des moyens de ne jamais recourir au bouton « page précédente » du navigateur
•    Les éléments de navigation figurent tous au même endroit sur la page, quelle que soit la page visitée
•    Les libellés des liens sont pertinents
•    Les liens sont actifs (absence de liens morts)
•    Les rubriques du site sont facilement identifiables et explicites
•    Le nombre de rubriques principales dans le menu est bien choisi
•    Les liens dans le contenu sont identifiables (couleurs, polices)
•    Les liens ne gênent pas la visibilité (longueur, soulignage...)
•    Seul les liens sont soulignés
•    La hiérarchie des menus et boutons est bonne
•    Les boutons d’action sont identifiables.
•    Un état survolé est visible
•    Les liens visités sont identifiables
•    Des instruments de recherche sont disponibles
o    Moteur de recherche interne
o    Plan du site
o    Index alphabétique
•    Les instruments de recherche sont efficaces
•    La profondeur va jusqu’à maximum 3 niveaux (règle des 3 clics pour atteindre l’info)
•    Un appel à l’action est présent sur chaque page, il n’y a pas d’impasse
•    Le site est disponible avec et sans les www
•    La page d’accueil encourage le visiteur à aller plus loin dans la découverte du site
•    Le bouton d’accueil est accessible quelle que soit la page visitée

Interactivité

→ Formulaires, espaces collaboratifs, newsletters, …
•    Le destinataire est identifiable
•    Les champs sont tous utiles
•    L’aspect visuel aide à la saisie
•    Des cases à cochés ne sont pas cochées par défaut
•    Le destinataire est identifiable
•    L’étiquette des champs aide le visiteur.
•    La longueur des formulaires est raisonnable
•    Des blocs de champs sont visibles si nécessaire
•    Une aide est fournie en cas d’erreur
•    La réussite/échec de l’envoi est indiquée
•    L’éditeur/webmaster peut être contacté facilement
•    Si pertinent : Le site possède des espaces interactifs (extranet, forums, chat, etc...)
•    Les formulaires sont faciles d’utilisation
•    Est-il possible de rentrer en contact facilement avec l’entreprise ?
•    Des éléments destinés à la viralité sont présents sur le site
o    Partage via les réseaux sociaux
o    Inscription à une newsletter
o    Flux RSS
o    Concours ponctuels
o    Formulaire de contact

Performance

→  Réactivité
•    Le chargement est suffisamment rapide (moins de 10 secondes)
•    La réactivité après chaque clic est quasi immédiate
•    Les images sont optimisées et non redimensionnées (~35 Ko max)

Sécurité

→ Protection, défense contre les vulnérabilités et failles sur le web
•    Le site n’utilise pas de “frames”
•    Le site est mis régulièrement à jour
•    Les extensions sont mises régulièrement à jour
•    Les extensions utilisées ont été mises à jour il y a moins d’un an
•    Les vérifications de formulaire sont effectuées en client-serveur (pas de vérification en js)
•    Les formulaires résistent aux commandes script et caractères spéciaux
•    Les contenus des répertoires sont protégés via le fichier .htaccess
•    Si le site embarque des données sensibles, les bases de données sont protégées contre les accès externes
•    Le site est exempt d’erreurs côté serveur
•    Le fichier robots.txt est correctement configuré
•    Le site est sécurisé en SSL (https)
•    Le site utilise une version de PHP actuelle
•    Le CHMOD des dossiers n’implique aucune faille de sécurité
•    Les URL pour accéder au formulaire d’authentification de la console (panneau d’administration) des sites sont imprévisibles
•    Les authentifiants pour se connecter sont spécifiques (admin, administrateur, webmaster)
•    Les mots de passe utilisés sont sécurisés
•    L’administrateur n’a pas l’ID 1
•    Les mots de passe sont hashés et salés
•    Les formulaires sont validés côté serveur
•    Les données des champs sont typées, échappées, limitées en nombre de caractères
•    Les adresses ne sont pas écrites en clair (mailto)
•    Il existe des captchas pour l’envoi des formulaires
•    Les tentatives d’inscription/d’écriture sont dénombrées et les connexions suspectes contrées

Accessibilité

→ Dispositions pour faciliter la lecture pour les personnes souffrant de handicaps, seniors, etc.
•    Le site est compatible avec tous les navigateurs (a minima Firefox, Chrome, IE)
•    Le site est conforme avec les standards du W3C (validation HTML, CSS) et interopérable
•    Le site offre une feuille de style où les couleurs sont suffisamment contrastées (ratio 4.5 min)
•    Il existe un dispositif pour ajuster la taille du texte
•    La taille du texte est adaptable via le navigateur
•    Les attributs alt sont renseignés sur tous les éléments graphiques (img, area, input type=“image”) et comprennent une description sommaire de ce qui y est représenté ou de ce qu’on y lit (éviter les « photo de » ou « ici vous voyez »)
•    Les attributs alt se limitent 80 caractères
•    Si le site est en plusieurs langues, la valeur de l’attribut alt correspond à la langue idoine
•    Les images contenant de l’information (organigramme, affiches...) ont une alternative textuelle relayant de manière complète l’information présente sur l’image.
•    Pour un site en Flash : il existe une version HTML du site
•    Les images utilisent un descriptif textuel
•    Le site est en responsive design
•    Chaque page est accessible par au moins un lien HTML en dur (pas de Js/Flash)
•    Le site contient des URL canoniques (chaque page est accessible via un permalien unique)
•    Tous les liens sont accessibles via la touche TAB
•    Il existe des focus sur les champs des formulaires ( :focus)
•    Il existe des focus sur les liens ( :hover)
•    L’ordre de tabulation est prévisible
•    Il n’existe aucun faux bouton (div, span, img) sur lesquels on appelle des fonctions JS comme onMouseOver, ou images cliquables côté serveur
•    Aucune popup ne perturbe la navigation
•    Aucun dispositif Javascript n’empêche la navigation une fois activé (ex : Lightbox)
•    En cas de menus déroulants cachés, il existe une sitemap où les liens sont accessibles
•    Les liens sont descriptifs et non injonctifs (« cliquez ici » est à proscrire)
•    Le format du fichier est indiqué dans l’intitulé du lien lors du téléchargement
•    Le DOCTYPE est conforme et les balises correctement imbriquées
•    Les éléments contiennent tous un attribut unique (pas de doublon)
•    Titre dans l’élément title est significatif
•    Le code reflète la structure du contenu (web sémantique) ((hn, ol, ul, p, header, nav,
•    aside, article…)
•    La navigation indique où le visiteur se trouve (fil d’Ariane) avec des séparateurs > plutôt que des ul / li
•    La hiérarchie des titres est respectée
•    Préciser la langue de la page : <html lang=“fr”> (important pour les lecteurs
•    d’écran, qui utilisent la prononciation appropriée)
•    Les images décoratives, qui n’ont pas pour mission d’informer => alt=“” (vide)
Attention, une image qui est un lien n’est jamais considérée comme décorative
•    Dans les tableaux : chaque donnée dispose de sa cellule, et une balise d’entête (th)
•    Placer un mot d’introduction (info utiles) précédant un fichier audio ou vidéo + un titre significatif
•    Une alternative textuelle (retranscription) aux fichiers audio / vidéo est apportée (nom du locuteur + sons tiers aux choses dites : applaudissements, rires, silences...)
•    Les liens sont soulignés (les couleurs franches et contrastées ne suffisent pas)
•    Mouvement : rien ne clignote + de 3x/sec sur une page web
•    Une animation de moins de 5 secondes est autorisée. Si elle fait plus, l’utilisateur doit pouvoir l’interrompre lui-même. Mieux : aucune anim ne démarre sans l’aval de l’usager.
•    Formulaires : les labels sont obligatoires. chaque champ comprend un label spécifique
•    Les couples étiquettes-champs sont indissociables (<label for=“nom”>Nom</label> <input type=“text” id=“nom” name=“nom” />
•    Mentionner le format requis dans les champs (ex : JJ/MM/AAAA)
•    Les champs liés du formulaire sont regroupés par un fieldset + élément legend pour nommer chaque groupe. (Si imbrication de fieldset, se limiter à 2 niveaux)
•    Si menu déroulant très étoffé, regroupement des éléments (TG) à l’aide de l’élément optgroup
•    Les champs obligatoires sont annoncés dans le label (mention : * / (obligatoire))
•    Chaque formulaire est doté d’un bouton d’envoi (submit) visible
•    les erreurs commises lors d’un envoi de formulaire interrompu (champs requis non complétés)
•    Contraintes de temps/Sessions : il n’existe pas de délai ou il est très long
•    Il  formats alternatifs : html, pdf, txt

Fonctionnalités

→ Outils facilitant l’utilisation du site
•    Le site possède des modules d’impression prédéfinis
•    La mise en page de l’impression est satisfaisante
•    Galerie (multimédia photos, vidéos, sons)

Aspects juridiques

→ Législation, RGPD…
•    Les mentions légales et crédits sont présents sur le site (nom de l’éditeur responsable, adresse, numéro de téléphone)
•    La politique de confidentialité est renseignée
•    L’usage des cookies est signalé
•    Le stockage des cookies et/ou la collecte des données peuvent être désactivés

Référencement

→ SEO, SEA…
•    L’adresse url est intuitive et courte
•    Le site apparaît sur la première page de résultats des principaux moteurs de recherche (Google, Yahoo, MSN)
•    Le titre des pages du site informe suffisamment sur le contenu de la page
•    Les adresses des pages sont compréhensibles (permaliens explicites)
•    Les balises utiles aux moteurs sont présentes
•    La balise title est spécifique à chaque page du site
•    Aucune balise meta n’est polluante (fake keywords, revisit-after…)
•    Le code reflète la structure du contenu (web sémantique) ((hn, ol, ul, p, header, nav,
•    aside, article…)
•    La langue est indiquée dans le code
•    Le contenu est hiérarchisé et emphasé pour faciliter l’indexation des pages dans les moteurs de recherche
•    Le fichier robots.txt est correctement configuré
•    Les principales pages du site sont accessibles d’un point de vue moteur (avec un code 200 et non 301, 302)
•    Les mots clés sont mis dans des balises strong