Accessibilité dans Chrome DevTools

À propos de l'auteur

Umar est un développeur Web et un expert en développement Google basé à Londres, spécialisé dans la rédaction de conseils et de tutoriels pour le Web moderne. Il blogue sur la technologie…
En savoir plus sur
Umar
…

Je passe beaucoup de temps dans DevTools, et ce faisant, j'ai appris à connaître certaines des fonctionnalités les plus «cachées» de DevTools et j'aimerais en partager quelques-unes avec vous dans cet article – en particulier sur l'accessibilité.

Cet article utilise Google Chrome car c'est un navigateur que j'utilise et avec lequel je me sens à l'aise. Cela étant dit, Firefox, Safari et Edge ont tous fait de grands progrès dans leurs outils de développement, et ils ont certainement de très bonnes fonctionnalités liées à l'accessibilité.

Vous connaissez peut-être déjà DevTools, mais voici un petit rappel comment inspecter un élément sur une page Web:

1. Ouvrez une page Web que vous souhaitez inspecter, dans Google Chrome
2. Utilisez le raccourci Cmd + Shift + C ( Ctrl + Shift + C sous Windows)
3. Votre pointeur est en mode Inspecter l'élément, continuez et cliquez sur un élément de la page Web

Juste comme ça, vous avez ouvert DevTools et avez commencé à inspecter des éléments. Les différents panneaux correspondent à différentes caractéristiques, par ex. autour du débogage JavaScript, des performances, etc.

Il existe des fonctionnalités liées à l'accessibilité dispersées, alors explorons ce qu'elles font, où elles vivent et comment les utiliser.

Contrast Ratio

This is une fonction pour vérifier si le texte inspecté a un contraste de couleur satisfaisant par rapport à la couleur d'arrière-plan.

En règle générale, un niveau de contraste élevé entre la couleur du texte et la couleur d'arrière-plan sous-jacente signifie un texte plus lisible pour les utilisateurs de différents capacités. De plus, il aide les utilisateurs à lire votre texte dans diverses conditions environnementales considérez ces exemples qui peuvent avoir un impact sur la façon dont un utilisateur perçoit la lisibilité du texte:

• Regarder un écran à l'extérieur avec beaucoup de soleil [19659010] Un appareil mobile a abaissé complètement la luminosité de son écran pour préserver la durée de vie de la batterie

«L'objectif est de fournir un contraste suffisant entre le texte et son arrière-plan pour qu'il puisse être lu par des personnes modérément malvoyantes.»

– Comprendre le critère de succès 1.4.3: Contraste (minimum)

L'utilisation de l'outil de rapport de contraste peut nous donner une réponse oui / non immédiate à la question: ce texte répond-il à la norme de contraste minimum. L'utilisation de cet outil peut aider à influencer la conception et la palette de couleurs de votre site Web, ce qui peut conduire à un contenu plus lisible pour les utilisateurs malvoyants.

Disponible dans l'outil de sélection des couleurs, la fonction de rapport de contraste peut vous indiquer si une exigence de contraste minimum a été remplie. Pour accéder à cette fonctionnalité:

1. Inspectez un élément de texte avec les DevTools
2. Trouvez la propriété de couleur dans le volet Styles, et cliquez sur le petit carré coloré pour faire apparaître l'outil de sélection de couleur
3. Cliquez sur le texte qui dit ' Rapport de contraste »qui présente de plus amples informations à ce sujet

Les trois rapports représentent:

• Votre taux de contraste actuel
• Le minimum rapport de contraste (AA)
• Le amélioré rapport de contraste (AAA)

Comme exercice pour vous-même: faites glisser l'outil de sélection de couleur circulaire sur le spectre de couleurs et observez les points où le contraste minimum et les rapports de contraste améliorés sont satisfaits.

Cette fonction peut également être qui vous a été signalé via un rapport Lighthouse, traité dans la section Lighthouse de cet article.

Accessibility Inspector

Cela fait référence à un volet DevTools qui vous permet d'afficher diverses propriétés d'accessibilité et des informations ARIA pour les nœuds DOM.

ARIA fait référence à un ensemble de propriétés, généralement utilisées en HTML, qui à son tour rend votre site Web plus accessible à des personnes de capacités différentes. Cela vaut vraiment la peine d'être utilisé sur vos propres sites Web, mais cela nécessite de comprendre les principes fondamentaux de l'accessibilité du Web pour vous assurer que vous l'utilisez d'une manière qui aidera vos utilisateurs.

Par exemple, considérez l'article suivant of HTML:

     Cette transaction a réussi

Un dispositif d'assistance, tel qu'un lecteur d'écran peut utiliser la propriété role = "alert" pour annoncer ces informations à l'utilisateur. Le volet Accessibilité de DevTools peut sélectionner une telle propriété ( role ) et vous la présenter, afin que les propriétés liées à l'accessibilité d'un élément soient clairement définies.

Validation des informations que vous voyez dans ce volet peut aider à répondre à la question: «Suis-je en train de coder l'accessibilité de façon incorrecte», que ce soit syntaxiquement ou structurellement, gardez simplement à l'esprit, appliquer des techniques d'accessibilité avec la syntaxe correcte et avoir un site Web accessible sont deux choses différentes!

Pour commencer à l'utiliser, vous pouvez ouvrir le volet Accessibilité avec un élément inspecté:

1. Inspectez tout élément de la page, par ex. un lien hypertexte ou un champ de recherche
2. Ouvre le volet Accessibilité qui se trouve dans le panneau Éléments
   Astuce bonus : plutôt que d'avoir à localiser le volet (il n'est pas ouvert par défaut), je recherche 'Afficher l'accessibilité 'dans le menu de commande ( Cmd + Shift + P ).

Vous trouverez ici de nombreuses informations, telles que:

• Un arbre d'accessibilité (un sous-ensemble de l'arborescence DOM)
• attributs ARIA
• Propriétés d'accessibilité calculées (par exemple, est quelque chose de focalisable, est-il modifiable, passe-t-il la validation par formulaire)

Selon l'élément inspecté, certaines de ces informations peuvent ne pas être applicables, par exemple, peut-être qu'un élément n'a légitimement pas besoin d'attributs ARIA.

Comme pour la plupart des fonctionnalités de DevTools, ce que vous voyez dans ce volet est «live '- les modifications que vous apportez dans l'arborescence DOM du panneau Elements sont immédiatement reflétées dans ce volet, ce qui le rend utile pour cor correction d'un attribut ARIA mal orthographié par exemple.

Si vous êtes sûr de votre utilisation de l'accessibilité, peut-être parce que vous utilisez un autre outil de test automatisé tel que ax vous ne pouvez pas utiliser ce volet très souvent, et ce n'est pas grave.

Si vous souhaitez en savoir plus en consultant des sites Web réels, j'ai réalisé une vidéo de 14 minutes sur Débogage d'accessibilité avec Chrome DevTools .

Lighthouse

Lighthouse est un vérificateur de site Web automatisé qui peut rechercher les meilleures pratiques, l'accessibilité, la sécurité, etc.

Si vous en avez déjà fait quelques-uns En lisant sur la théorie de l'accessibilité, et que vous voulez apprendre à l'appliquer efficacement à votre propre site Web, c'est un excellent outil à utiliser car il s'agit littéralement d'une interface pointer-cliquer – aucune installation requise. De plus, tous ses audits sont très instructifs, vous informant de ce qui a échoué et pourquoi quelque chose a échoué.

Suivre les suggestions de cet outil contribuera presque certainement à améliorer l'accessibilité de votre site.

Lors de la vérification de la sécurité, des meilleures pratiques générales du Web, les performances sont utiles. Concentrons-nous sur la façon d'exécuter un audit d'accessibilité dans Lighthouse:

1. Accédez au panneau Lighthouse dans DevTools
2. Décochez toutes les catégories, mais gardez la case «Accessibilité» cochée
3. Cliquez sur «Générer un rapport»
4. Dans le rapport résultant , cliquez sur les différentes suggestions pour en savoir plus à leur sujet

Si vous voulez pour en savoir plus sur l'accessibilité (je le fais certainement!), cliquer sur échoue, mais même les audits réussis sont un excellent moyen d'apprendre puisque presque chaque audit renvoie à la documentation dédiée aux développeurs Web sur l'audit lui-même, et pourquoi c'est important.

Pour la plupart, les pages de documentation d'audit sont extrêmement succinctes et je les recommande vivement. Jetons un œil à la documentation d'audit pour nous assurer qu'un élément est présent. Il précise:

• Comment la vérification du titre de Lighthouse échoue
• Comment ajouter un titre
• Conseils pour créer de grands titres
• Exemple de titre non à utiliser, avec un titre valant using

Et dans le cas de la documentation du titre du document, il n'a fallu que 300 mots pour expliquer ces 4 points ci-dessus.

Une chose intéressante à noter, contrairement au volet Accessibilité, les audits des phares sont très instructifs par défaut, ce qui rend le Le panneau Lighthouse est un excellent endroit à visiter lorsque vous débutez.

Au fur et à mesure que vous progressez dans la création de pages accessibles, vous pouvez vous éloigner des audits prédéfinis et passer plus de temps dans le volet d'accessibilité.

Émuler les déficiences visuelles

Ceci est une fonctionnalité DevTools pour appliquer une déficience visuelle

«Dans le monde, environ 1 homme sur 12 (8%) et 1 femme sur 200 ont des déficiences de la vision des couleurs.»

– Conditions d'accessibilité pour les personnes Basse vision

Vous souhaiterez utiliser cette fonction pour vous assurer que votre site Web répond aux besoins de vos utilisateurs. Si votre site Web affiche une image importante, vous découvrirez peut-être que cette image est difficile à comprendre pour une personne atteinte de tritanopie (troubles de la vision bleue et jaune), ou même difficile à comprendre pour une personne ayant une vision floue. [19659082] «Une faible acuité visuelle peut être corrigée avec des lunettes, des lentilles de contact ou une intervention chirurgicale – et d'autres non. Par conséquent, certaines personnes auront une vision floue (faible acuité visuelle) quoi qu'il arrive. »

– Conditions d'accessibilité pour les personnes ayant une basse vision

Par exemple, dans le cas d'une image, vous pouvez trouver que là est une image de résolution plus élevée disponible au téléchargement tout en émulant une vision floue via DevTools, plutôt qu'un utilisateur avec une vision floue peut utiliser et à son tour comprendre ce que l'image montre. Cela nécessitera des compétences en conception / résolution de problèmes basées sur l'UX – peut-être de votre part / de vos collègues – mais cela peut faire la différence entre répondre aux besoins de vos utilisateurs ou ne pas répondre à leurs besoins.

?️ Remarque : L'image suivante est partiellement floue, pour illustrer la fonction d'émulation «Vision floue» de DevTools.

Vous pouvez essayer cette fonction avec ce qui suit étapes:

1. Ouvrez le menu de commande ( Cmd + Shift + P ou Ctrl + Shift + P sous Windows)
2. Recherchez et sélectionnez «Afficher le rendu»
3. Sélectionnez une déficience visuelle telle que «Vision floue» dans la section Émuler les déficiences visuelles dans le volet de rendu.

Voici quelques exemples de déficiences visuelles que vous pouvez appliquer via DevTools:

• Vision floue
  Là où la vision est moins précise
• Protanopie
  Daltonisme résultant d'une insensibilité à la lumière rouge
• Tritanopie
  Vision bleue et jaune altérée

Les fonctions d'émulation comme celle-ci ne tiennent pas pleinement compte pour des différences subtiles dans la façon dont ces déficiences se manifestent avec les individus, sans parler du large éventail de déficiences visuelles là-bas. Cela étant dit, cette fonctionnalité peut toujours nous aider en tant que développeurs Web à comprendre et à améliorer l'accessibilité de nos pages.

Inspecter l'info-bulle d'élément

Cette fonctionnalité fait référence à une info-bulle améliorée qui affiche désormais des informations relatives à l'accessibilité lorsque vous utilisez le Fonction «Inspecter l'élément». C'est une fonctionnalité subtile, mais toujours très importante car elle peut vous informer de l'accessibilité des éléments, d'un coup d'œil.

Je dis que c'est important car dans le cas des quatre autres fonctionnalités mentionnées dans cet article, elles nécessitent une action intentionnelle de notre part (cliquez sur le bouton générer un rapport, accédez au volet Accessibilité, ouvrez l'outil de sélection de couleurs, etc.). Cependant, pour cette fonctionnalité, elle apparaît dans l'une des actions les plus courantes de DevTools lors de l'inspection d'un élément.

En guise de petit défi pour vous-même, jetez un œil aux deux captures d'écran suivantes. Ils présentent l'info-bulle améliorée de DevTools Inspect Element qui contient désormais une section d'accessibilité. Pouvez-vous identifier ce que représentent les propriétés de cette section?

Vous remarquerez peut-être que ce sont exactement les mêmes informations que nous avons vues précédemment – dans le cadre de la section Rapport de contraste et de l'inspecteur d'accessibilité. Ce sont les mêmes propriétés, mais elles sont présentées de manière (espérons-le) plus simple.

Remarque: cette info-bulle contient également une propriété "Clignotable au clavier" (le tout dernier élément). Ceci indique si l'élément est accessible au clavier . Si c'est vrai, cela suggérera généralement que l'élément en question peut être ciblé par tabulation.

La ​​façon dont je le vois: Inspecter l'élément est un cas d'utilisation extrêmement courant dans le navigateur DevTools, donc sélectionner des propriétés d'accessibilité utiles pour l'info-bulle Inspecter l'élément peut servir de rappel utile et nous inciter, en tant que développeurs Web, à approfondir nos recherches et à nous assurer que ce que nous construisons est accessible. mais parfois ces outils sont cachés ou simplement non documentés. Dans cet article, nous avons exploré certaines de ces fonctionnalités qui, nous l'espérons, peuvent nous aider à appliquer les meilleures pratiques d'accessibilité aux sites Web que nous créons.

Voici un rappel de ce que nous avons couvert:

• Taux de contraste
  Vérifiez si l'élément de texte inspecté a un rapport de contraste satisfaisant.
• Accessibility Inspector
  Affichez diverses propriétés d'accessibilité et informations ARIA.
• Lighthouse
  Un vérificateur de site Web qui couvre les meilleures pratiques, l'accessibilité et plus.
• Émuler les déficiences visuelles
  Un outil pour appliquer des déficiences visuelles (comme une vision floue) à la page.
• Info-bulle Inspecter les éléments
  Une info-bulle améliorée qui met en évidence les problèmes d'accessibilité

Je crée la liste de diffusion Dev Tips si vous souhaitez vous tenir au courant de plus de 200 conseils de développement Web! Je publie également des tas de ressources de développement Web bonus sur mon Twitter .

C'est tout pour le moment! Merci d'avoir lu.

(ra, il)