Boîte à outils pour évaluer l’accessibilité d’un site Web

Des outils pour tester l'accessibilité d'un site Web en phase d'audit ou à chaque étape d'un projet Web.

Accueil > Articles > Accessibilité > Boîte à outils pour évaluer l’accessibilité d’un site Web
18 février 2011Accessibilité

Article mis à jour le 23 avril 2016

Pour tester l’accessibilité d’un site Web en phase d’audit ou à chaque étape d’un projet Web,  j’utilise un certain nombre d’outils choisis  pour leur facilité d’utilisation et leur efficacité.

Les couleurs

Le contraste entre la couleur du texte et la couleur du fond doit être suffisant (texte foncé sur fond clair ou texte clair sur fond foncé). Voici deux outils permettant de tester si le ratio entre les deux couleurs répond au critère d’accessibilité :

Si le ratio est trop faible, vous disposez de Tanaguru Contrast Finder, un outil en ligne qui vous propose des combinaisons de couleurs proches des vôtres et qui respectent le ratio :

Les titres

La hiérarchie des titres de section d’un contenu éditorial doit être pertinente et sans rupture. Pour tester ce point, Firefox propose une extension très pratique qui analyse la page entière, affiche une table des matières basée sur les titres et signale les erreurs de rupture (comme par exemple, un titre de niveau 2 suivi d’un titre de niveau 4) :

Les liens

Chaque lien doit avoir un intitulé explicite. Pour afficher la liste des liens, Firefox propose l’extension Accessibility Toolbar et dans son menu « Navigation », la fonction « links » qui affiche la liste des liens et leur intitulé. Les liens vides sans intitulé sont vite repérés :

Les attributs title

L’attribut title sur un lien n’est utile que lorsqu’il reprend l’intitulé du lien et qu’il le complète avec une information supplémentaire pour le rendre plus explicite (comme par exemple l’ouverture d’une nouvelle fenêtre). Les attributs title dont la valeur est identique à l’intitulé du lien doivent être supprimés (seul cas autorisé, un lien ne contenant qu’une seule image). Pour afficher la valeur des éventuels attributs title sur les liens, Firefox propose l’extension Web Developer et dans son menu « Infos », la fonction « Afficher les attributs title » :

Les images

Toute image doit avoir une alternative textuelle, valeur de l’attribut « alt ». Les images contenant de l’information non présentes dans le contenu éditorial doit avoir une alternative textuelle non vide et parfois être associée à une description détaillée. C’est le cas des infographies. Les images décoratives doit avoir une alternative vide (alt= » »). Pour visualiser ces alternatives, Firefox propose l’extension Web Developer et dans son menu « Images », la fonction « Afficher les attributs alt » :

Les zones

Les principales zones d’une page Web doivent être identifiées à l’aide de l’attribut « role » de la spécification Accessible Rich Internet Applications ( WAI-ARIA). Pour tester la présence de ces zones, Firefox propose l’extension Web Developer et dans le menu « Infos », la fonction « Afficher les rôles Aria ». Doivent être présents, les rôles : banner, navigation, search, footer, main. Le rôle navigation peut être présent plusieurs fois dans une même page. Les autres rôles sont uniques.

Validation du code

Le code de chaque page doit être conforme à la grammaire déclarée au début de la page. Pour cela, le World Wide Web Consortium (W3C) propose un validateur en ligne, utilisable directement ou via l’extension Firefox Web Developer, menu « outils », fonction « Validation HTML » :

Inspection du code

Pour tous les critères d’accessibilité, le code doit être examiné. Firefox propose l’extension Firebug, qui permet d’inspecter le code HTML et le règles CSS appliquées à chaque élément du code :

Outils automatiques

Voici une extension Firefox et une extension Chrome qui appliquent automatiquement un ensemble de tests unitaires sur la page Web chargée dans le navigateur. L’extension Opquast Desktop prend en compte plusieurs référentiels dont le Référentiel Général d’Accessibilité pour les Administrations (RGAA V3).

Vous pouvez également utiliser la feuille de style a11y.css de Gaël Poupard, qui permet de visualiser sur la page un aperçu des erreurs potentielles à corriger.

Lecteurs d’écran

Les lecteurs d’écran sont des logiciels utilisés par les personnes malvoyantes et aveugles, mais aussi par des personnes dyslexiques. L’utilisation de ces outils est nécessaire pour tester l’accessibilité des composants d’interaction (comme les accordéons, les onglets, les carrousels…).

  • NVDA, Open Source
  • Jaws, version d’évaluation.

Le lecteur d’écran VoiceOver est installé d’office sur Mac, Ipad, Iphone. Le lecteur d’écran Talkback est installé sur Android.

Pour aller plus loin