Romain Linsolas Profile picture
May 18, 2022 20 tweets 7 min read Read on X
Allez, on ne va pas finir la journée sans faire un petit fil de tweets sur les #DevTools quand même ? Et là, je vais aborder le thème de l'#Accessibilité !
L'#Accessibilité, vaste sujet que celui-ci. Rendre un site accessible n'est pas facile et les DevTools permettent de vérifier certains points, de relever certaines lacunes. Ne vous attendez pas à tout résoudre avec ces outils, mais ils sont toujours de bons conseils.
Au-delà de ces outils, vous pouvez avoir quelques réflexes pour améliorer l'accessibilité. Par exemple, pensez régulièrement à n'utiliser que votre clavier pour naviguer sur votre site. Vous pourriez ainsi vite trouver quelques failles.
En terme d'accessibilité, les DevTools fournissent plusieurs choses intéressantes, dont certaines que nous avons déjà vues. Ainsi, une analyse faite avec Lighthouse nous remontera les défauts principaux en terme d'accessibilité. Résultat d'un audit Lightho...
Le détail est intéressant, car non seulement Lighthouse nous indique l'erreur, mais aussi la façon de la résoudre ainsi qu'une capture de l'élément concerné. Ici, une image sans texte alternatif, là un `<span>` sous un `<ul>`. Détail d'un défaut d'access...
Parlons un instant des problèmes de contraste. Rappelons qu'on estime à 300 millions le nombre de personnes dans le monde souffrant d'une anomalie de la perception des couleurs. Les DevTools nous indiquent à plusieurs endroits là où la lisibilité d'un texte est trop faible.
Par exemple dans l'outil "CSS Overview" dont j'ai parlé précédemment, ou encore dans l'outil "Issues". Problème de contraste relev...Problème d'accessibilité re...
Inspectons un élément où la lisibilité est jugée insuffisante. En cliquant sur le petit carré de la couleur du texte, apparait un sélecteur de couleurs, tout ce qu'il y a de plus classique... Sélecteur de couleurs de Ch...
...ou presque, car il indique aussi un "Rapport de contraste". Ici, il est de 1.21, alors qu'il faut au moins 3 pour atteindre le niveau AA et 4.5 pour le niveau AAA. Rapport de contraste de l'é...
AA ? AAA ? Mais de quoi je parle au juste ?
Quand on parle d'accessibilité, on parle souvent de WCAG, pour le Web Content Accessibility Guidelines. Il s'agit d'un ensemble de règles à respecter pour rendre son site accessible.
Ces règles sont ventilées dans différentes catégories, dont une s'appelle "Distinguable"
w3.org/TR/WCAG21/#dis…
Au sein de cette catégorie, nous avons deux règles parlant du contraste. L'une définit le niveau AA (w3.org/TR/WCAG21/#con…), l'autre le niveau AAA (w3.org/TR/WCAG21/#con…). Et c'est donc ces niveaux-là que le sélecteur de couleurs de Chrome nous indique.
Au-delà de l'indication, l'outil nous propose des couleurs proches de celle choisie, mais qui atteignent le bon niveau de lisibilité. Couleur choisie pour attein...
Depuis Chrome 89, il est possible de remplacer ces indicateurs AA / AAA par le nouvel algorithme APCA (Advanced Perceptual Contrast Algorithm), qui considère également le contexte, considérant par exemple la taille de la police de caractères.
developer.chrome.com/blog/new-in-de…
L'outil "Rendering" des #DevTools permet de simuler certaines déficience visuelle telle que l'achromatopsie (absence totale de vision des couleurs). Simuler l'achromatopsie ave...
Ou pourquoi pas une vision floue... Vision floue simulée avec l...
Je pourrais encore parler d'accessibilité et des DevTools, mais je vais m'arrêter après le dernier outil, que nous allons trouver dans l'onglet "Accessibilité" d'un élément. Il s'agit de la capacité d'afficher l'ordre des éléments. Option "Show Source Or...L'ordre affiché
L'affichage à l'écran peut différer de l'ordre dans le code de la page. On peut inverser l'ordre d'affichage avec du CSS (avec `flex-direction`). Un lecteur d'écran ne considère pas CSS, et cela peut nuire à l'utilisation du site, par ex. sur des formulaires complexes. L'ordre est cette fois inve...
Petite note : je trouve la fonction "Afficher l'ordre de tabulation" des DevTools de Firefox bien plus utile, Chrome n'ayant pas d'équivalent pour l'heure (sauf à passer par une extension bien sûr). L'option "Afficher l'o...
Voilà, c'est fini pour aujourd'hui.
Dernière série de tweets demain, avec les outils "Elements" et "Console".
N'hésitez pas à commenter et partagez ces tweets !

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Romain Linsolas

Romain Linsolas Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @romaintaz

May 18, 2022
Bonjour tout le monde. Hier je lançais quelques séries de tweets sur ma présentation à #DevoxxFR sur les Chrome #DevTools. Continuons donc sur notre lancée.
Nous allons aborder les outils "CSS Overview" et "Coverage"...
Tout d'abord, "Coverage" est un outil... de couverture de code (je suis sûr que vous ne vous en doutiez pas). Son principe est simple : instrumenter le code JS et CSS utilisé par le site pour voir quelle partie de ce code est utilisée, et quelle partie ne l'est pas. Outil Coverage des Chrome DevTools
C'est à prendre avec des pincettes : une page du site n'est pas nécessairement représentative du CSS et JS utilisés sur l'ensemble du site. Il serait plus judicieux d'aller sur toutes les pages en réalisant le plus d'actions possibles pour être plus confiant quant à ces mesures.
Read 9 tweets
May 17, 2022
Allez, pour finir la journée, nouvelle petite série de tweets sur les #DevTools. Les 2 premières séries, où il est question de performances, se trouvent ici :

Cette fois-ci, je vais vous parler du "Recorder". Il est lui aussi un outil expérimental, apparu en Chrome 97. Il ne devrait donc pas manquer de nouvelles fonctionnalités dans les versions à venir de Chrome.
Son nom est assez explicite je pense, puisqu'il permet d'enregistrer un scénario utilisateur. On démarre un enregistrement, on navigue sur son site, et une fois terminé, on arrête l'enregistrement.
Read 11 tweets
May 17, 2022
Voici la 2e série de tweets sur les #DevTools. Cette fois-ci, nous allons parler performances.
J'avais évoqué ce point sur la 1e série avec #Lighthouse qui permet de tacler certains points évidents (http/2, compression...) Mais ça ne suffit pas toujours.
La première chose à laquelle on peut penser pour adresser des problèmes de performances, c'est d'utiliser l'outil "Performance" des DevTools #Logique
Cet outil est incroyablement complet. Oui, mais...
Il explique tout ce que fait le navigateur quand il affiche la page : temps passé au chargement des ressources, au scripting, à l'affichage. On peut y voir l'utilisation du CPU, de la mémoire. On a également le détail complet de la pile d'exécution du JavaScript du site.
Read 8 tweets
May 17, 2022
Voici ma première partie sur les #DevTools de Chrome. Nous allons parler #Performances et #Lighthouse. En effet, l'une des utilités des DevTools, c'est de comprendre pourquoi son site ou sa page est lente, et voir ce que l'on peut faire pour y remédier...
Le premier outil est donc "Lighthouse". Il s'agit d'un analyseur de page web. Il faut noter que cet outil n'est pas propre aux Chrome DevTools. On le retrouve sur web.dev/measure/, et peut même s'intégrer dans une chaîne de CI: github.com/GoogleChrome/l…
L'exécution est très simple : on ouvre le panneau adéquat, et on lance l'analyse. On peut y préciser la nature des résultats souhaités : Performances, Accessibilité, Bonnes Pratiques, SEO ou PWA. On peut aussi cibler les mobiles en particulier.
Read 13 tweets
May 17, 2022
Il y a bientôt un mois (déjà 😱!), je présentais mon Tools In Action sur les #DevTools à @DevoxxFR. Merci pour celles et ceux qui y ont assisté. Si vous voulez revoir la vidéo sur Youtube, c'est ici :
Je vais essayer de retracer les principales choses vues et démontrées dans ma présentation en quelques séries de tweets durant toute la semaine.

Trois petits rappels concernant ma présentation.
1. J'ai parlé des DevTools de Chrome (enfin Chromium) qui offrent beaucoup de fonctionnalités que les autres navigateurs n'ont pas. Cela ne signifie pas pour autant que ces derniers sont mal dotés.
Read 7 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(