Fermer

septembre 1, 2020

Accessibilité dans Chrome DevTools16 minutes de lecture



À 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…
En savoir plus sur
Umar

Cet article présente quelques 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 les performances 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 avoir l'atelier en ligne d'Umar sur Test frontal et automatisation avancée du navigateur à partir du 19 août (5 jours x 2,5h). Assurez-vous de ne pas rater celle-là!

Je passe beaucoup de temps dans DevTools et, ce faisant, j'ai appris à découvrir 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 haut niveau de contraste 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. 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 [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'intention 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 des couleurs ( Grand aperçu )

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, puis 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 auxquels le contraste minimum et les rapports de contraste améliorés sont satisfaits.

Cette fonction peut également être 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 absolument la peine d'être utilisé sur vos propres sites Web, mais cela nécessite de comprendre les 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:


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 manière 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!

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

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 hyperlien ou un champ de recherche
  2. Ouvrez 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 rectification 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 .

] Vidéo sur le 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. En outre, 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 aidera 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 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
 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 pour en savoir plus sur l'accessibilité (je le sais 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 </code> est présent. Il précise:</p><ul><li> Comment la vérification du titre de Lighthouse échoue</li><li> Comment ajouter un titre</li><li> Astuces pour créer de grands titres</li><li> Exemple de titre <em> non </em> à utiliser, avec un titre valant using</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 rend le Le panneau Lighthouse est un endroit idéal à visiter lorsque vous débutez.</p><figure class="break-out article__image"><a href="https://i1.wp.com/cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d7b4bf85-3b35-471f-9dc1-457051154eb1/accessibility-chrome-devtools-lighthouse-learn-more.png?ssl=1"><img src="https://i2.wp.com/res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d7b4bf85-3b35-471f-9dc1-457051154eb1/accessibility-chrome-devtools-lighthouse-learn-more.png?w=1080&ssl=1" alt=" Un seul résultat d'audit qui a été développé pour révéler plus de détails " data-recalc-dims="1" data-lazy-srcset="https://i2.wp.com/res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d7b4bf85-3b35-471f-9dc1-457051154eb1/accessibility-chrome-devtools-lighthouse-learn-more.png?w=1080&ssl=1 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" data-lazy-sizes="100vw" data-lazy-src="https://i2.wp.com/res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d7b4bf85-3b35-471f-9dc1-457051154eb1/accessibility-chrome-devtools-lighthouse-learn-more.png?w=1080&is-pending-load=1#038;ssl=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class=" jetpack-lazy-image"><noscript><img srcset="https://i2.wp.com/res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d7b4bf85-3b35-471f-9dc1-457051154eb1/accessibility-chrome-devtools-lighthouse-learn-more.png?w=1080&ssl=1 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="https://i2.wp.com/res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d7b4bf85-3b35-471f-9dc1-457051154eb1/accessibility-chrome-devtools-lighthouse-learn-more.png?w=1080&ssl=1" sizes="100vw" alt=" Un seul résultat d'audit qui a été développé pour révéler plus de détails " data-recalc-dims="1"/></noscript></a><figcaption class="op-vertical-bottom"> Le lien «En savoir plus» ouvre une nouvelle fenêtre vers une documentation bien rédigée (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d7b4bf85-3b35-471f-9dc1-457051154eb1/accessibility-chrome-devtools-lighthouse-learn-more.png"> Grand aperçu </a>)</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"> Au fur et à mesure que vous devenez plus avancé 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> Ceci est une fonctionnalité DevTools pour appliquer une déficience visuelle</p><blockquote><p> «Dans le monde, environ 1 homme sur 12 (8%) et 1 femme sur 200 ont des déficiences de la vision des couleurs.»</p><p> – <a href="https://www.w3.org/TR/low-vision-needs/"> Conditions d'accessibilité pour les personnes Basse vision </a></p></blockquote><p> 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 <a href="https://en.wikipedia.org/wiki/Color_blindness"> tritanopie </a> (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. »</p><p> – <a href="https://www.w3.org/TR/low-vision-needs/"> Conditions d'accessibilité pour les personnes ayant une basse vision </a></p></blockquote><p> 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 <a href="https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/"> conception / résolution de problèmes basées sur l'UX </a> – 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.</p><p> ?️ <strong> Remarque </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"><a href="https://i2.wp.com/cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8b7629f2-b7ba-4467-847e-a749c7488b25/accessibility-chrome-devtools-emulating-blurred-vision.png?ssl=1"><img src="https://i2.wp.com/res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8b7629f2-b7ba-4467-847e-a749c7488b25/accessibility-chrome-devtools-emulating-blurred-vision.png?w=1080&ssl=1" alt=" Une démonstration de l'émulation de la vision floue sur le site Web de Smashing Magazine. La fonction est activée à partir du volet Rendu " data-recalc-dims="1" data-lazy-srcset="https://i2.wp.com/res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8b7629f2-b7ba-4467-847e-a749c7488b25/accessibility-chrome-devtools-emulating-blurred-vision.png?w=1080&ssl=1 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" data-lazy-sizes="100vw" data-lazy-src="https://i2.wp.com/res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8b7629f2-b7ba-4467-847e-a749c7488b25/accessibility-chrome-devtools-emulating-blurred-vision.png?w=1080&is-pending-load=1#038;ssl=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class=" jetpack-lazy-image"><noscript><img srcset="https://i2.wp.com/res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8b7629f2-b7ba-4467-847e-a749c7488b25/accessibility-chrome-devtools-emulating-blurred-vision.png?w=1080&ssl=1 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="https://i2.wp.com/res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8b7629f2-b7ba-4467-847e-a749c7488b25/accessibility-chrome-devtools-emulating-blurred-vision.png?w=1080&ssl=1" sizes="100vw" alt=" Une démonstration de l'émulation de la vision floue sur le site Web de Smashing Magazine. La fonction est activée à partir du volet Rendu " data-recalc-dims="1"/></noscript></a><figcaption class="op-vertical-bottom"> La vision floue n'affecte pas les couleurs de la page, mais les autres défauts le font (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8b7629f2-b7ba-4467-847e-a749c7488b25/accessibility-chrome-devtools-emulating-blurred-vision.png"> Grand aperçu </a>)</figcaption></figure><p> Vous pouvez essayer cette fonction avec ce qui suit étapes:</p><ol><li> Ouvrez le menu de commande (<kbd> Cmd </kbd> + <kbd> Shift </kbd> + <kbd> P </kbd> ou <kbd> Ctrl </kbd> + <kbd> Shift </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 dans le 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 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 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"> Inspecter l'info-bulle d'élément</h3><p> 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.</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é, elle 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"><a href="https://i0.wp.com/cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7a3dbe3e-72ce-40c3-9db4-fae993d60ad9/accessibility-chrome-devtools-inspect-tooltip.png?ssl=1"><img src="https://i0.wp.com/res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7a3dbe3e-72ce-40c3-9db4-fae993d60ad9/accessibility-chrome-devtools-inspect-tooltip.png?w=1080&ssl=1" 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 " data-recalc-dims="1" data-lazy-srcset="https://i0.wp.com/res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7a3dbe3e-72ce-40c3-9db4-fae993d60ad9/accessibility-chrome-devtools-inspect-tooltip.png?w=1080&ssl=1 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" data-lazy-sizes="100vw" data-lazy-src="https://i0.wp.com/res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7a3dbe3e-72ce-40c3-9db4-fae993d60ad9/accessibility-chrome-devtools-inspect-tooltip.png?w=1080&is-pending-load=1#038;ssl=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class=" jetpack-lazy-image"><noscript><img srcset="https://i0.wp.com/res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7a3dbe3e-72ce-40c3-9db4-fae993d60ad9/accessibility-chrome-devtools-inspect-tooltip.png?w=1080&ssl=1 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="https://i0.wp.com/res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7a3dbe3e-72ce-40c3-9db4-fae993d60ad9/accessibility-chrome-devtools-inspect-tooltip.png?w=1080&ssl=1" sizes="100vw" 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 " data-recalc-dims="1"/></noscript></a><figcaption class="op-vertical-bottom"> (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7a3dbe3e-72ce-40c3-9db4-fae993d60ad9/accessibility-chrome-devtools-inspect-tooltip.png"> Grand aperçu </a>)</figcaption></figure><figure class="break-out article__image"><a href="https://i0.wp.com/cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a2120835-5cfc-47c1-9c62-25cd1d46354d/accessibility-chrome-devtools-inspect-tooltip-alt.png?ssl=1"><img src="https://i0.wp.com/res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a2120835-5cfc-47c1-9c62-25cd1d46354d/accessibility-chrome-devtools-inspect-tooltip-alt.png?w=1080&ssl=1" 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. " data-recalc-dims="1" data-lazy-srcset="https://i0.wp.com/res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a2120835-5cfc-47c1-9c62-25cd1d46354d/accessibility-chrome-devtools-inspect-tooltip-alt.png?w=1080&ssl=1 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" data-lazy-sizes="100vw" data-lazy-src="https://i0.wp.com/res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a2120835-5cfc-47c1-9c62-25cd1d46354d/accessibility-chrome-devtools-inspect-tooltip-alt.png?w=1080&is-pending-load=1#038;ssl=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class=" jetpack-lazy-image"><noscript><img srcset="https://i0.wp.com/res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a2120835-5cfc-47c1-9c62-25cd1d46354d/accessibility-chrome-devtools-inspect-tooltip-alt.png?w=1080&ssl=1 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="https://i0.wp.com/res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a2120835-5cfc-47c1-9c62-25cd1d46354d/accessibility-chrome-devtools-inspect-tooltip-alt.png?w=1080&ssl=1" sizes="100vw" 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. " data-recalc-dims="1"/></noscript></a><figcaption class="op-vertical-bottom"> (<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a2120835-5cfc-47c1-9c62-25cd1d46354d/accessibility-chrome-devtools-inspect-tooltip-alt.png"> Grand aperçu </a>)</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 présentées de manière (espérons-le) plus simple.</p><p> Remarque: cette info-bulle contient également une propriété "Clignotable au clavier" (le tout dernier élément). Ceci indique si l'élément est <a href="https://web.dev/control-focus-with-tabindex/"> accessible au clavier </a>. 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: Inspecter l'élément 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 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.</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 construisons.</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> Accessibility Inspector </strong><br /> Affichez diverses propriétés d'accessibilité et informations ARIA.</li><li> <strong> Lighthouse </strong><br /> Un vérificateur de site Web qui couvre les meilleures pratiques, l'accessibilité et plus.</li><li> <strong> Émulation des 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 les éléments </strong><br /> Une info-bulle améliorée qui met en évidence les problèmes d'accessibilité</li></ul><p> Je crée la liste de diffusion <a href="https://umaar.com/dev-tips/"> Dev Tips </a> si vous voulez 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 <a href="https://twitter.com/umaar"> Twitter </a>.</p><p> C'est tout pour le moment! Merci d'avoir lu.</p><div class="signature"><img src="https://i1.wp.com/www.smashingmagazine.com/images/logo/logo--red.png?w=1080&ssl=1" alt=" Éditorial Smashing " data-recalc-dims="1" data-lazy-src="https://i1.wp.com/www.smashingmagazine.com/images/logo/logo--red.png?w=1080&is-pending-load=1#038;ssl=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class=" jetpack-lazy-image"><noscript><img src="https://i1.wp.com/www.smashingmagazine.com/images/logo/logo--red.png?w=1080&ssl=1" alt=" Éditorial Smashing " data-recalc-dims="1"/></noscript><span> (ra, il) </span></div></div><p><script async src="http://platform.twitter.com/widgets.js" charset="utf-8"></script><br /> <br /><div class="clearfix button-collection container text-center "></div><div class="clearfix button-collection container text-center "></div><div class="clearfix button-collection container text-center "><a id="layers-widget-layers-pro-call-to-action-3-buttons-554" class="button " href="https://arcoptimizer.com/botinstagram?utm_source=bottom_article_blog&utm_medium=cta&utm_campaign=corporate_estimation"> Le meilleur outil 2021 pour ta croissance Instagram ! </a></div><div class="clearfix text-center "> <button class="circle-action-btn"><div class="circle-action-btn__icon"><i class="ion-speedometer"></i></div> </button></div> <br> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-2247171909266990" data-ad-slot="5039287111"></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script><br /> <br /><a href="https://smashingmagazine.com/2020/08/accessibility-chrome-devtools/">Source link </a></p></div></p><div id='jp-relatedposts' class='jp-relatedposts' ><h3 class="jp-relatedposts-headline"><em>Articles similaires</em></h3></div><div class="swp_social_panel swp_horizontal_panel swp_flat_fresh swp_default_full_color swp_individual_full_color swp_other_full_color scale-100 scale-" data-min-width="1100" data-float-color="#ffffff" data-float="none" data-float-mobile="none" data-transition="slide" data-post-id="47818" ><div class="nc_tweetContainer swp_share_button swp_facebook" data-network="facebook"><a class="nc_tweet swp_share_link" rel="nofollow noreferrer noopener" target="_blank" href="https://www.facebook.com/share.php?u=https%3A%2F%2Fblog.arcoptimizer.com%2Faccessibilite-dans-chrome-devtools-2" data-link="https://www.facebook.com/share.php?u=https%3A%2F%2Fblog.arcoptimizer.com%2Faccessibilite-dans-chrome-devtools-2"><span class="swp_count swp_hide"><span class="iconFiller"><span class="spaceManWilly"><i class="sw swp_facebook_icon"></i><span class="swp_share">Partagez</span></span></span></span></a></div><div class="nc_tweetContainer swp_share_button swp_twitter" data-network="twitter"><a class="nc_tweet swp_share_link" rel="nofollow noreferrer noopener" target="_blank" href="https://twitter.com/intent/tweet?text=Accessibilit%C3%A9+dans+Chrome+DevTools&url=https%3A%2F%2Fblog.arcoptimizer.com%2Faccessibilite-dans-chrome-devtools-2" data-link="https://twitter.com/intent/tweet?text=Accessibilit%C3%A9+dans+Chrome+DevTools&url=https%3A%2F%2Fblog.arcoptimizer.com%2Faccessibilite-dans-chrome-devtools-2"><span class="swp_count swp_hide"><span class="iconFiller"><span class="spaceManWilly"><i class="sw swp_twitter_icon"></i><span class="swp_share">Tweetez</span></span></span></span></a></div><div class="nc_tweetContainer swp_share_button total_shares total_sharesalt" ><span class="swp_count ">0 <span class="swp_label">Partages</span></span></div></div></div><footer class="meta-info"><p><span class="meta-item meta-date"><i class="l-clock-o"></i> septembre 1, 2020</span> <span class="meta-item meta-tags"><i class="l-tags"></i> <a href="https://blog.arcoptimizer.com/tag/accessibilite" title="View all posts tagged accessibilité">accessibilité</a>, <a href="https://blog.arcoptimizer.com/tag/chrome" title="View all posts tagged Chrome">Chrome</a>, <a href="https://blog.arcoptimizer.com/tag/devtools" title="View all posts tagged DevTools">DevTools</a></span></p></footer></article></div></div><div id="back-to-top"> <a href="#top">Revenir vers le haut</a></div></section><footer id="footer" class="footer-site invert"><div class="container content clearfix"><div class="row copyright"><div class="column span-6"><p class="site-text">ARC Optimizer 2020 - article@arcoptimizer.com</p></div><div class="column span-6 clearfix t-right"></div></div></div></footer><div class="search-interface-overlay"><form role="search" method="get" class="search-interface-holder" action="https://blog.arcoptimizer.com/"> <label class="search-text"> Search: </label> <input type="text" id="layers-modal-search-field" class="search-field" placeholder="Type Something" value="" name="s" title="Search for:" autocomplete="off" autocapitalize="off" ></form> <a href="#" class="search-close"> <i class="l-close"></i> </a></div></section><div class="ednpro_main_wrapper ednpro_section"><div class="edn-close-section" id="apex_cookie_0" ><div class="edn-notify-bar edn-position-bottom edn-visibility-show-time edn-custom-template edn_no_close_button" id="edn_custom_template" data-barid="apexbar-0" data-postid="47818"> <input type="hidden" id='effect_type0' value="edn_pro_static"/> <input type="hidden" class='edn_social_optons' value="0"/> <input type="hidden" class='edn_right_optons' value="1"/><div class="edn-container apexnb-bartypeedn_pro_static"><div class="edn-temp-design-wrapper edn-custom-design-wrapper"><div class="edn_middle_content edn_pro_static_pattern"><div class="edn-text-content-wrap"><div class="edn_static_text"><div class="edn-text-link">La boîte à outils parfaite pour obtenir plus de prospects en 2021 !</div> <span class="edn-call-action-button"> <span class="edn-ca-custom"> <a class="edn-static-button" href="https://allleads.arcoptimizer.com/fr" target='_blank'> <span class="edn-ca-static-button">Essai gratuit aujourd'hui</span> </a> </span> </span></div></div></div></div></div> <input type="hidden" class="edn-ticker-option" id="apexnb-ticker-0" data-ticker-speed="" data-ticker-direction="vertical" data-ticker-title="" data-ticker-hover="" data-slider-controls="" data-slider-animation="horizontal" data-slider-duration="" data-slider-auto="true" data-slider-transition="" data-slider-adaptive-height="true" data-scroll-controls="" data-scroll-direction="ltr" data-scroll-animation="reveal" data-scroll-speed="" data-scroll-title="" /> <input type="hidden" class="edn-visibility-bar-options edn-visibility-option-0" id="apexnb-0" data-show-time-duration="200" data-hide-time-duration="" data-visibility-type = "show-time" data-close-type = "disable" data-close-once = "" data-duration-close = "" data-show_once_hideshow = "" data-notification_bar_id = "0" /><div class="apexnb-ccform edn-template-3 edn-popup-form" data-formtype="apexnb-static-custom" data-barid="0"><div class="edn-contact-lightbox" id="edn-static-cf-btn-0-lightbox" style="display: none;"><div class="ednpro_overlay"></div><div class="edn-contact-lightbox-inner-wrap " id="edn-contact-lightbox-inner-wrap-0"><div class="edn-contact-lightbox-inner-content edn-contact-lightbox-inner-wrap apexnb-ccustomform-wrapper "></div></div></div></div></div></div></div><script type="text/javascript">if(typeof quadsOptions !== 'undefined' && typeof wpquads_adblocker_check_2 === 'undefined' && quadsOptions.quadsChoice == 'ad_blocker_message'){ var addEvent1 = function (obj, type, fn) { if (obj.addEventListener) obj.addEventListener(type, fn, false); else if (obj.attachEvent) obj.attachEvent('on' + type, function () { return fn.call(obj, window.event); }); }; addEvent1(window, 'load', function () { if (typeof wpquads_adblocker_check_2 === "undefined" || wpquads_adblocker_check_2 === false) { highlight_adblocked_ads(); } }); function highlight_adblocked_ads() { try { var ad_wrappers = document.querySelectorAll('div[id^="quads-ad"]') } catch (e) { return; } for (i = 0; i < ad_wrappers.length; i++) { ad_wrappers[i].className += ' quads-highlight-adblocked'; ad_wrappers[i].className = ad_wrappers[i].className.replace('quads-location', ''); ad_wrappers[i].setAttribute('style', 'display:block !important'); } } } (function() { //Adblocker Notice Script Starts Here var curr_url = window.location.href; var red_ulr = localStorage.getItem('curr'); var modal = document.getElementById("quads-myModal"); var quadsAllowedCookie = quadsgetCookie('quadsAllowedCookie'); if(typeof quadsOptions !== 'undefined' && typeof wpquads_adblocker_check_2 === 'undefined' ){ if(quadsAllowedCookie!=quadsOptions.allow_cookies){ quadssetCookie('quadsCookie', '', -1, '/'); quadssetCookie('quadsAllowedCookie', quadsOptions.allow_cookies, 1, '/'); } if(quadsOptions.allow_cookies == 2){ if( quadsOptions.quadsChoice == 'bar' || quadsOptions.quadsChoice == 'popup'){ modal.style.display = "block"; quadssetCookie('quadsCookie', '', -1, '/'); } if(quadsOptions.quadsChoice == 'page_redirect' && quadsOptions.page_redirect !="undefined"){ if(red_ulr==null || curr_url!=quadsOptions.page_redirect){ window.location = quadsOptions.page_redirect; localStorage.setItem('curr',quadsOptions.page_redirect); } } }else{ var adsCookie = quadsgetCookie('quadsCookie'); if(adsCookie==false) { if( quadsOptions.quadsChoice == 'bar' || quadsOptions.quadsChoice == 'popup'){ modal.style.display = "block"; } if(quadsOptions.quadsChoice == 'page_redirect' && quadsOptions.page_redirect !="undefined"){ window.location = quadsOptions.page_redirect; quadssetCookie('quadsCookie', true, 1, '/'); } }else{ modal.style.display = "none"; } } } var span = document.getElementsByClassName("quads-cls-notice")[0]; if(span){ span.onclick = function() { modal.style.display = "none"; document.cookie = "quads_prompt_close="+new Date(); quadssetCookie('quadsCookie', 'true', 1, '/'); } } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; document.cookie = "quads_prompt_close="+new Date(); quadssetCookie('quadsCookie', 'true', 1, '/'); } } })(); function quadsgetCookie(cname){ var name = cname + '='; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i].trim(); if (c.indexOf(name) === 0) { return c.substring(name.length, c.length); } } return false; } function quadssetCookie(cname, cvalue, exdays, path){ var d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); var expires = "expires="+ d.toUTCString(); document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; } //Adblocker Notice Script Ends Here</script> <script type='text/javascript'>var aal_amazon_obj = [];</script> <script type='text/javascript'>var socialWarfare = {"addons":[],"post_id":"47818","variables":{"emphasizeIcons":false,"powered_by_toggle":false,"affiliate_link":"https:\/\/warfareplugins.com"},"floatBeforeContent":"1"};</script> <script type='text/javascript'>var fifuImageVars = {"fifu_lazy":"","fifu_woo_lbox_enabled":"1","fifu_woo_zoom":"inline","fifu_is_product":""};</script> <script type="text/javascript">var swp_nonce = "98997d15c1";var swpFloatBeforeContent = true; var swp_ajax_url = "https://blog.arcoptimizer.com/wp-admin/admin-ajax.php"; var swp_post_id = "47818";var swpClickTracking = false;</script> <script type="text/javascript">wow = new WOW( { //boxClass: 'wow', // default //animateClass: 'animated', // default offset: 100, // default //mobile: true, // default //live: true // default } ) wow.init();</script> <script type='text/javascript' src='https://stats.wp.com/e-202130.js' async='async' defer='defer'></script> <script type='text/javascript'>_stq = window._stq || []; _stq.push([ 'view', {v:'ext',j:'1:9.1.1',blog:'146388461',post:'47818',tz:'0',srv:'blog.arcoptimizer.com'} ]); _stq.push([ 'clickTrackerInit', '146388461', '47818' ]);</script> <script type="text/javascript">jQuery(document).ready(function ($) { //$( document ).ajaxStart(function() { //}); for (var i = 0; i < document.forms.length; ++i) { var form = document.forms[i]; if ($(form).attr("method") != "get") { $(form).append('<input type="hidden" name="OmDtxo" value="PBEyz_[Y" />'); } if ($(form).attr("method") != "get") { $(form).append('<input type="hidden" name="UycldRqHYxKP" value="[7uhdF" />'); } } $(document).on('submit', 'form', function () { if ($(this).attr("method") != "get") { $(this).append('<input type="hidden" name="OmDtxo" value="PBEyz_[Y" />'); } if ($(this).attr("method") != "get") { $(this).append('<input type="hidden" name="UycldRqHYxKP" value="[7uhdF" />'); } return true; }); jQuery.ajaxSetup({ beforeSend: function (e, data) { //console.log(Object.getOwnPropertyNames(data).sort()); //console.log(data.type); if (data.type !== 'POST') return; if (typeof data.data === 'object' && data.data !== null) { data.data.append("OmDtxo", "PBEyz_[Y"); data.data.append("UycldRqHYxKP", "[7uhdF"); } else { data.data = data.data + '&OmDtxo=PBEyz_[Y&UycldRqHYxKP=[7uhdF'; } } }); });</script> <script defer src="https://blog.arcoptimizer.com/wp-content/cache/autoptimize/js/autoptimize_24383154566b2e16185b29183d4c0a87.js"></script></body></html>