Obtenez de l’information depuis chaque page auditée
De nombreux critères nécessitent de « sortir » des informations du code de la page Web.
Nous allons vous présenter ici quelques outils types, très communs : par la suite, vous allez sans doute composer votre propre boîte à outils, en fonction de vos préférences, notamment.
Votre tout premier outil est, bien sûr, le navigateur lui-même : il est préférable d’utiliser un navigateur de type courant, que ce soit Chrome, que nous allons prendre comme exemple, Firefox, Internet Explorer ou Safari. Les extensions que nous allons donner en exemple sont disponibles pour chacun d’entre eux, ou ont des équivalents.
Nous allons avoir 4 outils de base, dans le navigateur ou sur votre poste client.
Utilisez l’inspecteur de code
Votre premier outil est l’inspecteur de code. Chacun de ces navigateurs en comporte un. C’est un outil qui pourra vous sembler assez technique, mais pour ceux qui n’ont pas un profil de développeur, ne vous inquiétez pas : les inspecteurs de code se prêtent très bien à une utilisation simple, dès qu’on sait où y chercher l’information et dans quel cas.
L’inspecteur de code vous permet d’examiner facilement le code HTML d’un contenu affiché dans une page Web, ainsi que ses styles CSS, lorsque vous avez besoin de vérifier la présence d’une balise, d’un attribut ou d’une propriété spécifique.
L’inspecteur de code vous sera notamment utile pour vérifier les règles suivantes :
règles n° 111, 112 et 113 sur les alternatives textuelles des images ;
règle n° 184 sur les alternatives textuelles des pictogrammes typographiques ;
règles n° 67 et 68 sur le code des étiquettes de champs de formulaire ;
règle n° 99 sur le code lié au favicon ;
règle n° 127 sur l’indication dans le code des changements de langue du contenu ;
règle n° 141 sur l’avertissement en cas d’ouverture de lien dans une nouvelle fenêtre ;
règle n° 236 sur les cellules d’entêtes de lignes et de colonnes dans un tableau.
Exploitez la barre d’outil Web Developper
Le second outil est une extension du navigateur, du type Web Developer Toolbar : il donne un accès plus rapide à certaines informations contenues dans le code. Vous allez vous en servir en particulier pour visualiser les alternatives textuelles des images, le plan d’une page Web, les différentes feuilles de styles. Il permet également de soumettre le code généré au validateur HTML.
La barre d’outils Web Developer vous sera notamment utile pour les règles suivantes :
règles n° 111, 112 et 113 sur les alternatives textuelles des images ;
règle n° 229 sur les identifiants uniques dans le code HTML ;
règle n° 227 sur les titres de sections HTML ;
règle n° 131 sur l’absence de liens vides ;
règle n° 185 sur les familles de polices de caractères génériques ;
règle n° 238 sur la linéarisation des tableaux de mise en forme.
Passez à Recx Security Analyser
Une autre extension dont vous aurez besoin et qui va vous permettre de traiter les critères sécurité qui concernent les échanges HTTP : Recx Security Analyser. Là, c’est facile : elle vous donne immédiatement le résultat.
Recx vous sera notamment utile pour les règles suivantes :
règle n° 201 sur les entêtes HTTP concernant le type MIME des ressources ;
règle n° 24 sur l’entête HTTP concernant la politique de communication des referrers ;
règle n° 194 sur l’entête HTTP Strict Transport Security ;
règle n° 206 sur l’entête HTTP concernant les domaines autorisés à intégrer les pages du site dans des cadres ;
règle n° 207 sur l'entête HTTP Content-Security-Policy (CSP).
Équipez-vous pour l’analyse des contrastes
Un dernier outil clé : le Colour Contrast Analyser, qui va vous servir pour la règle n° 177, « Les contenus sont présentés avec un contraste suffisant par rapport à leur arrière-plan ».
En résumé
Pour auditer, vous avez vos yeux et vos compétences, mais vous pouvez vous aider d’outils :
l’inspecteur de code permet de vérifier le balisage HTML et les styles CSS d’un élément de contenu affiché dans la page ;
la Web Developer Toolbar donne notamment accès de façon simplifiée à de nombreuses informations sur la structure du contenu ;
Recz Security Analyser permet de vérifier très facilement les entêtes HTTP adressés au navigateur lors de l’affichage de la page ;
le Colour Contrast Analyzer mesure le ratio de contraste des contenus affichés à l’écran.
Au-delà des outils à installer sur votre poste de travail, il y a aussi des services en ligne qui vous permettent de tester les sites de façon automatisée ou semi-automatisée.
