Garantir l’accessibilité avec les outils de développement

Effectué

Le test de votre page web dans différents clients et vues est aussi important que le test dans différents navigateurs. Ce test peut ne pas être pratique dans tous les scénarios, et il peut manquer de situations dans lesquelles les utilisateurs utilisent un navigateur mais peuvent avoir un autre handicap. Heureusement, il existe des outils que vous pouvez utiliser en tant que développeur pour évaluer l’accessibilité de votre page.

Contrôleurs de contraste

Une personne daltonienne peut ne pas être en mesure de faire la différence entre les couleurs ou avoir des difficultés à distinguer des couleurs similaires les unes aux autres. Le World Wide Web Consortium (W3C), l’organisation de normalisation pour le web, a établi un système d’évaluation du contraste des couleurs.

Le choix des bonnes couleurs pour s’assurer que votre page est accessible à tous peut être difficile à effectuer manuellement. Vous pouvez utiliser les outils suivants pour générer des couleurs appropriées et tester votre site pour garantir la conformité :

Lighthouse

Lighthouse est un outil que Google a créé pour l’analyse de sites web. Il est devenu tellement populaire qu’il est inclus dans de nombreux outils de développement de navigateurs. Lighthouse peut examiner l’optimisation pour le référencement (SEO) d’une page, les performances de chargement et d’autres meilleures pratiques. Lighthouse peut également analyser une page et fournir un score pour son accessibilité actuelle.

Notes

Comme pour n’importe quel outil automatisé, vous ne pouvez pas compter sur le score fourni par Lighthouse comme seule indication de l’accessibilité d’une page. Mais il fournit un bon point de départ pour identifier et résoudre les problèmes.

Exercice : Générer le score d’accessibilité Lighthouse d’une page

Testez Lighthouse dans votre navigateur. Les captures d’écran suivantes utilisent Edge, mais vous pouvez suivre les mêmes étapes dans Chrome et dans de nombreux autres navigateurs.

  1. Ouvrez votre navigateur web et accédez à la page d’accueil Microsoft.

  2. Sélectionnez la touche F12 pour ouvrir les outils de développement.

  3. En haut, sélectionnez l’icône représentant un chevron (>>) pour ouvrir la liste des onglets masqués.

    Capture d’écran des outils de développement avec le chevron mis en surbrillance.

  4. Sélectionnez Lighthouse dans la liste.

  5. Sous Catégories, désactivez tous les éléments à l’exception d’Accessibilité.

  6. Sous Appareil, sélectionnez Ordinateur de bureau.

    Capture d’écran de Lighthouse avec uniquement l’option Accessibilité sélectionnée sous Catégories avec Ordinateur de bureau sélectionné pour Appareil.

  7. Sélectionnez Générer un rapport.

  8. Notez le score et les informations associées sur la page.

  9. Vous pouvez tester d’autres pages en sélectionnant Effacer tout dans Lighthouse, en accédant à une page différente, puis en sélectionnant Générer un rapport.

    Capture d’écran de la section URL de Lighthouse, avec le bouton pour désactiver tous les éléments mis en surbrillance.

Vous avez maintenant vu comment utiliser Lighthouse, ainsi que les informations d’accessibilité que l’outil peut fournir.