Vous ne devez pas forcément être un expert pour faire des tests d'accessibilité sur votre site. Nous vous présentons quelques outils qui peuvent vous être utiles.
Utiliser le clavier
Un test qui est à la portée de tous est de parcourir le site au moyen du clavier:
- Si vous travaillez sur un Mac, il faut d'abord activer l'« accès au clavier complet » sur tous les contrôles dans les Préférences Système Clavier, onglet Raccourcis clavier.
- Parcourez le site avec la touche TAB:
- Voyez-vous toujours où vous vous trouvez?
- Pouvez-vous atteindre tous les liens, boutons, et autres éléments de formulaire?
- Est-il possible d'afficher toutes les informations? Pensez par exemple aux infobulles et menus déroulants?
- Tous les liens sont-ils activables avec la touche ENTER?
- Pouvez-vous contrôler les éléments de formulaire? Barre d'espace pour les cases à cocher, flèches pour les listes déroulantes, etc.
Le zoom du navigateur
Dans le navigateur utilisez le zoom (Ctrl +) pour agrandir le contenu progressivement jusqu'à 400%. Il faut que tout le contenu reste lisible (pas de chevauchements) et accessible (pas de contenu qui disparait totalement). Le contenu doit également s'adapter à la largeur de l'écran pour que le défilement horizontal ne soit pas nécessaire.
Mesurer le contraste
- Sur Windows ou Mac : Color Contrast Analyser
- En ligne : Contrast finder Asqatasun
- Dans Firefox : L'inspecteur d'accessibilité de Firefox
- Dans Chrome Dev tools (F12)
Visualiser la structure et les textes cachés
Une bonne partie de l'accessibilité d'un site web dépend de la manière dont il a été codé. Les outils ci-dessous permettent de visualiser certaines choses sans devoir inspecter le code.
- L'extension Web developer pour Chrome et Firefox permet de visualiser beaucoup d'informations précieuses, par exemple:
- Entourer les titres
- Afficher les attributs alt
- Entourer les cellules de tableaux
- Ces bookmarklets vous permettent également de visualiser plusieurs éléments. Glissez-les dans la barre des signets pour les utiliser:
Inspecter le DOM et l'accessibility tree
Si vous êtes à l'aise dans le code, vous pouvez vérifier pas mal de choses en utilisant des outils développeurs (F12) disponibles dans la plupart des navigateurs, pour inspecter le code.
Les outils automatiques
Il existe divers outils qui font une série de tests automatiques et qui génèrent un rapport. Aucun de ces outils ne fait un test complet. Par exemple, si un outil peut vérifier la présence d'un attribut alt, il ne poura par contre pas vous dire s'il est pertinent.
Les outils peuvent vous être utiles pour détecter des oublis à condition de rester critique vis à vis des résultats et de vous souvenir que ces tests sont partiels.
Utiliser un lecteur d'écran
Tester correctement un site web avec un lecteur d'écran demande pas mal d'expérience. POur quelqu'un qui débute il ets difficile de savoir si les problèmes détectés viennent de problèmes d'accessibilité dans le site ou de sa manière d'utiliser le lecteur d'écran.
Il existe plusieurs lecteurs d'écran. Voici quelques liens:
- JAWS: à utiliser gratuitement en mode démo. Le mode démo permet de l'utiliser pendant 40 minutes d'affilée. Ensuite, il faut redémarrer votre ordinateur si vous voulez l'utiliser à nouveau. 40 minutes sont souvent suffisantes pour effectuer les tests nécessaires. A côté du lecteur d'écran proprement dit vous pouvez également télécharger gratuitement des voix de bonne qualité en Français, Néerlandais et Anglais. Dans JAWS, allez dans Aide, Resources Web, Téléchargement des voix Realspeak Solo Direct.
- Non Visual Desktop Access (NVDA): très bon lecteur d'écran open source.
- Les utilisateurs de Mac ont la chance d'avoir un lecteur d'écran intégré. Il s'agit de VoiceOver. Plus d'informations sur VoiceOver, le lecteur d'écran de Apple.
Commentaires
Soyez le premier à commenter