Catégories
Astuces et Design

Accessibilité dans Chrome DevTools – Smashing Magazine

A 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 didacticiels pour le Web moderne. Il blogue sur la technologie…
Plus à propos
Umar

Cet article présente certaines fonctionnalités utiles de DevTools qui peuvent vous aider à améliorer l'accessibilité de votre site Web. Pour de nombreux sites Web, des éléments tels que la performance et l'accessibilité sont une réflexion après coup. Mais en tant que développeurs Web, il est préférable de s’efforcer de créer la meilleure expérience possible pour nos utilisateurs, quelles que soient leurs capacités.

Note de l'éditeur: Si vous souhaitez en savoir plus sur les outils frontaux, nous avons l'atelier en ligne d'Umar sur les tests frontaux et l'automatisation avancée du navigateur à partir du 19 août (5 jours x 2,5 h). Assurez-vous de ne pas manquer celui-là!

Je passe beaucoup de temps dans DevTools et, ce faisant, j'en suis venu à découvrir certaines des fonctionnalités les plus «cachées» de DevTools et j'aimerais en partager certaines 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 pour 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 + Décalage + C (Ctrl + Décalage + C sous Windows)
  3. Votre pointeur est en mode Inspecter l'élément, allez-y et cliquez sur un élément de la page Web

Juste comme ça, vous avez ouvert DevTools et commencé à inspecter les é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é disséminées, alors explorons ce qu'elles font, où elles vivent et comment les utiliser.

Rapport de contraste

Cette fonction permet de vérifier si le texte inspecté présente 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 capacités différentes. En outre, 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
  • Un appareil mobile a réduit 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.

Rapport de contraste dans l'outil de sélection de couleur
Rapport de contraste dans l'outil de sélection de couleur (Grand aperçu)

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

  1. Inspecter un élément de texte avec les DevTools
  2. Recherchez la propriété de couleur dans le volet Styles, puis cliquez sur le petit carré de couleur pour afficher 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 ratios représentent:

  • Votre taux de contraste actuel
  • Le rapport de contraste minimum (AA)
  • Le rapport de contraste amélioré (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 fonctionnalité peut également vous être signalée via un rapport de phare, traité dans la section Phare de cet article.

Inspecteur d'accessibilité

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, ce qui 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é Web pour vous assurer que vous l'utilisez d'une manière qui aidera vos utilisateurs.

Par exemple, considérez le morceau de HTML suivant:


Un appareil fonctionnel, tel qu'un lecteur d'écran, peut utiliser le role="alert" propriété d'annoncer ces informations à l'utilisateur. Le volet Accessibilité dans DevTools peut sélectionner une telle propriété (role) et vous le présentez, afin que les propriétés d'accessibilité d'un élément soient clairement définies.

La validation des informations que vous voyez dans ce volet peut aider à répondre à la question: «Suis-je en train de coder l’accessibilité de manière incorrecte? des choses!

Le volet d'accessibilité utilisé sur le site Web de Smashing Magazine
Le volet d'accessibilité dans le panneau Éléments (grand aperçu)

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

  1. Inspectez n'importe quel élément de la page, par exemple un lien hypertexte ou un champ de recherche
  2. Ouvrez le volet Accessibilité qui se trouve dans le panneau Éléments
    Astuce bonus: plutôt que de devoir localiser le volet (il n’est pas ouvert par défaut), je recherche «Afficher l’accessibilité» dans le menu de commande (Cmd + Décalage + P).

Vous trouverez ici de nombreuses informations, telles que:

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

En fonction de 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 «en direct» – les modifications que vous apportez dans l’arborescence DOM du panneau Elements sont immédiatement reflétées dans ce volet, ce qui est utile pour corriger un attribut ARIA mal orthographié par exemple.

Si vous êtes confiant dans 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 le débogage d'accessibilité avec Chrome DevTools.

Vidéo sur le débogage d'accessibilité avec Chrome DevTools

Phare

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

Si vous avez fait des lectures sur la théorie de l'accessibilité et que vous souhaitez 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.

Un rapport d'audit Lighthouse qui affiche un score de 82 pour l'accessibilité
Un rapport d'audit Lighthouse (Grand aperçu)

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 manière 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 qui en résulte, cliquez sur les différentes suggestions pour en savoir plus à leur sujet
Un rapport d'audit Lighthouse qui montre 21 audits réussis
Les audits réussis sont toujours une bonne opportunité d'apprentissage (Grand aperçu)

Si vous voulez en savoir plus sur l'accessibilité (c'est certainement le cas!), Cliquer sur un échec, mais même des 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 coup d'œil à la documentation d'audit pour garantir une </code> l'élément est présent. Il précise:</p> <ul> <li>Échec de l'audit du titre de phare</li> <li>Comment ajouter un titre</li> <li>Conseils pour créer de bons titres</li> <li>Exemple de titre <em>ne pas</em> à utiliser, avec un titre à utiliser</li> </ul> <p>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.</p> <p>Une chose intéressante à noter, contrairement au volet Accessibilité, les audits des phares sont très instructifs par défaut, ce qui fait du panneau des phares un endroit idéal à visiter lorsque vous commencez tout juste.</p> <figure class="break-out article__image"><img srcset="http://www.maclasseweb.fr/wp-content/uploads/2020/08/1597307984_72_Accessibilite-dans-Chrome-DevTools-Smashing-Magazine.png 400w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d7b4bf85-3b35-471f-9dc1-457051154eb1/accessibility-chrome-devtools-lighthouse-learn-more.png 800w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d7b4bf85-3b35-471f-9dc1-457051154eb1/accessibility-chrome-devtools-lighthouse-learn-more.png 1200w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d7b4bf85-3b35-471f-9dc1-457051154eb1/accessibility-chrome-devtools-lighthouse-learn-more.png 1600w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d7b4bf85-3b35-471f-9dc1-457051154eb1/accessibility-chrome-devtools-lighthouse-learn-more.png 2000w" src="http://www.maclasseweb.fr/wp-content/uploads/2020/08/1597307984_72_Accessibilite-dans-Chrome-DevTools-Smashing-Magazine.png" alt="Un résultat d'audit unique qui a été élargi pour révéler plus de détails"/><figcaption class="op-vertical-bottom">Le lien «En savoir plus» ouvre une nouvelle fenêtre vers une documentation bien rédigée (Grand aperçu)</figcaption></figure> <blockquote class="pull-quote"> <p><a class="pull-quote__link" aria-label="Share on Twitter" href="http://twitter.com/share?text=As%20you%20become%20more%20advanced%20with%20building%20accessible%20pages,%20you%20may%20move%20away%20from%20pre-defined%20audits%20and%20spend%20more%20time%20in%20the%20accessibility%20pane.%0a&url=https://smashingmagazine.com%2f2020%2f08%2faccessibility-chrome-devtools%2f">À 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é.</a></p> </blockquote> <h3 id="emulate-vision-deficiencies">Émuler les déficiences visuelles</h3> <p>Il s'agit d'une fonctionnalité DevTools permettant d'appliquer des déficiences visuelles, telles qu'une vision floue, à la page en cours.</p> <blockquote><p>«À l'échelle mondiale, environ 1 homme sur 12 (8%) et 1 femme sur 200 souffrent de troubles de la vision des couleurs.»</p> <p>– Exigences d'accessibilité pour les personnes malvoyantes</p> </blockquote> <p>Vous souhaiterez utiliser cette fonctionnalité 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 tritanopique (troubles de la vision bleue et jaune), ou même difficile à comprendre pour une personne ayant une vision floue.</p> <blockquote><p>«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. »</p> <p>– Exigences d'accessibilité pour les personnes malvoyantes</p> </blockquote> <p>Par exemple, dans le cas d'une image, vous pouvez constater qu'une image de résolution plus élevée est 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 de résolution de problèmes basées sur la conception / l'expérience utilisateur – éventuellement 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.</p> <p>💡️ <strong>Notez s'il vous plaît</strong>: <em>L’image suivante est partiellement floue, pour illustrer la fonction d’émulation «Vision floue» de DevTools.</em></p> <figure class="break-out article__image"><img srcset="http://www.maclasseweb.fr/wp-content/uploads/2020/08/1597307984_333_Accessibilite-dans-Chrome-DevTools-Smashing-Magazine.png 400w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8b7629f2-b7ba-4467-847e-a749c7488b25/accessibility-chrome-devtools-emulating-blurred-vision.png 800w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8b7629f2-b7ba-4467-847e-a749c7488b25/accessibility-chrome-devtools-emulating-blurred-vision.png 1200w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8b7629f2-b7ba-4467-847e-a749c7488b25/accessibility-chrome-devtools-emulating-blurred-vision.png 1600w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8b7629f2-b7ba-4467-847e-a749c7488b25/accessibility-chrome-devtools-emulating-blurred-vision.png 2000w" src="http://www.maclasseweb.fr/wp-content/uploads/2020/08/1597307984_333_Accessibilite-dans-Chrome-DevTools-Smashing-Magazine.png" alt="Une démonstration de l'émulation d'une vision floue sur le site Web de Smashing Magazine. La fonctionnalité est activée à partir du volet Rendu"/><figcaption class="op-vertical-bottom">La vision floue n’affecte pas les couleurs de la page, mais les autres défauts le font (Grand aperçu)</figcaption></figure> <p>Vous pouvez essayer cette fonctionnalité en suivant les étapes suivantes:</p> <ol> <li>Ouvrez le menu de commande (<kbd>Cmd</kbd> + <kbd>Décalage</kbd> + <kbd>P</kbd> ou <kbd>Ctrl</kbd> + <kbd>Décalage</kbd> + <kbd>P</kbd> sous Windows)</li> <li>Recherchez et sélectionnez "Afficher le rendu"</li> <li>Sélectionnez une déficience visuelle telle que «Vision floue» dans la section Émuler les déficiences visuelles du volet de rendu.</li> </ol> <p>Voici quelques exemples de déficiences visuelles que vous pouvez appliquer via DevTools:</p> <ul> <li><strong>Vision floue</strong><br />Là où la vision est moins précise</li> <li><strong>Protanopie</strong><br />Daltonisme résultant d'une insensibilité à la lumière rouge</li> <li><strong>Tritanopie</strong><br />Vision bleue et jaune altérée</li> </ul> <p>Les fonctionnalités d'émulation comme celle-ci ne rendront pas pleinement compte des différences subtiles dans la façon dont ces déficiences se manifestent chez les individus, sans parler du large éventail de déficiences visuelles. Cela étant dit, cette fonctionnalité peut toujours nous aider en tant que développeurs Web à comprendre et à améliorer l'accessibilité de nos pages.</p> <h3 id="inspect-element-tooltip">Info-bulle Inspecter l'élément</h3> <p>Cette fonctionnalité fait référence à une info-bulle améliorée qui affiche désormais les informations relatives à l'accessibilité lorsque vous utilisez la fonction «Inspecter l'élément». Il s'agit d'une fonctionnalité subtile, mais toujours très importante, car elle peut vous informer de l'accessibilité des éléments, en un coup d'œil.</p> <p>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é, il apparaît dans l'une des actions les plus courantes de DevTools lors de l'inspection d'un élément.</p> <p>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?</p> <figure class="break-out article__image"><img srcset="http://www.maclasseweb.fr/wp-content/uploads/2020/08/1597307984_157_Accessibilite-dans-Chrome-DevTools-Smashing-Magazine.png 400w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7a3dbe3e-72ce-40c3-9db4-fae993d60ad9/accessibility-chrome-devtools-inspect-tooltip.png 800w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7a3dbe3e-72ce-40c3-9db4-fae993d60ad9/accessibility-chrome-devtools-inspect-tooltip.png 1200w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7a3dbe3e-72ce-40c3-9db4-fae993d60ad9/accessibility-chrome-devtools-inspect-tooltip.png 1600w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7a3dbe3e-72ce-40c3-9db4-fae993d60ad9/accessibility-chrome-devtools-inspect-tooltip.png 2000w" src="http://www.maclasseweb.fr/wp-content/uploads/2020/08/1597307984_157_Accessibilite-dans-Chrome-DevTools-Smashing-Magazine.png" alt="L'info-bulle Inspecter l'élément apparaît pour un élément de bouton inspecté. L'info-bulle affiche diverses propriétés d'élément, telles que le remplissage et le rôle"/><figcaption class="op-vertical-bottom">(Grand aperçu)</figcaption></figure> <figure class="break-out article__image"><img srcset="http://www.maclasseweb.fr/wp-content/uploads/2020/08/1597307984_633_Accessibilite-dans-Chrome-DevTools-Smashing-Magazine.png 400w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a2120835-5cfc-47c1-9c62-25cd1d46354d/accessibility-chrome-devtools-inspect-tooltip-alt.png 800w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a2120835-5cfc-47c1-9c62-25cd1d46354d/accessibility-chrome-devtools-inspect-tooltip-alt.png 1200w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a2120835-5cfc-47c1-9c62-25cd1d46354d/accessibility-chrome-devtools-inspect-tooltip-alt.png 1600w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a2120835-5cfc-47c1-9c62-25cd1d46354d/accessibility-chrome-devtools-inspect-tooltip-alt.png 2000w" src="http://www.maclasseweb.fr/wp-content/uploads/2020/08/1597307984_633_Accessibilite-dans-Chrome-DevTools-Smashing-Magazine.png" alt="L'info-bulle Inspecter l'élément apparaît pour un élément d'ancrage inspecté. L'info-bulle affiche diverses propriétés d'élément, telles que la police, la couleur, le rapport de contraste, etc."/><figcaption class="op-vertical-bottom">(Grand aperçu)</figcaption></figure> <p>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 apparues de manière (espérons-le) plus simple.</p> <p>Remarque: cette info-bulle contient également une propriété "Mise au point sur le clavier" (le tout dernier élément). Cela indique si l'élément est accessible au clavier ou non. Si c'est vrai, cela suggérera généralement que l'élément en question peut être ciblé par tabulation.</p> <p>La façon dont je le vois: Inspect Element est un cas d'utilisation extrêmement courant dans le navigateur DevTools, donc choisir des propriétés d'accessibilité utiles pour l'info-bulle Inspect Element peut servir de rappel utile et nous inciter en tant que développeurs Web à enquêter plus avant et à garantir ce que nous construisons est accessible.</p> <h3 id="conclusion">Conclusion</h3> <p>Les outils des développeurs Web pour améliorer l'accessibilité se sont rapidement améliorés au fil des ans, 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.</p> <p>Voici un rappel de ce que nous avons couvert:</p> <ul> <li><strong>Rapport de contraste</strong><br />Vérifiez si l'élément de texte inspecté a un rapport de contraste satisfaisant.</li> <li><strong>Inspecteur d'accessibilité</strong><br />Affichez diverses propriétés d'accessibilité et des informations ARIA.</li> <li><strong>Phare</strong><br />Un vérificateur de site Web qui couvre les meilleures pratiques, l'accessibilité et plus encore.</li> <li><strong>Émuler les déficiences visuelles</strong><br />Un outil pour appliquer des déficiences visuelles (comme une vision floue) à la page.</li> <li><strong>Info-bulle Inspecter l'élément</strong><br />Une info-bulle améliorée qui affiche les informations relatives à l'accessibilité.</li> </ul> <p>Je crée la liste de diffusion Dev Tips si vous souhaitez rester à jour avec plus de 200 conseils de développement Web! Je publie également des tas de ressources de développement Web bonus sur mon <a href="https://twitter.com/umaar">Twitter</a>.</p> <p>C'est tout pour le moment! Merci pour la lecture.</p> <div class="c-felix-the-cat"> <h4>Webinaire gratuit avec Umar Hansa</h4> <p>Smashing TV est une série de webinaires et de diffusions en direct contenant des conseils pratiques pour les concepteurs et les développeurs. <strong>Rejoignez-nous plus tard aujourd'hui</strong> avec Umar pour discuter et explorer les tests de bout en bout avec un vrai navigateur. Le webinaire commence à <strong>19h00 heure de Londres</strong> et est gratuit pour tout le monde! Enregistrer une place →</p> </div> <div class="signature"><img src="http://www.maclasseweb.fr/wp-content/uploads/2020/06/1591269577_223_Comment-tester-l39efficacite-d39un-concept-de-design-Smashing-Magazine.png" alt="Éditorial fracassant"/><span>(rail)</span></div> </div> <p><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> </div><!-- .entry-content --> </div><!-- .post-inner --> <div class="section-inner"> <div class="post-meta-wrapper post-meta-single post-meta-single-bottom"> <ul class="post-meta"> <li class="post-tags meta-wrapper"> <span class="meta-icon"> <span class="screen-reader-text">Étiquettes</span> <svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path fill="" d="M15.4496399,8.42490555 L8.66109799,1.63636364 L1.63636364,1.63636364 L1.63636364,8.66081885 L8.42522727,15.44178 C8.57869221,15.5954158 8.78693789,15.6817418 9.00409091,15.6817418 C9.22124393,15.6817418 9.42948961,15.5954158 9.58327627,15.4414581 L15.4486339,9.57610048 C15.7651495,9.25692435 15.7649133,8.74206554 15.4496399,8.42490555 Z M16.6084423,10.7304545 L10.7406818,16.59822 C10.280287,17.0591273 9.65554997,17.3181054 9.00409091,17.3181054 C8.35263185,17.3181054 7.72789481,17.0591273 7.26815877,16.5988788 L0.239976954,9.57887876 C0.0863319284,9.4254126 0,9.21716044 0,9 L0,0.818181818 C0,0.366312477 0.366312477,0 0.818181818,0 L9,0 C9.21699531,0 9.42510306,0.0862010512 9.57854191,0.239639906 L16.6084423,7.26954545 C17.5601275,8.22691012 17.5601275,9.77308988 16.6084423,10.7304545 Z M5,6 C4.44771525,6 4,5.55228475 4,5 C4,4.44771525 4.44771525,4 5,4 C5.55228475,4 6,4.44771525 6,5 C6,5.55228475 5.55228475,6 5,6 Z" /></svg> </span> <span class="meta-text"> <a href="http://www.maclasseweb.fr/tag/accessibilite" rel="tag">Accessibilité</a>, <a href="http://www.maclasseweb.fr/tag/chrome" rel="tag">Chrome</a>, <a href="http://www.maclasseweb.fr/tag/dans" rel="tag">dans</a>, <a href="http://www.maclasseweb.fr/tag/devtools" rel="tag">DevTools</a>, <a href="http://www.maclasseweb.fr/tag/magazine" rel="tag">Magazine</a>, <a href="http://www.maclasseweb.fr/tag/smashing" rel="tag">Smashing</a> </span> </li> </ul><!-- .post-meta --> </div><!-- .post-meta-wrapper --> </div><!-- .section-inner --> <nav class="pagination-single section-inner" aria-label="Article" role="navigation"> <hr class="styled-separator is-style-wide" aria-hidden="true" /> <div class="pagination-single-inner"> <a class="previous-post" href="http://www.maclasseweb.fr/creer-une-application-meteo-en-ligne-de-commande-a-deno"> <span class="arrow" aria-hidden="true">←</span> <span class="title"><span class="title-inner">Créer une application météo en ligne de commande à Deno</span></span> </a> <a class="next-post" href="http://www.maclasseweb.fr/interview-refonte-du-site-web-de-lempire-state-building"> <span class="arrow" aria-hidden="true">→</span> <span class="title"><span class="title-inner">Interview: Refonte du site Web de l'Empire State Building</span></span> </a> </div><!-- .pagination-single-inner --> <hr class="styled-separator is-style-wide" aria-hidden="true" /> </nav><!-- .pagination-single --> <div class="comments-wrapper section-inner"> <div id="respond" class="comment-respond"> <h2 id="reply-title" class="comment-reply-title">Laisser un commentaire <small><a rel="nofollow" id="cancel-comment-reply-link" href="/accessibilite-dans-chrome-devtools-smashing-magazine#respond" style="display:none;">Annuler la réponse</a></small></h2><form action="http://www.maclasseweb.fr/wp-comments-post.php" method="post" id="commentform" class="section-inner thin max-percentage" novalidate><p class="comment-notes"><span id="email-notes">Votre adresse de messagerie ne sera pas publiée.</span> Les champs obligatoires sont indiqués avec <span class="required">*</span></p><p class="comment-form-comment"><label for="comment">Commentaire</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Nom <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' /></p> <p class="comment-form-email"><label for="email">Adresse de messagerie <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required='required' /></p> <p class="comment-form-url"><label for="url">Site web</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Enregistrer mon nom, mon e-mail et mon site web dans le navigateur pour mon prochain commentaire.</label></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Laisser un commentaire" /> <input type='hidden' name='comment_post_ID' value='2034' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div><!-- #respond --> </div><!-- .comments-wrapper --> </article><!-- .post --> </main><!-- #site-content --> <div class="footer-nav-widgets-wrapper header-footer-group"> <div class="footer-inner section-inner"> <aside class="footer-widgets-outer-wrapper" role="complementary"> <div class="footer-widgets-wrapper"> <div class="footer-widgets column-one grid-item"> <div class="widget widget_text"><div class="widget-content"><h2 class="widget-title subheading heading-size-3">Nos partenaires</h2> <div class="textwidget"><p><a href="https://10-raisons.fr/internet/">Toute l’actualité du web</a></p> </div> </div></div> </div> <div class="footer-widgets column-two grid-item"> <div class="widget widget_recent_entries"><div class="widget-content"> <h2 class="widget-title subheading heading-size-3">Articles récents</h2> <ul> <li> <a href="http://www.maclasseweb.fr/25-tutoriels-procreate-pour-les-dessins-les-illustrations-les-peintures-etc">25 Tutoriels Procreate pour les dessins, les illustrations, les peintures, etc.</a> </li> <li> <a href="http://www.maclasseweb.fr/architecture-celebre-recreee-avec-css-et-javascript">Architecture célèbre recréée avec CSS et JavaScript</a> </li> <li> <a href="http://www.maclasseweb.fr/comment-reparer-lerreur-lors-de-letablissement-dune-connexion-a-la-base-de-donnees-dans-wordpress">Comment réparer "l'erreur lors de l'établissement d'une connexion à la base de données" dans WordPress</a> </li> <li> <a href="http://www.maclasseweb.fr/le-guide-complet-etape-par-etape-pour-2019">Le guide complet étape par étape pour 2019</a> </li> <li> <a href="http://www.maclasseweb.fr/guide-complet-comment-installer-et-configurer-un-theme-wordpress">Guide complet: Comment installer et configurer un thème WordPress</a> </li> <li> <a href="http://www.maclasseweb.fr/guide-complet-comment-choisir-et-installer-les-plugins-wordpress">Guide complet: Comment choisir et installer les plugins WordPress</a> </li> <li> <a href="http://www.maclasseweb.fr/nouvelles-hebdomadaires-pour-les-designers-%e2%84%96-558">Nouvelles hebdomadaires pour les designers № 558</a> </li> <li> <a href="http://www.maclasseweb.fr/application-des-budgets-de-performance-avec-webpack">Application des budgets de performance avec Webpack</a> </li> <li> <a href="http://www.maclasseweb.fr/cette-semaine-en-conception-web-18-septembre-2020">Cette semaine en conception Web – 18 septembre 2020</a> </li> <li> <a href="http://www.maclasseweb.fr/plus-de-70-modeles-de-brochures-dentreprise-modernes">Plus de 70 modèles de brochures d'entreprise modernes</a> </li> <li> <a href="http://www.maclasseweb.fr/experiences-dinteraction-avec-linterface-utilisateur-2-5d-de-yanlin-ma">Expériences d'interaction avec l'interface utilisateur 2.5D de Yanlin Ma</a> </li> <li> <a href="http://www.maclasseweb.fr/smashingconfs-discussions-inspirantes-et-gateau-danniversaire-smashing-magazine">SmashingConfs, discussions inspirantes et gâteau d'anniversaire – Smashing Magazine</a> </li> <li> <a href="http://www.maclasseweb.fr/optimiser-css-pour-des-chargements-de-page-plus-rapides">Optimiser CSS pour des chargements de page plus rapides</a> </li> <li> <a href="http://www.maclasseweb.fr/changer-les-tons-de-peau-des-emojis-par-programme">Changer les tons de peau des emojis par programme</a> </li> <li> <a href="http://www.maclasseweb.fr/comment-concevoir-le-portefeuille-de-developpeurs-parfait">Comment concevoir le portefeuille de développeurs parfait</a> </li> <li> <a href="http://www.maclasseweb.fr/learn-date-fns-une-bibliotheque-de-dates-javascript-legere">Learn date-fns: une bibliothèque de dates JavaScript légère</a> </li> <li> <a href="http://www.maclasseweb.fr/comparaison-des-methodes-de-style-dans-next-js-smashing-magazine">Comparaison des méthodes de style dans Next.js – Smashing Magazine</a> </li> <li> <a href="http://www.maclasseweb.fr/composants-style-react-comparaison-de-7-facons">Composants Style React: comparaison de 7 façons</a> </li> <li> <a href="http://www.maclasseweb.fr/webs-tisses-astuces-css">Webs tissés | Astuces CSS</a> </li> <li> <a href="http://www.maclasseweb.fr/19-effets-de-distorsion-css-trippy-glitchy">19 Effets de distorsion CSS Trippy & Glitchy</a> </li> <li> <a href="http://www.maclasseweb.fr/affinity-designer-vs-illustrator-comparaison-des-avantages-et-des-inconvenients">Affinity Designer vs Illustrator: comparaison des avantages et des inconvénients</a> </li> <li> <a href="http://www.maclasseweb.fr/lecons-tirees-de-soixante-jours-de-reanimation-de-zombies-avec-css-code-a-la-main">Leçons tirées de soixante jours de réanimation de zombies avec CSS codé à la main</a> </li> <li> <a href="http://www.maclasseweb.fr/40-meilleures-maquettes-et-outils-psd-de-site-web-2020">40+ meilleures maquettes et outils PSD de site Web 2020</a> </li> <li> <a href="http://www.maclasseweb.fr/ce-que-vos-clients-doivent-savoir-a-propos-dune-refonte-de-site-web">Ce que vos clients doivent savoir à propos d'une refonte de site Web</a> </li> <li> <a href="http://www.maclasseweb.fr/utilisation-avancee-de-graphql-dans-les-sites-web-gatsby-smashing-magazine">Utilisation avancée de GraphQL dans les sites Web Gatsby – Smashing Magazine</a> </li> <li> <a href="http://www.maclasseweb.fr/chapitre-4-recherche-astuces-css">Chapitre 4: Recherche | Astuces CSS</a> </li> <li> <a href="http://www.maclasseweb.fr/15-meilleurs-tutoriels-de-conception-de-mails-responsive-et-html">15+ meilleurs tutoriels de conception d'e-mails responsive et HTML</a> </li> <li> <a href="http://www.maclasseweb.fr/pourquoi-les-developpeurs-devraient-concevoir-leurs-propres-sites-de-portefeuille-de-niche">Pourquoi les développeurs devraient concevoir leurs propres sites de portefeuille de niche</a> </li> <li> <a href="http://www.maclasseweb.fr/geri-reid-meilleures-pratiques-forms">Geri Reid – Meilleures pratiques Forms</a> </li> <li> <a href="http://www.maclasseweb.fr/5-conseils-pour-concevoir-des-sites-web-dune-page-qui-fonctionnent">5 conseils pour concevoir des sites Web d'une page qui fonctionnent</a> </li> <li> <a href="http://www.maclasseweb.fr/5-conseils-procreate-pour-la-conception-pro-ipad">5 conseils Procreate pour la conception Pro iPad</a> </li> <li> <a href="http://www.maclasseweb.fr/creez-votre-marque-personnelle-pour-booster-votre-carriere-de-developpeur">Créez votre marque personnelle pour booster votre carrière de développeur</a> </li> <li> <a href="http://www.maclasseweb.fr/concevoir-pour-lattention-smashing-magazine">Concevoir pour l'attention – Smashing Magazine</a> </li> <li> <a href="http://www.maclasseweb.fr/les-20-meilleurs-prereglages-lightroom-pour-ajouter-des-effets-instagram-a-vos-photos">Les 20 meilleurs préréglages Lightroom pour ajouter des effets Instagram à vos photos</a> </li> <li> <a href="http://www.maclasseweb.fr/modules-deno-utilisation-meilleures-pratiques-et-importations-de-modules-de-noeuds">Modules Deno: utilisation, meilleures pratiques et importations de modules de nœuds</a> </li> <li> <a href="http://www.maclasseweb.fr/25-modeles-de-logos-fantastiques-mettant-en-vedette-des-animaux-et-des-animaux-domestiques">25 modèles de logos fantastiques mettant en vedette des animaux et des animaux domestiques</a> </li> <li> <a href="http://www.maclasseweb.fr/la-nouvelle-propriete-css-qui-ameliore-vos-performances-de-rendu">la nouvelle propriété CSS qui améliore vos performances de rendu</a> </li> <li> <a href="http://www.maclasseweb.fr/30-modeles-psd-de-maquette-de-logo-gratuits-pour-les-creatifs-en-2020">30 modèles PSD de maquette de logo gratuits pour les créatifs en 2020</a> </li> <li> <a href="http://www.maclasseweb.fr/caracteristiques-des-medias-dinteraction-et-leur-potentiel-pour-des-hypotheses-incorrectes">Caractéristiques des médias d'interaction et leur potentiel (pour des hypothèses incorrectes)</a> </li> <li> <a href="http://www.maclasseweb.fr/17-menus-de-navigation-crees-avec-uniquement-css-sans-javascript">17 menus de navigation créés avec uniquement CSS (sans JavaScript)</a> </li> </ul> </div></div> </div> </div><!-- .footer-widgets-wrapper --> </aside><!-- .footer-widgets-outer-wrapper --> </div><!-- .footer-inner --> </div><!-- .footer-nav-widgets-wrapper --> <footer id="site-footer" role="contentinfo" class="header-footer-group"> <div class="section-inner"> <div class="footer-credits"> <p class="footer-copyright">© 2020 <a href="http://www.maclasseweb.fr/">Apprendre le marketing sur le net</a> </p><!-- .footer-copyright --> <p class="powered-by-wordpress"> <a href="https://fr.wordpress.org/"> </a> </p><!-- .powered-by-wordpress --> </div><!-- .footer-credits --> <a class="to-the-top" href="#site-header"> <span class="to-the-top-long"> Vers le haut <span class="arrow" aria-hidden="true">↑</span> </span><!-- .to-the-top-long --> <span class="to-the-top-short"> Haut <span class="arrow" aria-hidden="true">↑</span> </span><!-- .to-the-top-short --> </a><!-- .to-the-top --> </div><!-- .section-inner --> </footer><!-- #site-footer --> <script src='http://www.maclasseweb.fr/wp-includes/js/comment-reply.min.js?ver=5.4.2'></script> <script src='http://www.maclasseweb.fr/wp-includes/js/wp-embed.min.js?ver=5.4.2'></script> <script> /(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1); </script> </body> </html>