Replay vidéo « Audit d’accessibilité numérique en live »

Antoine Boursier : Je redis bonjour à tous les gens qui sont arrivés entre deux. On est quand même pas mal, donc c’est plutôt cool. N’hésitez pas c’est vraiment le moment si vous voulez parler d’autres choses. N’hésitez pas à intervenir, à rebondir, à prendre la parole. Vraiment, il n’y a aucun problème, c’est vraiment censé être un échange, c’est pas un podcast. Donc n’hésitez pas… Je vois Vanessa qui réactive sa caméra, c’est peut-être pour dire quelque chose ? Non pas du tout, c’était pour faire coucou. Alors recoucou !

Vanessa : Oui voilà, c’est plus sympa de voir les gens en vrai, quand même !

Antoine : Ah oui ! Y’a des têtes connues là…

Joel Chrabie : Bonjour tout le monde, j’avais une question à vous poser !

Antoine : Tiens on s’est parlé plein de fois sur LinkedIn toi !

Joel : Oui je suis partout. Rires. J’avais une petite question, notamment, au niveau du baromètre, j’ai vu par exemple que la ville de Vannes avait un taux de conformité à 100 %. En allant sur le site de Vannes, j’ai remarqué déjà qu’il y avait une vidéo en AutoPlay, sans aucune possibilité de contrôle. Et du coup je m’interrogeais sur : « Comment est-ce que ça se fait qu’on ait un taux de conformité à 100, alors que déjà, dès la première page, la première chose qui saute aux yeux c’est cette vidéo en AutoPlay ? »

Antoine : Rires Ahah alors… Tu veux répondre Matthieu ? Tu veux que je réponde ?

Mathieu Bouillot : Bah vas-y, et je compléterai. Parce que je suis en train de regarder la ville de Vannes et parce que ça pouvait être 100 % s’il y avait quelque chose mais ça ne l’est pas.

Antoine : Donc en fait c’est ça, en fait les notes sur lesquelles se basent le baromètre elles sont un peu biaisées, alors tout ce qu’on fait sera toujours biaisé. En fait le baromètre on a utilisé les notes RGAA qui ont été données à un instant T par un auditeur T donc Mathieu là ce matin va faire par exemple l’audit du baromètre, il va me donner 80 % parce que ça mérite 80%. Demain, pour X raison… non mais c’est un exemple, hein ! Rires Il va me donner 20 % si tu veux. Tu as vraiment une image de mon travail qui est abominable ! Donc voilà il va me donner 20 %. Si ça se trouve demain je vais faire un… je sais pas, je vais créer une pop-in de pop-up de pop-in de cookies qui est désastreuse et à ce moment-là ça va couper toute l’accessibilité de mon site. Bah mon site sera parfaitement inaccessible donc en  fait hier j’étais à 20 % aujourd’hui je suis à 10 mais entre deux on a pas remis à jour. C’est ce qui  va se passer et c’est pour ça que chez Warren du coup c’est une grande démarche qu’on a pris justement en fait on fait pas trop alors on fait des audits parce que c’est le jeu mais on les fait à un instant T par contre un audit ne vaut rien du tout s’il n’est pas complété par de la formation et par des gens qui maintiennent le niveau d’accessibilité. C’est la même logique qu’en éconception ou en SEO : c’est pas parce que tu as mis un H1 pertinent un jour que ton SEO il va s’entretenir dans le temps c’est pas comme ça que ça fonctionne et … enfin voilà c’est vraiment le jour où tu as fait l’audit, il y avait pas de… il y avait des escaliers et entre deux tu as pété tes escaliers mais tu as pas mis à jour ton audit. Donc là c’est certainement ce qui s’est passé sur la ville de Vannes. j’étais en train de regarder effectivement la vidéo derrière mais ouais…

Mathieu : alors en fait en gros, pour donner un peu plus de de contexte,…

Antoine : est-ce que, pardon, est-ce que c’était clair la partie de pourquoi de qui sont à 100 mais c’est plus mérité ?

Joel : hé non

Antoine : donc vas-y Mathieu pardon excuse-moi.

Mathieu : oui donc ben en fait pour pour comment dire compléter ce que tu dis exactement ils auraient à l’instant T  quand ça a été évalué donc là quand tu regardes la déclaration donc quand tu vas tout en bas dans le footer et qu’il y a la page donc accessibilité totalement conforme et c’est c’est écrit que le 24 donc le 24 juin 2022 ils ont fait le la déclaration et elle a été modifiée 4 mois après le 3 nov… 3 octobre 2022 à la suite d’un contre-audit. Ils ils mettent des contenus qui ne sont pas pris en charge pour charge disproportionné pardon donc alors après il y a pas de… ils disent vidéo présente sur le site, carte open Street Map, bouton case à cocher voilà. et après ils mettent les contenus non soumis à l’obligation : le lecteur vidéo player YouTube, carte open Street Map, et bouton case à cocher. En gros ils se ils se dédouanent en fait parce qu’ils ont pris des contenus de de d’une d’une société tierce. Bon, pour la carte open Street Map oui parce que ça peut être très compliqué de de rendre accessible ça donc il faut avoir toujours une solution alternative, par exemple je prends souvent l’exemple de Google Maps, la la carte google Maps est très complexe pour une pour en accessibilité par contre on va se concentrer sur le bandeau qui est à gauche donc le bandeau blanc où on peut bah rentrer sa destination enfin rentrer point de départ point d’arrivée et cetera et en fait c’est les résultats qui nous intéressent. Le trajet en lui-même c’est c’est vraiment c’est vraiment de la déco entre guillemets voilà donc il faut il faut le google Maps. On va pas comme là carte open Street Map on va pas se concentrer sur la carte on va se concentrer sur le résultat. Moi je suis pas forcément d’accord sur le player YouTube, pourquoi ? Pour charge disproportionnée et cetera en fait à chaque fois c’est un choix que les entreprises font enfin entreprise collectivité enfin voilà de dire bah voilà on met nos vidéos sur YouTube parce que c’est eux qui gèrent le comment dire le l’hébergement la bande passante voilà techniquement parlant c’est c’est lourd d’héberger des vidéos ça ça consomme et donc YouTube est l’un des plus gros donc c’est OK. Par contre on peut faire le choix de ne pas utiliser le player YouTube sur son site. Alors c’est certes très facile parce que on fait juste un embed donc en iframe et on prend et on l’intègre et basta c’est fini. Mais en fait il y a des players accessibles qui existent et en fait qui listent des contenus YouTube donc voilà c’est avec des API etcetera donc ça demande un petit peu de dev, pas tant que ça parce que moi j’en utilise beaucoup et franchement c’est c’est bien et donc pour le coup en fait c’est ok. Vous utilisez YouTube nous en accessibilité on dit bah pas de problème c’est YouTube, par contre ce qu’on veut c’est un player accessible et et donc travailler avec des players qui sont accessibles c’est c’est mieux et surtout ça ne légitime plus le choix de dire bon bah c’est bon on se dédouane c’est YouTube c’est pas de notre faute etcetera même si le player YouTube est plutôt pas mal, il est pas 100 % accessible mais il est plutôt pas mal, mais il y a des solutions qui sont 100 % accessibles donc autant les utiliser donc voilà j’aime pas trop les les dérogations pour notamment les vidéos YouTube enfin le player YouTube parce qu’on peut plein d’autres choses voilà donc Joël vas-y.

Joël : Ouais du coup je continue sur ma lancée. Je voulais savoir comment est-ce que on peut définir qu’est-ce qui est soumis à obligation d’accessibilité et qu’est-ce qui ne l’est pas ? c’est c’est sur la base de quoi ? c’est un peu au pour vouloir ?

Mathieu : alors il y a ça il y a ça malheureusement il y a aussi alors c’est le souvent c’est l’expert et l’experte en accessibilité qui va dire qui va parler avec le client et ou la cliente et dire voilà c’est quoi quel contenu est externe à votre site et cetera, quel quel contenu vous ne ne maîtrisez pas le l’édition, là on voit il y a open Street Map bah oui c’est ils ont utilisé une une solution tierce et donc là on peut dire ok on va pas l’auditer parce que c’est une solution tierce donc ça dépend pas du site là pour le coup on est sur le Vannes mais on on est sur eux mais il y en a plein d’autres. Et après c’est tout le travail aussi de entre guillemets d’intelligence et d’expertise de bah en accessibilité de dire :
ok mais vous vous utilisez pas open, enfin vous utilisez open Street Map mais il faut quand même une solution alternative pour justement bah donner le contenu pour les personnes qui en ont besoin.
Voilà donc c’est vrai que c’est le c’est un peu un choix personnel souvent ça repose sur l’expert et l’experte en accessibilité, malgré que cette personne là fasse le travail avec le client de dire ok pour cibler quel contenu et cetera. Voilà en en exemple, enfin en exemple aussi, les bandeaux cookies. Les bandeaux cookies pendant un temps on on ne s’en occupait pas en accessibilité mais ça a duré un très court temps parce que c’était des solutions tierces donc il y a des contenus comme, des entreprises comme one trust et cetera qui sont très gros qui en fait c’est une une solution clé en main la le la société paye un abonnement et hop ils peuvent paramétrer tous les trucs pour respecter la RGPD ou le RGPD je sais plus et donc comme ça voilà ils se dédoinent du truc, sauf que bah au tout début même encore maintenant sur certains certains comment dire produits de bandeaux cookies c’est pas c’est pas accessible. Et donc moi, pour avoir travaillé avec différents clients et différents gros clients, notamment dans les clients du soit de la grande distribution soit dans le luxe, et ben je leur avais remonté que donc on avait audité le bandeau cookie parce que ça faisait partie intégrante et surtout c’est le souvent c’est la première chose que qui s’affiche sur le site en plus c’est en modale ça recouvre tout donc il faut avoir le consentement puisque c’est la loi avec le le ou la RGPD et comme c’était pas accessible bah voilà ça posait des gros problèmes donc c’était un bug bloquant et donc là j’ai remonté tout ça et mon client a communiqué tout ça. Donc je sais plus si c’était One Trust ou je sais plus qui et en fait dans la semaine c’était corrigé. Donc c’est pour dire que voilà les.. vos clients qui font de l’accessibilité ou qui veulent la conformité, ils ont le pouvoir aussi de demander, et il faut le demander aussi, de mettre en accessibilité les bandeaux cookies ou ou autre chose. Donc oui, pour revenir à ta question parce que je digresse beaucoup, la dérogation c’est souvent l’auditeur ou l’auditrice qui, ou l’expert l’experte en access qui juge de la dérogation alors il est il est pas forcément tout seul moi dans toutes mes expériences c’est c’est moi qui décide mais je demande l’aval aussi et je travaille avec les équipes pour voir vraiment si on peut pas faire autre chose, si on peut pas voilà trouver trouver un autre moyen voilà je vous ai cité la vidéo YouTube par exemple où ça demande un peu de travail donc au début par exemple on peut dire bah ce travail là il est pas encore fait mais on a quand même 3 ans pour le rendre access, les vidéos YouTube par exemple. Donc voilà c’est au début on peut faire une dérogation mais après il y a un travail qui peut être fait derrière sur la roadmap du client voilà.

Antoine : je rebondis vite fait d’ailleurs sur ce que tu dis parce que il y a un truc qu’on a appris justement grâce au, enfin que j’ai appris, grâce au baromètre c’est en auditant les différents secteurs en fait tu te rends compte, je du coup forcément je regardais un peu toutes les les trucs alors tu vois Vannes par exemple le site a beaucoup changé depuis que je suis passé là il mériteraient plus du tout leur 100 visiblement de tout ce que j’ai regardé le 100 n’est clairement plus mérité. C’est pour ça qu’on pense par exemple sur le baromètre à mettre sous peu une histoire de signalement. Pour dire en fait je suis en situation de handicap, je n’ai pas pu accéder à ce site là, ne le signalez plus comme un 100 %. Ce serait une option intéressante mais tourné de la bonne façon pour que ça ne fasse pas non plus trop délation et stratégie donc ça faut faire attention à ça.

Mathieu : clairement non non je je confirme que très clairement ils ne mériteraient pas le 100%. Bon après on a l’impression qu’on casse du sucre, c’est pas ciblé c’est pas… c’est juste de dire le totalement conforme il est il est chaud à atteindre quoi. Donc juste par qui ça a été… la société Accessman ok ! Bon voilà…

Antoine : la fameuse qui audite beaucoup les mairies !

Mathieu : d’accord ok donc…

Antoine : du coup je suis expert en boîte d’auditeurs maintenant.

Mathieu : oui voilà maintenant oui avec tous les audit que tu as mené enfin les…

Antoine : du coup il y a ça, il y a aussi alors tu vois par exemple les dérogations j’en trouvais globalement assez peu des pas justifiées. Bonjour (aux nouvelles personnes connectées) ! Et on s’est rendu compte en faisant le baromètre des banques qu’il y avait un nombre de dérogations mais je sais pas pourquoi enfin c’est horrible, c’est horriblement biaisé mais disons quand on a fait les banques il y avait vraiment beaucoup beaucoup beaucoup de contenu dérogé ! Mais tu avais vraiment des trucs genre bah la partie de mon compte est complètement dérogée la partie page d’accueil est complètement dérogée et tu fais mais attends tu peux pas déroger tous les contenus c’est pas possible quoi ! il y avait vraiment c’est là où de temps en temps on va… on précise dans nos formations ou dans ou sur certains posts en disant faites attention quand même parce que les auditeurs c’est bien gentil, on se doute qu’il y a de l’argent en jeu, l’audit ça reste un business faut faire quand même gaffe à avoir un minimum d’éthique quand même quand on travaille quoi.

Mathieu : et encore une fois là pour revenir parce que on a digressé sur le truc mais pour le parce que je voulais revenir sur ça sur la ville de Vannes avec la vidéo qui se joue en en auto enfin en AutoPlay en automatique en fait il y a un critère en Access c’est que par rapport donc au contenu multimédia si il il se jouait automatiquement mais il dure moins de 4 ou 5 secondes alors là il y a pas de problème, il a le droit de se jouer automatiquement parce qu’après il s’arrête. Par contre si il tourne en boucle même si dure que 2 secondes et c’est donc notamment les GIF, les GIF animés et ben là là on est en erreur. Donc voilà donc c’est pour ça que au tout début quand tu, quand Joël a pris la parole et a dit voilà il y a une vidéo qui se tourne qui se joue automatiquement je suis allé voir pour voir si elle durait moins de 5 secondes et elle ne tournait et si elle était pas en boucle mais malheureusement elle elle dure plus de 5 secondes et elle tourne en boucle donc là on est pas du tout conforme. Donc oui il faut encourager la ville de Vannes à revoir un audit parce que ils ne sont pas totalement conformes alors ils sont sûrement partiellement conformes parce qu’il y a quand même des bonnes choses maintenant après à voir le score aussi. Donc ils vont… c’est sûr ils perdent le totalement conforme, voilà.
Allez, donc qui est-ce que, qui a la main c’est toi, c’est moi ?

Antoine : à propos de quoi ? du partage ?

Mathieu : ouais du partage.

Antoine : c’est moi c’est moi, pour l’instant c’est moi le chef.

Mathieu : c’est toi le chef.

Antoine : mais je t’ai donné les accès pour partager.

Mathieu: Yes, … pour vous donner…

Antoine : non…

Mathieu : vas-y, non vas-y, vas-y, vas-y.

Antoine : c’est mon premier clic mais tu es très bien tombé en fait c’est hyper pertinent en fait c’est de toute façon tu tombes dans les limites du baromètre c’est parfois ce qui nous est reproché tu vois sur LinkedIn dans les messages par exemple des messages hargneux, il n’y a pas d’autres mots c’était hargneux, qui m’ont tué mon moral pendant 2-3 jours, mais en fait malheureusement il n’y a rien qui permet de se fier à une expérience tu vois, à une note. En fait il y a des gens qui me disent bah oui mais en fait se baser uniquement sur les notes c’est pas une bonne chose il faudrait faire des audits et c’est vrai sauf qu’en soit tu vois, l’exemple de la ville de Vannes le prouve, tu fais un audit un jour et le lendemain il n’est plus forcément bon. Je cite toujours l’exemple de… je travaillais chez un grand site de e-commerce avant qui avait un niveau d’accessibilité qui était travaillé très très fort donc ça c’était très cool on on avait atteint au dernier contre audit plus de 80 % ce qui est phénoménal pour un site de ce type là. Et en fait c’était top sauf qu’en fait il y avait quelqu’un qui a lancé un patch d’un plugin qui apparaissait sur toutes les pages du site et qui en fait nous faisait cumuler toutes les erreurs d’accessibilité sur toutes les pages. Une personne était capable de détruire l’audit enfin le travail réalisé par 80 personnes sur ce sujet là. C’est là où l’accessibilité c’est traitre et c’est pour ça qu’on insiste vraiment là-dessus dans les formations il faut former tout le monde en tout cas il faut que tout le monde ait les bases de se dire que bah en fait ce qu’il va faire ça impacte le travail des autres. Alors voilà cette logique elle s’applique pas qu’à l’accessibilité ça marche aussi en UX ça marche aussi en… c’est un bon exemple ouais merci ! Mais oui c’est voilà tu as ce côté là une personne peut vraiment gâcher le travail de beaucoup de gens et gâcher la vie de plein de gens c’est ça dont je parle. C’est dans le top 10 des sites français et donc tu dis attends cette personne là elle a rendu inaccessible à 20 % de la population tout.

Mathieu : il porte le nom d’un métier et le site est orange c’est ça ?

Antoine : Ouais ouais non non mais c’est mais en plus enfin voilà je c’est très dommage d’ailleurs qu’ils aient pas publié leur déclaration un certain temps parce que parce que le site était très bien fait. Les développeurs et les développeuses ont énormément travaillé pour que ce soit fait correctement et c’est très dommage. Mais c’est pas c’était pas une intention mauvaise c’était une méconnaissance et c’est toujours le problème sur lequel on tombe. On voit souvent… j’ai travaillé récemment chez un client qui faisait pareil : les UX étaient formés, les les développeurs et les développeuses sont formés, plein de gens sont formés, il y a une équipe marketing qui était en charge de mettre des photos et à qui on n’a jamais expliqué pourquoi ils devaient remplir les alt de manière pertinente et cetera bah du coup ils se faisaient retoquer sur ces points là au niveau des audits. C’était pas grand-chose mais personne ne prenait 1 heure ou une matinée pour aller leur expliquer pour leur donner un sens c’est très dommage quoi. C’est pour ça qu’en sensi on dit toujours quand on commence nos formations on les commence par des sensibilisations à l’accessibilité et celles-là elles sont open bar tout le monde doit venir, un maximum de gens, et ça peut aller vraiment de de la personne qui fait le ménage sur le site web des cookies à n’importe quoi en fait. Tous les gens qui interviennent sur le site ou qui peuvent intervenir par un biais quelconque doivent avoir au moins deux trois notions.

Et c’est la même chose du coup en écoconception, merci. Du coup bonjour Amélie n’hésite pas à intervenir aussi parce que je sais que tu es… si je ne me trompe pas, tu es chez Engie et tu es une personne qui est particulièrement calée sur ces sujets là donc n’hésite surtout pas. Ah mais oui ! mais oui en éconception c’est le même choix.

Mathieu : et pour répondre à Hamza aussi qui dit « bonjour le taux de validation des critères est vraiment trompeur, un site à 60 % aura peut-être moins de points bloquants qu’un site à 70 % » c’est tout à fait vrai. et même pour la petite anecdote l’État français s’était fixé… donc pendant le je crois que c’était pendant le premier quinquennat du président Macron il s’est dit bah voilà on va mettre à 75 % de conformité au lieu de 50 % légal. Il disait nous il faut viser 75 %. donc les administrations bah il faisaient le taff, ils arrivaient à 75 % et ils disaient bah voilà c’est bon. On a, je tire des grand traits voilà je fais des raccourcis mais il disait voilà 75 % c’est OK. Et en fait nous, donc auditeurs auditrices en access, on était là mais non parce que 75 % il y a il y a encore des bugs bloquants, enfin il peut y avoir des bugs bloquants ! Donc c’est pas parce qu’on atteint un bon score que tout est OK et cetera donc il faut… le plus important c’est vraiment de… alors bien sûr atteindre le plus haut score possible et d’ailleurs l’État français a changé la règle et s’est dit maintenant il faut atteindre le plus haut score possible sans bug bloquant et c’est ça en fait qu’il faut atteindre. Alors bien sûr il faut atteindre la conformité la plus haute donc voilà et donc le les les bugs bloquants ça va être bah plein de choses, notamment la navigation au clavier, les modales, ça va être souvent les couleurs, c’est très voyant donc et souvent c’est la première chose qu’on fait d’ailleurs c’est dans l’une des premières thématiques du RGAA. Qu’est-ce qui peut être bloquant ? Il y a plein plein plein de choses qui peuvent être bloquantes. Les scripts voilà en Javascript si vous déclenchez des choses avec des boutons qui ouvrent un panneau ou voilà les alertes les formulaires avec les erreurs et ceteta voilà et donc ça peut occasionner des erreurs. Donc voilà tout à fait d’accord. Et donc « Connaissez-vous AccessScore ? c’est une méthode qui ajoute des points bonus… »

Antoine : j’étais en train de regarder, c’est assez bluffant ! C’est très rigolo, je vous invite du coup, Hamza a mis un truc hyper intéressant. C’est quelque chose qu’on a envisagé à l’époque avec le baromètre et alors je trouve que la méthode elle fonctionne très bien mais elle a un énorme défaut qui était le défaut qu’on a observé chez beaucoup d’autres de ce type d’acteurs. C’est qu’elle n’est pas vulgaire, au sens où… et c’est tu noteras d’ailleurs que c’est le travail inverse qu’on fait sur le baromètre en fait le problème de l’accessibilité c’est que un site comme lequel sur lequel vous allez là AccessScore il est pas sexy il donne pas envie il est hyper blindé de texte et en fait du coup personne n’a envie de le lire. Et ça c’est le défaut d’énormément de bonnes initiatives et c’est… moi je trouve qu’on tombe dans un problème alors qui n’est plus de l’accessibilité mais bien de l’UX, c’est que là il font vivre une expérience assez détestable, parce que même moi tu vois qui suis passionné du sujet…

Mathieu : détestable, tu y vas fort quand même !

Antoine : Ouais pardon peut-être que j’exagère mais d’accord pas détestable mais la masse de texte quand même !

Mathieu : Attends je connaissais pas… ah oui quand même. Après c’est… c’est quoi ?

Antoine : la meilleure initiative mal vendue, ça reste à mon sens la pire façon de procéder possible quoi. On dit l’idée est magnifique mais tellement mal vendue. Tu en as plein des idées comme ça il y a eu des pictos d’access par exemple ça c’est un sujet où trois personnes ont fait un truc merveilleux dans leur coin et l’ont pas propagé bah oui tu te retrouves dans des situations comme ça qu’il faut absolument éviter je trouve.

Mathieu : c’est toujours…

Antoine : c’est là où l’UX a son intérêt.

Mathieu : le débat des, comment dire, des projets open source où derrière il y a vraiment tout ce qui va avec l’Open Source : l’ouverture, le partage et cetera. Et versus les solutions privées où les solutions privées souvent ont un meilleur design mais c’est privé voilà… On reste donc c’est un débat qui est assez grand et mais malheureusement… après voilà là je moi personnellement je ne connaissais pas AccessScore, il reprend un peu les… dès que je suis allé j’ai cliqué le truc il reprend un peu les les notations sur les aliments là le Nutriscore là…

Antoine : Ouais. Et c’est la boîte Lemon Interactive qui avait voulu concevoir un système un peu dans le même style pour l’écoconception parce que du coup il y a déjà des bases mais ouais en fait ce qui existe c’est souvent, c’est… ouais voilà EcoIndex ! Le site n’est pas très sexy non plus…

Mathieu : Le truc en fait qui est aussi embêtant avec l’accessibilité… parce que il n’y a pas… tout n’est pas super aussi en access, notamment avec le RGAA : comment on note les choses, comment on évalue les choses, en fait c’est très binaire : souvent c’est 0 ou 1, c’est conforme ou non conforme, il n’y a pas de subtilité dans la notation. C’est-à-dire par exemple bah, on va le voir avec le baromètre, mais dans mon exemple il y a une page elle a 10 images, il y en a 9 qui sont bonnes, elles ont un… soit elles ont un alt rempli parce qu’elles sont informatives, soit elles n’ont pas de alt rempli parce qu’elles sont décoratives. Mais il y en a une, la dixième, qui est une image informative mais avec un alt rempli. Et ben en fait on va planter le critère des images parce qu’il y en a juste une qui est pas bonne alors que les 9 autres sont super. Et donc ça c’est quelque chose que les WCAG donc c’est Web Content Accessibility Guidelines travaillent sur la nouvelle version encore de notation c’est encore en draft et cetera mais ils voudraient revenir avant… avant qu’on ait cette version là actuelle des WCAG 2.2… enfin 2.1 vraiment parce qu’on se base sur celle-ci en Europe…. mais il y a les 2.2 qui sont arrivées récemment. Avant cela en fait il y avait le RGAA aussi, il notait avec des médailles bronze, argent, or et il y a eu toute une réflexion, alors je sais pas encore où ça en est en terme de réflexion, de revenir sur ce genre de notation. Donc ça demande bien sûr pour les auditeurs auditrices ça va demander un travail supplémentaire. Mais par exemple l’idée ça serait, là sur mon exemple des images, il y en a 9/ 10 qui sont ok donc on serait bronze à 100 % mais argent on serait à, je sais pas moi 80 %. Et donc justement, et à la fin on ferait un total de tout ça et voilà. Donc je mets encore beaucoup de guillemets quand je dis ça parce que je suis pas sûr à 100 % que ça va aller dans ce sens-là, mais je trouve ça vraiment intéressant de dire au lieu que ça soit binaire non conforme/conforme, bah on apporte un peu plus de nuances et de subtilité et c’est parce que comme le disait… parce que comme ça je raccroche les wagons… comme le disait Antoine au tout début c’est que tout le monde doit être formé, sensibilisé bien sûr et ça va même au-delà de l’équipe produit ou projet hein donc souvent c’est un peu le trio designer, développeur et chef de projet ou product owner et il y a aussi les contributeurs et contributrices qui doivent être sensibilisés et formés, parce que on a beau faire nous en design et en tech tout bien le dev, l’architecture et cetera et tout, il suffit malheureusement de publier une vidéo sans sous-titres ou une image informative mais sans alt et ben on va perdre ça va impacter le score. Donc voilà, tout le monde doit être sensibilisé mais même après ça va au-delà de tout, ça vaut aussi pour les personnes dirigeantes, les RH, les commerciaux et cetera. Et il faut justement aller sur ces genres de métiers pour aussi les rallier à la cause.

26:00 Antoine : Tout à fait !

Mathieu : On est partis ?

Antoine : bah on est partis. Si tu veux, le temps que tu lances…

Mathieu : ah oui ah mais on est quarante wahou trop bien !

Antoine : Oui on est vachement nombreux, je ne m’y attendais pas, c’est très cool merci. Du coup je relance je disais merci, re-merci à tous plein de gens qu’on connait, plein de gens qu’on connait pas, plein de gens de différents milieux du numérique, donc c’est très cool de vous voir tous, merci pour les petits emojis voilà ça fait plaisir. Donc on va tout doucement lancer l’audit par Mathieu.

Mathieu : Yes 

Antoine : on va utiliser pour l’accessibilité…

Mathieu : excuse-moi je t’ai coupé pardon.

Antoine : non, enfin tout va bien. On va lancer du coup l’audit par l’outil ARA. L’idée c’est d’utiliser le… donc le gouvernement… l’État, pardon pas le gouvernement, l’État et donc la cellule Design Gouv a utilisé le… a créé pardon une plateforme qui s’appelle ARA. Je sais pas ce que ça veut dire d’ailleurs ARA et personne va redemander et du coup on va aller revérifier en ligne… je sais pas ce que ça veut dire, je viens seulement de me poser la question et ça ça vous permet de faire des audits sous trois formes : la forme légère, moyenne et complète. Ce qui est plutôt pas mal pour vous donner quelques bases d’Access en tout cas moi ça nous ça nous sert pas mal on s’en sert beaucoup voilà. Et ce matin on va du coup utiliser entièrement cet outil pour réaliser cet audit là. Alors, avant qu’on ait des détracteurs sur le sujet, au cas où parce qu’on le voit facilement, non l’outil ARA n’est pas parfait évidemment nos outils internes ne sont pas non plus parfaits c’est juste que voilà c’est un très très très très bon outil Arnaud vient de dire « c’est Audit Rapide d’Accessibilité » bah ah merci audit du référenciel d’accessibilité c’est bien il y a des on était pas loin ben il faudra demander parce que il y a  sûrement une signification derrière cet acronyme audit rapide d’accessibilité je pense que c’est c’est  la vraie signification ah non ah non il att ah non cé une tentative bah écoute elle est pas mal franchement elle est pas mal

Mathieu : pour le coup pourquoi pour donner un peu de contexte aussi d’habitude comment on fait un il y a donc moi je pour donner un peu de contexte ça fait 13  ans que je fais du web je suis intégrateur à la base et je suis passé après developper front avec toute l’évolution du métier avec gérer une équipe jusqu’à 10 personnes pour dev front pour des développeurs et cetera et après au tout début j’étais confronté à l’accessibilité donc c’est vraiment confronté c’est le bon terme jusqu’à après à Aimé énormément ça et en faire  mon métier où quand j’étais confronté à ça c’était 
notamment parce que l’entreprise pour laquelle je travaillais à l’époque travaillait avec certains ministères de l’État notamment le ministère de  l’armée et via ce ministère là en fait ils avaient ils disaient dans leur leur cahier  des charges qu’il fallait respecter le le RGAA et je ne connaissais pas du tout ce ce que c’était donc je suis arrivé dans ce monde en mode ok avec des idées bien préconçu qu’on m’avait appliqué et enseigné à l’école même mes tuteurs que j’avais me disait non il faut que tu fasses  comme ça comme ça comme ça et une fois formé par bah parce qu’on peut faire de la pub aussi parce qu’ils font d’excellentes formations aussi Access42 la formation dev certifié et en fait j’ai réappris mon métier d’intégrateur et de dev front parce que j’avais des idées assez arrêtées sur certaines choses et cetera parce qu’on m’avait enseigné comme ça et c’est là le grand défaut de l’accessibilité aussi c’est que c’est pas encore enseigné à l’école en école de design en école de tech en école de chefferie de projet par exemple même pour les commerciaux aussi  ça pourrait être aller là et donc c’est ça en fait c’est ça qui est difficile avec l’accessibilité c’est que c’est on arrive sur le terrain et donc dans un le premier emploi et bah on dit bah maintenant ok c’est bien super tu fais des jolis design donc pour un designer par exemple sauf que c’est pas accessible tes couleurs et là on quoi qu’est-ce qui se fait donc voilà donc après sur là les couleurs c’est un critère assez simple il y en a plein d’outils on va les on va les tester ensemble et mais il y a sur notamment pour le dev c’est là aussi le ce qu’il faut savoir c’est que la charge de travail en accessibilité repose quand même en grande partie donc entre 60 et 70% sur les codeurs ou les codeuses que ça soit front ou back alors c’est quand même plus du frontend puisque c’est quand même plus ce qui se voit par rapport au backend ou tout ce qui est base de données et cetera mais le php par exemple ou d’autres d’autres langages de développement a aussi un impact puisque les développeurs backend fournissent aussi les choses au développeur Frontin qui lui après vient travailler la la donnée la structurer la placé avec le CSS et cetera donc c’est aussi intéressant de parler aussi au développeur backend parce qu’ils peuvent déjà en amont aussi être faire des choses pour les développeurs front end donc entre 60 70 % pour les développeurs et développeuses et le reste ça va être partagé avec les designers et la chefferie de projet plus la contribution voilà donc souvent je fais un 70 20 30 en gros 70 % dev 20 % design et 10 % le reste ça dépend les experts et les expertes pardon voilà mais grosso modo on n’est pas loin dans ce genre de chose donc quand même c’est quand même un gros travail en accessibilité par le dev et donc mon cher collègue Antoine quand il a créé le baromètre dès le début en fait il avait l’idée de faire des erreurs d’accessibilité puis que dès le début on voulait faire un audit pas forcément en live mais on c’était mon excuse bah certes alors il y a des erreurs que tu as pas fait exprès je le sais et il y a des erreurs que tu as dit oui typiquement hier on en a rajouté pour justement bah donner parce qu’on s’est dit on fait un live donc on va pouvoir montrer comment corriger ce genre d’erreur et cetera il y a même des débats qu’on va avoir aussi on va vous solliciter aussi notamment sur les images et c’est bien que ma collègue Karine enfin notre collègue Karine qui est aussi experte en accessibilité soit là aussi pour amener aussi de l’eau au moulin comme on dit donc on est parti le monde alors vas-y g lance et moi je refis un dernier donc hésitez surtout pas à poser des questions il y a un tchat il y a un truc de question à l’oral aussi levez la main tout simplement voilà essayer de mettre des smiley du coup pardon je sais qu’il y en a quelques-uns ici qui ont fait des formations avec moi hésitez surtout pas à utiliser les smiley juste pour nous envoyer une réaction un machin ça fait toujours vivre un peu le tchat merci beaucoup, voilà ça fait toujours un peu plaise et et ça nous donne un peu de retour en fait on sait que vous êtes tous tous en vie et que et que vous nous entendez que vous nous voyez et cetera qu’est-ce un onglet chrome non une fenêtre voilà chrome alors est-ce que je fais Chrome Firefox parce que Chrome n’est pas alors pour vous réexpliquer un petit truc aussi vas-y vas-y tu je te laisse avancer comme ça Firefox on a une demande der ouais Firefox c’est plus c’est c’est plus mieux donc on est du coup les maquettes étaient déjà rendu accessibles puisque donc il y a eu un travail d’accessibilité avant sur les maquettes et ensuite quand on a alors pour info le site a été développé par le billet de l’a c’est-à-dire qu’en fait j’ai alors j’ai des bonnes compétences quand même pour développer un un un terme WordPress et un d’aller assez loin en terme de développement CSS PHP HTML mais là il y avait certaines limitations et en fait on a justement testé la logique d’utiliser l’IA pour s’appuyer dessus pour dire bah fais-moi l’accessibilité de ce code ça nous permettait nous de tester bah la capacité réelle al on pense à faire un un petit sujet là-dessus en en Meetup dans les prochains mois parce que c’était hyper intéressant de voir ce qu’elle pouvait faire ou ce qu’elle pouvait pas faire notamment sait extrêmement bien suivre le  RGAA donc ça c’est plutôt cool mais elle aura tendance à être un peu bête parce qu’elle n’est pas humaine tout simplement est plus plutôt pas humaine que autre chose et donc vouloir par exemple forcément renseigner les alt de toutes les images VO ça c’est un défaut qu’elle a chat GPT on a utilisé parce que du coup on est des grands fans de chat GPT en interne et ça nous a permis de pousser vraiment le truc assez loin en fait à faire vraiment des options de configuration chez nous qui sont extrêmement cool et vraiment l’idée c’est de lui dire bah en fait de base c’est tout de suite accessible tu penses qu’à ça et tu fais tout et donc bah déjà quand je faisais quelque chose qui lui paraissait pas être très accessible c’est GPT4 du coup qu’on a utilisé et donc voilà elle elle réfléchit tout comme ça et c’était cool mais par contre c’est vraiment pas suffisant clairement je je l’ai vraiment éprouvé elle est pas assez futé pour travailler toute seule en tout cas à l’heure actuelle faut vraiment la guider faut y aller pas par pas mais c’est intéressant c’était très intéressant de travailler avec elle c’est pour ça que voilà donc là normalement pour moi je suis à mon top d’accessibilité donc c’est là  où Matthieu va intervenir va maintenant me dire où est-ce que j’ai merdé où est-ce que j’ai pas merdé qu’est-ce qui est bien qu’est-ce qui est pas bien il y a des sujets de débat parce que bah tout le monde n’est pas toujours d’accord.

Mathieu : Voilà donc n’hésitez pas à venir enrichir les débats dire non c’est nul ce que vous faites c’est comme ça qu’il faut faire voilà c’était le but du jeu donc alors attendez je vais arrêter parce que je vais devoir afficher des données ont-ils  ajouté la possibilité de audit et oui c’est ça qui est super bien tout à fait en gros quand est  sorti alors j’ai plus les dates faudra regarder la moi c’est un peu plus d’un an les notes des versions voilà Antoine et moi on a été sollicité pour parce qu’on avait répondu au formulaire en  fait pour l’amélioration et et on a participé en fait à à comment dire on était sollicités pardon par l’équipe pour via une visio pour dire voilà comment tu utilises ARA et cetera et voilà les nouveautés qu’on a fait et toi qu’est-ce que tu voudrais et cetera et je pense que derrière le formulaire de retour il y a eu le fait de créer un compte et de stocker les audits pour pouvoir justement les retrouver parce qu’avant c’était pas stocké voilà donc enfin c’était stocké mais il y avait pas de création de compte et donc là ils l’ont fait  donc c’est pour ça on s’est dit bah tiens on va en profiter pour revoir un peu l’outil le truc c’est que normalement quand on fait un audit voilà c’est ça aussi où je voulais en venir quand je vous parlais de mon expérience certaines sociétés d’accessibilité qui donc on est en France donc de celle celle en France j’en ai j’ai travaillé avec certaines ont la grille officielle donc du RGAA donc quand on va sur le site du RGAA on peut télécharger le kit d’audit et dans le kit d’audit il y a la grille officielle RGAA et certaines entreprises société d’accessibilité prennent cette base là et refont une grille à eux pour l’améliorer avec des des formules Excel en plus extérieur et cetera donc voilà donc ça reste quand même valide logique puisque c’est la grille c’est basée sur la grille officielle et eux ils amènent après des formules Excel.

Nous bah quand moi j’ai quitté ces entreprises pour arriver chez Warren Walter on on a n’avait pas on allait pas recréer tout ça donc on s on partait en fait et on part toujours sur la grille officielle du RGAA pour faire tout ça donc c’est un Excel non c’est un point ODS je crois pour être plus open source mais qui s’ouvre avec Excel et et donc on on vient rentrer dans la grille Excel et cetera le il y a des inconvénients et des avantages à utiliser Excel le moi ce que j’aime bien dans Excel c’est la portabilité des choses c’est-à-dire que c’est un fichier que on peut on peut le se balader avec et cetera on peut l’envoyer au clients et cetera aussi et tout le défaut si je peux dire que c’est un défaut bah c’est une grille Excel donc c’est pas fait pour moi pour un audit c’est-à-dire que quand on on vient décrire un bug et qu’on commence à  mettre des des grands pavets de texte bah c’est pas fait pour en fait parce que c’est dans une cellule donc ça ça demande une certaine une certaine logique et une certaine il faut être rigoureux et rigoureuse dans la structure de l’information quand on fait un retour de bug  par exemple l’un des plus gros critères c’est les critères enfin c’est la thématique script et donc le Javascript notamment et souvent on on même là sur le site du baromètre on va va va y avoir ça on on met des tartines excusez-moi de d’utiliser cette image là mais on met des tartines de texte parce que bah il y a beaucoup de bugs et cetera et c’est pas c’est pas du tout digeste voilà si je peux aussi donner une image culinaire entre la tartine et et la digestion c’est pas du tout agréable en tout cas pour une personne qui reçoit l’audit bah de lire un fichier Excel et cetera donc voilà il y a des bons et des mauvais points et moi ce que j’aime bien dans ARA aussi alors c’est pas du tout de la promo ni rien c’est juste que on teste un outil et c’est ça nous permet de faire aussi de montrer qu’il y a d’autres outils qui existent et que l’État français fait des choses aussi bien dans ce sens là pour…

Antoine : Cette vidéo est sponsorisée par ARA ! Je joue le youtubeur, merci à notre sponsor du jour Design Gouv ça serait drôle pas du tout donc…

Mathieu : tu m’as coupé j’étais dans un élan d’explication.

Antoine : Excuse-moi, pardon.

Mathieu : T’inquiète ! Et donc l’outil a été mise à jour et cetera et avec ils ont ils prennent voilà ils travaillent à améliorer l’outil et tout et donc c’est cool de de de voir que bah l’Etat produit des des choses le truc c’est que il y a des des d’ experts et expertes en accessibilité qui trouvent que cet outil est n’est pas enfin ne sert à rien et voilà il y a des avis moi personnellement et Antoine aussi je pense que on se rejoint dessus c’est un outil qui est cool qui est bien qui existe il faut pouvoir l’utiliser donc je vais je vais pouvoir récupérer mon mot de passe parce que j’avais pas j’avais perdu mon mot de passe donc je reviens j’arrive hop oui surtout du coup l’outil en fait il est chouette parce que déjà il évolue ce qui est pas forcément le cas de de de grill excel par exemple inter Ouat l’outil il évolue et il évolue dans le bon sens parce que nous les tests qu’on a fait ce sont des tests utilisateurs donc en fait on nous a pas dit bon ben ah qu’est-ce que tu aimes qu’est-ce que tu veux comme fait vraiment passer les tests utilisateurs faire un audit en live et cetera donc vraiment intéressant ils ont vraiment une démarche UX du coup pour le voilà il est maintenu c’est ça merci Natalie du coup ça prend en compte tous les avis voilà donc ils prennent en compte les avis ils font des tests utilisateurs ils sont impartiaux c’est c’est con mais ça ça joue beaucoup ils sont très impartiaux donc c’est déjà très intéressant pour tout ça l’avoir déjà utilisé l’année dernière à part ce point hitant j’avais trouvé sympa bah ouais il est plutôt c’est ça qu’en fait il est très dénigré par certaines boîtes d’Access mais nous on n pas compris vraiment il il est plutôt cool alors peut-être qu’au quotidien il suffit pas quand quelqu’un fait 300 audit par semaine B bien pour faire oui c’est beaucoup mais ça fait beaucoup là non mais on peut imaginer voilà ça ça et du coup peut-être que dans ce cas-là typiquement ça suffira pas il y a des il y a des sociétés qui sont spécialisées vraiment dans l’audit et qui font que ça donc des machines à audit Etam ils en font beaucoup donc peut-être que dans une logique de de C cette logique là c’est peut-être pas un outil adapté aussi après il y a aussi bah  comme je disais le Excel aussi c’est pas mal c’est que tu peux le partager et cetera là ARA c’est création de compte donc ça reste un peu unique à moins que tu crées un compte pour ton entreprise global et donc tu mets tous les audits il y a aussi une stratégie à avoir moi je pense que ça faut pas forcément fermer la porte et faut être un peu plus ouvert et de dire faut laisser sa chance au produit comme on dit donc et là voilà c’est ça exactement tu attaques Mathieu là ou quoi ? 

Mathieu : je récupère mon mot de passe désolé on a 30 minutes de retard déjà sur l’audit aujourd’hui 

Antoine : en plus Mathieu fait un audit très rapide du coup on peut se dire tiens c’est bizarre un audit en 3h ça va pas prendre beaucoup de temps c’est clair que le site est quand même light alors en plus ça va répondre du coup à deux trois mails qu’on a reçu qui n dis ouais c’est facile vous avez quatre pages c’est pas faux c’est pas faux en même temps techniquement je ne suis pas soumis à la loi RGAA puisque je ne fais pas même dans les prochaines règles je ne fais pas du tout ce chiffre d’affaires là je ne suis pas du domaine public officiellement et cetera donc je suis pas censé être soumis à la loi RGAA mais on va quand même le faire parce que bah quand même un site sur l’accessibilité c’est quand même un peu dommage qu’on soit pas nous-même accessibles. Donc voilà mais du coup effectivement j’ai peu de template de page je suis en train de de les vérifier mais voilà c’est pas fou fou j’en ai pas 1 million et surtout sur ces 100 million ça a été vraiment conçu déjà de manière accessible donc déjà Matthieu n’aura pas vérifier 90 % du travail qui a déjà été fait il sait déjà que certains textes ont été bien pensés et cetera mais certain ouai ça va aller vite enfin ça va aller vite donc comment ça se présente ARA pour vous présenter rapidement donc moi je me suis connecté là mais on n’est pas obligé de se connecter on peut faire démarrer un audit on a donc une page explicative, l’accueil et cetera on voit qu’on a donc commencé un audit rapide un audit complémentaire ou un audit pardon audit complet dit de conformité donc audit de conformité le RGAA c’est 106 critères et 258 tests qui sont joués donc bah c’est beaucoup de choses voilà faut ça demande pas mal de choses ce qui est bien c’est qu’on a dans le RGAA donc il a les les les critères et les tests mais aussi on a un glossaire et personnellement même après 8 ans je reviens toujours dans le glossaire pour vraiment bien comprendre certaines choses pour parce que voilà bah on n’est pas des machines c’est bien de vérifier les choses et surtout que le RGAA évolue donc il y a une une grande communauté une derrière aussi ça où des experts expertes et auditeur auditrices remontent à jeis c’est la DINUM oui c’est ça qui gère le je crois que c’est la DINUM oui c’est DINUM qui voilà le quand est-ce que ça va être mise à jour cela cela cela et cetera donc bref donc on est parti je démarre un audit moi je fais donc un audit complet donc après il va générer le site le nom du site donc baromètre des sites accessibles des sites le baromètre de l’accessibilité qui du coup est pas la même chose et le baromètre qu’ enfin qui a lancé qui a proposé Content Square la Fondation Content Square pardon ils ont lancé ça la semaine dernière c’est du coup un livre blanc de l’état de l’accessibilité numérique en France et du coup on n pas du tout sur la même démarche on est pas du tout sur la même logique entretien annuel voilà c’est pas du tout le même sujet même si le nom se ressemble beaucoup évident exactement donc comment parce que j’ouvre les chose parce que pour vous dire en gros  quand on fait un où ça sur ouais je te l’ai envoyé sur je t’ai fait un Google sheets ah c’est gentil et ben je vais je vais l’ouvrir mais comme ça ça me donne les explications tout de suite enfin je donne les explications tout de suite en gros quand on fait un audit on doit sélectionner donc des pages on appelle ça le panel de page ou l’échantillon de page le RGAA donc référentiel général d’amélioration de l’accessibilité nous donne une une technique alors je sais à chaque fois je sais plus où c’est critère glossaire concernant obligation légal mention P obligatoire est-ce que c’est ici c’est pas ici critères le nombre des pages excusez moi je vais retrouver ça peux aller suite toc ah ça suit dans le tchat toc c’était pas ça en ressources peut-être non kit d’audit méthodologie et test du coup le message sera renvoyé déjà les cellules c’est de dire on a on a du mal à trouver ça ouais non mais en fait mais j’étais bien dans ma recherche je pense qu’ilz le renvoie marie aussi merci vous êtes hyper réactifs c’est cool ouais désolé évaluation de con donc c’est quoi dans obligation légale évaluation de la conformité ah oui c’est là ok échantillon et dans le exactement et donc le RGAA nous donne une liste de pages obligatoire quand elles existent bien sûr donc on a la page d’accueil la page de contact la page mention légale la page accessibilité donc c’est celle qui va recevoir la déclaration d’accessibilité et qui va aussi pointer sur le schéma pluriannuel quand on on est soumis aussi bien sûr au schéma pluriannuel le truc qui est très important c’est que quand on est auditeur auditrice et qu’on Corée parce que le schéma pluriannuel c’est pas que l’auditeur l’auditrice qui le crée ou l’expert l’expert en accessibilité c’est vraiment c’est un travail en commun avec la l’entreprise qui pour créer ça puisque ça ça ne dépend pas que de l’accessibilité numérique c’est aussi de l’accessibilité en règle générale où il faut nommer un référent une référente en accessibilité faut uer aussi le poste de travail et cetera pour l’embauche de personnes handicapées voilà ça c’est le schéma pluriannuel dépasse vraiment le cadre numérique ça va bien au-delà donc c’est hyper intéressant et donc mon point sur la page accessibilité c’est que la déclaration d’accessibilité pointe sur le schéma pluriannuel par contre le schéma pluriannuel ne pointe pas sur les déclarations d’accessibilité pourquoi ? parce que c’est une faille de sécurité il suffit qu’un attaquant trouve le schéma  pluriannuel avec toutes les déclarations listées si les déclarations est listées et donc il sait bah tout ce que l’entité a comme site et donc c’est beaucoup plus simple pour lui d’aller attaquer les choses donc voilà en gros le c’est ça donc on une déclaration d’accessibilité pointe sur enfin on dit que vous avez 10 sites donc 10 déclarations d’accessibilité et ça pointe sur le même schéma pluriannuel voilà et pas l’inverse la petite subtilité on a la page plan du site la page Aide la page authentification si on a un espace connecté bien sûr et après on a des pages supplémentaires une page pertinente pour chaque type de service fourni ou tout ou tout autre pardon utilisation principale prévue exemple les rubriques du premier niveau d’arborescence donc là c’est ce qu’on va voir nous sur le baromètre c’est ce qu’on va prendre en compte la documentation téléchargeable donc souvent c’est des PDF et malheureusement les PDF à 99 % ils sont inaccessible de base donc il y a un travail qui doit être fait pour les rendre accessibles ou alors trouver une une solution alternative c’est souvent ce qu’on excusez-moi ce qu’on recommande aussi c’est comment dire le les PDF comme ils sont inaccessibles de base et s surtout il y a une un héritage déjà parce que quand on fait l’accessibilité on arrive à l’instant T et le site a déjà fait des choses et cetera et cetera ça peut-être une nouvelle version du site mais il y a déjà des PDF et donc par exemple refaire 800 PDF c’est un travail énorme donc ce qu’on nous on préconise c’est que à l’instant T donc bien sûr faut se former et cetera pour publier des PDF accessibles et donc à l’instant t on va publier des PDF accessibles mais les autres on va les les comment dire les déroger pour le moment et au fur à mesure des années enfin des mois ou des semaines des jours qui passent travailler sur ça et cetera ou alors il y a une autre on se dit que les PDF ils sont inaccessible et c’est et c’est assumé alors on et là c’est la loi qui qui le dit le de aussi le dit il faut alors une version alternative donc une autre version comment dire oui ça dépend bien sûr il y a une date de publication je rentrai pas trop dans les détails parce que ça reste cadre légal et cetera d’avoir en fait une une version alternative et donc c’est souvent ça peut être soit une page html un Word et cetera c’est qui qui est quand même beaucoup plus simple alors bien sûr il faut respecter certaines choses quand on fait un Word avec le niveau de titre et tout ça se travaille aussi mais c’est quand même beaucoup plus simple à rendre accessible un document Word ou une page HTML que des PDF par exemple ou voilà donc qu’est-ce qu’on dit est-ce que il y a une différence qui est faite alors excusez-moi je reprends est-ce qu’il y a une différence qui est faite pour les PDF que les sites peut générer et ceux qui sont générés par les services externes je sais quequest fait la non il y a il faut pas de différence voilà donc malheureusement en fait donc  ça dépend bah justement le service externe donc on dit donc une solution tierce donc une entreprise tierce et donc l’entreprise qui utilise ce produit il faut les contacter pour dire voilà vous publiez des PDF qui sont inaccessibles un exemple assez concret je pense c’est quand vous prenez un billet de train ou un billet d’avion vous avez des assurances après qui sont proposées souvent il y a un PDF qui résume ces assurances ou même une assurance voiture ou n’importe quoi il y a c’est la loi en fait que les les assureurs doivent vous fournir tout ce qui est couvert et c’est en PDF et souvent ils passe par des prestateurs externes et donc ce genre d’entreprise donc les assureurs peuvent et ils doivent exiger de demander à rendre accessible le PDF le un exemple je sais que la SNCF pendant un temps et peut-être qu’il l’ont je l’espère qu’ils l’ont encore qu’ l’ont encore passer par des solutions tierces donc des entreprises tierces pour générer des PDF quand on prenait des assurances de voyage et cetera et ils avaient exigé à leurs leur prestataire de rendre les PDF accessibles donc vous voyez c’est aussi voilà c’est pas parce que c’est une solution tierce donc hop on a on a plus de responsabilité non au contraire il faut les faire les générateurs ne sont généralement pas suffisants pour en non malheureusement non c’est vraiment un travail à la main donc humain qui doivent être fait alors bien sûr il y a quand on dit générateur dit code et donc qui dit code dit aussi une personne un humain qui a codé derrière et donc s’il a bien fait les choses il y a des choses qui peuvent être bien faites mais justement il y a comment dire ça reste quand même de l’humain où il faut bien taguer le PDF avec des titres les images sur les alt enfin les alt sur les images pardon et cetera et CEA enfin bref c’est c’est hyper intéressant c’est même un métier à part il y a des auditeurs qui font que de l’audit de PDF c’est c’est vraiment un business aussi et et voilà oui toujours possible je me permets je rebondis parce que du coup faut qu’on avance Mathieu.

Mathieu : pardon pardon j’ai d ontill donc masqué tu m’obliges time keeper c’est vas-y en plus donc tu m’as envoyé ouis t’envoyé tout les pages si ça voulait te faciliter la vie donc là du coup mais vas-y je je vais faire du copier-coller je va envoyer en fait les pages obligatoires parce que du coup quand vous passez en audit il a des page obligatoire ça ben tu l’as déjà expliqué voilà donc il y en a certaines qui sont déjà acté la page contact, la page accessibilité évidemment la page mention égale, tout ça ce sont voilà ce sont un peu les bases que vous êtes censé avoir sur n’importe quel site web plus ou moins il y a la page authentification par exemple dans la mienne il y a pas besoin puisqu’il n’y a pas de compte créable pour l’instant. Je me permets je vous lance un petit sondage juste pour avoir une appréciation de regardez h je lance moi j’ai est-ce que tout est clair pour vous c’est juste pour être sûr que l’audience c’est ok pour vous que tout est clair que voilà qu’on qu’on parle tous la même langue entre guillemets ou pas ou qu’on passe en niveau plus vulgaire ou plus vulgarisé pardon oui on a une main levée on va s’insulter c’est plus vulgaire par contre tu dissocies pas la page template page de la template page accessibilité ça va être il y a très très très peu de pages réelles c’est pour ça je suis la page d’acessibilité il y en a une ok. Par contre il faut je pense qu’on va la dissocier parce que ok alors enfin la page accessibilité on la créera nous après parce qu’elle l’instant tu peux la mettre le temp en fait il a rien dessus dans mon template de page donc on va faire page on va faire un choix page accessibilité OK et on va on peut rajouter template de page après pas cool le niveau a l’air bien du coup je sais pas comment on accède au sondage he pardon on a l’impression découvert j’ai rarement utilisé ce genre d’option ah non c’est pas ça déjà directement toc j’ai perdu mon sondage ah ok dix votes il y a eu dix votes de c’est clair et technique parfait cool j’ai demandé si vous avez des exemples d’outils pour rendre les PDF accessibles – qu’on des exemples d’outils oui alors ah non des outils alors moi il y a InDesign qui voilà qui fait ça bien qui fait les choses moi il y a aussi quand dans Word aussi Word pour générer un PDF voilà vous pouvez structurer via word donc avec des titres et des listes on peut mettre dans les options d’accessibilité de Word vous pouvez mettre des alt sur les images et cetera sur les tableaux j’ai un je sais plus sigurais pas dire tu vois et en fait après il y a des outils par contre pour évaluer les PDF je vous donne ça  juste après quand je termine je termine ça hop sinon je digresse et puis ça avance pas et j’ai le Time keeper qui me dit que globalement pour vérifier je pense que déjà tu peux utiliser  les modificateurs d’Adobe ben après en fait ça nécessite voilà AD ou Adobe en fait ça nécessite une licence aussi tu vois il y a parce que je sais que Acrobat donc Adobe Acrobate Reader pro il a l’analyse l’analyse d’accessibilité et on peut intervenir dessus par contre Adobe AC enfin Reader classique il comme il est gratuit il a beaucoup moins d’options et donc voilà c’est un peu frustrant ce qui est très dommage parce que bon c’est un peu eux qui ont produit le PDF et qui ont fait des choses inaccessibles donc ça serait auditeur auditrice c’est moi-même alors hésitez pas du coup si y il y a une personne qui a dit que cétait un petit peu chaud je sais pas qui on s’en fout c’est pas le problème mais du coup hésitez pas à poser des questions surtout on va essayer de vulgariser un petit peu mais c’est vrai que là qu’on est sur la partie audit donc c’est quelque chose qui est quand même assez technique et c’est quelque chose qui en plus alors un autre connaissance en tout cas ça a jamais été fait n’hésitez pas à me contredire si je me trompe mais surtout c’est quelque chose qu’on a qui a rarement été fait en live et là on avait une super occasion pour ça qu’on s’est dit ça sera un peu dommage de le faire tranquillou dans notre coin voilà donc mais on on va essayer de vulgariser au plus possible c’est vrai que tu prêt matur oui ben oui moi je suis prêt donc pour vous montrer un peu l’interface retrouver vos audits oui on s’en fiche hop comment ça se passe parce que pour les personnes  qui n’ont pas utilisé ARA parce qu’on présente aussi un peu l’outil donc une fois qu’on a fait fait l’échantillon de page on clique donc sur générer un audit et donc on arrive après sur cette page là on a donc trois donc on a le le haut de page après on a le taux de progression de l’audit c’est vachement bien vous verrez juste après les choses on a les différentes options ici si on on si par exemple on a oublié une page où on veut la modifier parce que son nom on a fait une faute d’orthographe peu importe et ben on peut on peut le faire on peut revenir justement en arrière on peut après donc consulter le rapport d’audit c’est alors faut pas le consulter maintenant parce que c’est zéro mais une fois qu’on a plutôt bien avancé c’est plutôt intéressant de savoir où on en est et à la fin quand vraiment tous les critères sont cochés qu’ils soient non conforme, conforme ou non applicable ou non testable on peut valider l’audit pour justement générer après le rapport et terminer en gros l’audit le comment ça se passe après on a donc le nom du bah le nom du site ici donc si on a mis tata Titi Toto c’était ici tata Titi Toto mais là on donc au baromètre des sites accessibles on a le taux de conformité globale qui va se remplir au fur à mesure des critères qu’on va évaluer idem pour critères non conforme et critère non applicable c’est pas rapport à ce qu’on sélectionne aussi dans les choses par exemple le site du baromètre si on prend la homepage il y a pas de tableau donc forcément on va pas on va mettre en non applicable le critère tableau sur la homepage puis qu’il y a pas de tableau c’est logique et donc après on descend donc à gauche on a des filtres on peut masquer les critères évaluer masquer les tests et les références moi je je vais les laisser ouverts pour pour vous montrer un petit peu et après on voit on peut aussi classer par critère conforme non conforme c’est pas mal parce qu’au niveau des filtres c’est plutôt intéressant et c’est là la force aussi de faire un site web plutôt qu’un Excel c’est que dans le Excel il faut le manipuler créer des formules et cetera que là voilà déjà tout est fait et le truc qui est intéressant aussi donc c’est que quand on regarde un peu les thématiques à gauche on voit qu’il y a un pourcentage et donc sur pourcentage c’est par rapport aussi au taux d’avancement en fait qu’on a sur tout le site sur le critère image par exemple si à un moment donné j’ai oublié une page et ben je vais pas être à 100 % donc c’est aussi un un rappel pour dire ah est-ce que j’ai bien aussi tout audité et cetera donc c’est plutôt intéressant aussi et normalement c’est des ancres voilà donc on peut aller aussi se balader donc c’est quand même assez rapide plutôt que de scroller donc dans un Excel qui est long et donc voilà et que là on a des ancres donc on peut aussi bien sûr scroller c’est classique mais c’est bien d’avoir des ancres pour aller plus plus rapidement aux choses voilà c’est des formulaires on peut revenir aux images c’est très rapide et c’est super bien je trouve j’allais dire de sources sûr je connais le dev du coup tu peux virer tous les tableaux si tu veux pour montrer parce que il y en a pas du alors ici on va sur les tableaux non applicable sur la page voilà ça se fait pas toujours avec le client enfin ça se fait d’ailleurs même jamais avec le client du coup Mathieu travaille pas à côté du client parce qu’ effectivement sinon il y aura un peu un souci d’éthique concrètement de c’est à côté non je suis pas trop d’accord tu as mis ça mais je suis pas je suis pas en phase bon là c’est un peu particulier évidemment comme exercice mais là voilà par exemple je sais que j’ai pas mis de tableau dans le site du tout et donc là ce qui est intéressant c’est que pardon Je te coupe on a aussi à droite l’option de dire que le critère il est aussi sur toutes les pages donc en fait on vient propager sur l’ensemble du de l’audit les choses donc personnellement la grille enfin non c’est pas personnellement c’est retour pro la grille RGAA ne permet pas ça donc c’est un peu frustrant dans mes précédentes sociétés et on avait customisé la grillage DEA et on pouvait propager les choses mais là donc ils l’ont fait donc c’est plutôt intéressant et donc vous allez voir là on est à 9 % donc c’est par rapport au calcul sur toutes les pages mais dès que je vais mettre sur toutes les pages normalement ça va pas me faire mentir voilà c’est bon pour le pourcentage que tu pardon c’était pour rebondir parce que du coup c’était pas clair dans le tchat c’est en fait c’est du coup il a dit que c’était non applicable et sur toutes les pages  donc là tu vois il a du coup décoché tout pour toutes les pages ça tu tableau il l’a rempli à  100 % en une seconde quoi c’est ça donc là en fait c’est non applicable sur la page mais en fait je  lui dis c’est toutes les pages donc je sais pas si je coche là ah voilà don VO c’est bon il a compris donc voilà donc c’est plutôt intéressant de dire bah voilà sur je sais que sur l’entièreté du site là puisque Antoine m’a fait ce retour là il y a pas de tableau moi personnellement je fais plus par page mais voilà comme je sais que c’est tout le site bah voilà ça peut être intéressant les formulaires on sait que sur la page Contact il y a des formulaires donc là on va pas on va pas le faire mais sur la page d’accueil s’il y a pas de formulaire là on va mettre qui n’est pas présent sur la page mais on est sur toutes les pages puis qu’en fait il y a la partie ah ben non pardon la partie recherche mais en fait la partie recherche n’est que sur la page recherche oui c’est un lien donc oui donc j’avais oublié pardon c’est un élément transverse donc ben on est parti le donc l’évaluation ça on peut fermer tac le baromètre donc là je suis sur la page d’accueil comment moi je procède et je pense que Karine si elle est encore là peut valider ou invalider parce que chacun a ses techniques aussi hein c’est aussi on peut on n’est pas voilà des robots et on n’ pas tous la même technique moi personnellement durant mes formations que j’ai eu on me disait d’activer d’abord des plugins automatiques pour voir justement très rapidement les erreurs qui sont donc automatiques en gros via ces plugin là donc j’en ai une une ribambelle en haut je vais vous les présenter les tests automatiques ça représente entre 25 et 30% du RGAA donc sur les 106 critères on va en tester entre 25 et 30 %. VO ça dépend si les personnes entre 25 et 30 % on tombe d’accord donc en gros là moi mon plugin chouchou que j’aime beaucoup il s’appelle Wave, et Wave donc tout est gratuit, c’est Open Source tout est gratuit donc le truc cool c’est qu’il va vous en vous l’installer et en quelques clics même pas quelques secondes il va vous faire un rapport sur la page et donc là on voit que donc là c’est l’onglet sommaire on a une erreur donc c’est pas laquelle parce qu’il faut aller après dans l’onglet détail on a zéro erreur de contraste donc automatiquement c’est là aussi c’est cool parce que les couleurs peuvent être testées automatiquement personnellement je préfère sur certaines choses certains composants vraiment le refaire parce que c’est du robot donc c’est des calculs mathématiques donc parfois il peut peut-être louper des choses donc c’est quand même bien de contrôler aussi après à la main quand on a un doute mais à 99.9 % on peut se fier quand même moi en tout cas je me fie à ça il m’a jamais mis en erreur très très rarement et donc c’est pour ça que je fais à la main on a des alertes on a les le 30 % de structures qui sont ok 15 éléments de structure et on a deux ARIA j’en parlerai quand on arrivera au critères qui concerne enfin il y a pas des critères qui concerne ARIA mais les scripts notamment on on on va pouvoir dire qu’il faut mettre des ARIA dessus donc j’en parlerai après et donc quand on va sur l’onglet détail on voit qu’on a une erreur sur la homepage donc quand on clique dessus ou quand on passe en hover avec la souris on voit que à droite il a entouré avec un petit liseré rouge les choses donc là c’est en anglais il dit que linked image missing alternative texte et donc quand on clique dessus il nous la met en surbrillance le truc aussi qui est cool c’est que en bas on a le code donc quand on clique dessus on voit les choses qui sont faites et donc quand on reclique sur l’erreur il nous c’est une ancre pour lui donc il voit les choses alors pour moi là je ne sais pas pourquoi il le met en erreur parce qu’il y a bien un alt qui n’est pas rempli donc c’est un alt voilà donc je sais pas pourquoi il met il y a un lien missing ah c’est que ok d’accord tu es un tu es une image englobante, c’est un lien englobant h tu as un ID mais l’ID c’est par rapport je pense au manque un nom pour le lien ah ouais c’est ça exact peut-être oui il faut du texte masqué de façon accessible c’est peut-être ça c’est sûrement ça je me permets de rebondir du coup là ce qu’il y a c’est que l’image n’a pas de texte donc il y a rien qui est lu techniquement je me permets de vérifier que ce que je dis pour savoir comment je le répare ou c’est ça il sur mon sur mon lien techniquement il va l aller sur la page de recherche non ce n’est pas accessible ce n’est pas suffisant donc oui il va le pas ce n’est pas suffisant, un lien doit toujours… enfin un lien ou un bouton doit toujours avoir du texte dedans même masqué de façon accessible un title apporte bien sûr une information supplémentaire là il n’y a pas de débat là-dessus mais par contre il faut toujours un aria-label aussi donc voilà j’en parlerai aussi après mais il faut justement un title et il faut un intitulé de texte dedans donc on va corriger ça après donc voilà le lien est vide oui voilà j’ai pas branché les neurones donc là on a une erreur c’est pour ça qu’on fait tous ensemble c’est cool et alors je vous rappelle du coup que je suis pas développeur accessibilité c’est pour ça que qu’on va retrouver des erreurs et certains ont été laissés volontairement Mathieu me les avait déjà dit et on a s’est dit tiens on va plutôt les faire en live mais là j’avais pas compris à quel point donc là pour le coup en gros si je fais une une modification dans le code en gros il faudrait que tu hop quelque chose comme ça évidemment pour ça que j’aime bien chrome aussi parce que le leur moteur de code il autocomplète les choses donc il y a la fameuse classe alors ça dépend si tu l’as je pense que tu l’accessibility non pardon j’ai pas mis la SR donc ouais donc là ce sont des classes qu’on va appliquer qui permettent de cacher visuellement du texte mais les lire dans le cas où donc là sur page recherche donc ça serait donc oui on peut reprendre donc là pour le coup aller sur la page recherche et donc là pour le coup ton title peut ou pas ça dépend fait fait doublon là puisque je reprends la même chose donc moi perso le title moi je virerai le title puisqu’il fait doublon donc ça fait en plus pour à la vocalisation pour les personnes qui utilisent un lecteur d’écran les personnes aveugles il va lire aller sur la page d’accueil, aller sur la page recherche aller sur la page recherche donc ça sert à rien donc moi personnellement je recommanderai d’enlever le title puisque l’information l’icône voilà on va cliquer donc c’est un lien donc on va voir les choses après on pourrait le laisser parce que ça donne une information aussi quand on est en hover voilà il faut voir Hamza pourquoi ne pas renseigner le alt oui l’image peut être l’icône voilà l’icône peut être informative mais donc ça ne voilà donc là ça rentrera dans le critère parce que dans le RGAA non pourquoi je mreou hop je trouve le c’est que pour les lecteurs d’écran c’est vrai mais comme quoi tu vois il y a plusieurs ouais mais en gros alors dans critère test dans intéressant justement de travailler parce que les méthodologies de test chaque image parce que je sais que le alt quand tu es dans une lien le sur une image fait le truc maintenant il est où dans le cas où il s’agit d’un élément image vérifier que le lien est pourvu au moins d’une alternative textuelle attribut alt ok mais est-ce que alors attends est-ce que c’est ici bas déjà pour une image si le lien c’est un lien image voilà mais je sais plus si c’est dans les images de décoration, images alternative textuelle est-ce que c’est là le lien je chauffe texte donc condition on ouvre le test retrouver dans le document les liens images donc avec content image oui je me permets de rebondir mais Jimmy a un peu r non non je pense pas que tu te trompes c’est là on est sur des détails tatillons je pense parce que clairement c’est pas si inaccessible que ça c’est à moins que je me trompe mais on a quand même un title sur le lien on a ça va c’est pas non plus c’est pas considéré comme inaccessible pour une personne en situation de handicap du coup ça dépend laquelle en fait c’est là comme dit Natalie il faut penser à couvrir tous les handicaps et pas seulement le lecteur d’écran voilà il y a l’ordre a une importance là je comprends pas. Plusieurs sont possibles ben oui de toute façon c’est toujours le problème c’est toute façon c’est ce qu’on répète toujours c’est que c’est pas nous qui avons systématiquement raison c’est en fait il y a plein de points de vue il y a plein de types de voilà je sais plus on avait trouvé une solution je l’ai pas gardé en tête mais voilà il y avait une solution qu’on avait tous trouvé dans les maquettes par exemple qui était plutôt bien en fait on avait oublié un type de handicap, ça marche pas pour eux et du coup c’était r j’ai l’impression que le title était valide mais sur l’image pas sur les liens oui c’est ça sur le lien oui enfin non c’est vrai finalement la solution de rajouter le alt sur l’image elle est bonne oui aussi oui c’est en lien image en fait on pourrait faire moi personnellement j’aime bien la technique du sr-only parce que VO c’est plutôt cool  que de mais oui le alt peut porter l’information donc on irait donc aller sur la page recherche et on mettrait pas justement icone loupe ben non c’est pas c’est pas une bonne information par exemple donc là on il faut renseigner où on va n’est lu que par le lecteur justement après c’est le double oui absolument Nathalie justement c’est le ah d’accord merci Romain pour la priorité et l’ordre et donc justement alors Marie Levin le tian est valide sur le lien voir le glossin in TW c’est bien débat d’experts donc oui c’est complètement valide le robot quand on lance Wave il détecte il a détecté qu’il y avait un lien vide et donc comment après on regarde comment le corriger donc il faut un texte dedans soit le texte peut être porté sur l’image soit le texte peut être porté via un contenu caché de façon accessible voilà donc toc moi en tout cas voilà la technique que j’aurais que je recommanderais à on on voit bien que tu as pas mis la donc c’est quoi la classe access-hidden c’est ça peu importe c’est pas grave je vais recharger le mais c’est pas grave b-moi BMI mets-moi retiens-moi ce point là moi je l’ai noté de le réparer tu vois mais ou t’inquiète pas je donc t’inquiète pas je vais te saquer j’ai pas oublié Karine dans il est indiqué que T fonctionne en dernier mais perso je le recommande pas idem après moi il y a un truc pour donc pour tester il y a plus je vous montre plusieurs plugins que j’utilise il est où h le voilà le l’assistant RGAA qui a été repris par une au début il était porté par la DINUM mais ils l’ont ils l’ont plus maintenu et il a été repris par une une autre société qui fait de l’accessibilité et ils ont mis à jour et cetera donc ce plugin là il est vachement bien au lieu de se balader du RGAA et de revenir et cetera on ouvre un petit plugin et ça permet d’avoir le RGAA vraiment à côté donc voilà c’est plutôt intéressant d’avoir ce genre de choses et on voit que là ils l’ont mis à jour parce que j’avais pas vu que on pouvait masquer les CSS en un clic donc c’est plutôt intéressant et donc voilà donc moi j’utilise aussi beaucoup l’assistant RGAA pour éviter d’aller sur le site et donc bien sûr ça remplace pas le glossaire mais on a des liens aussi, comme par exemple je clique sur « image porteuse d’information » et vous voyez en bas donc on va cliquer dessus et hop il m’amène au glossaire à la bonne ancre et moi j’aime beaucoup ce plugin là qu’est-ce que je me permets je rebondis sur le commentaire de Joë charbie qui disait la meilleure manière d’utiliser ARIA c’est de ne pas utiliser ARIA et c’est vrai que c’est rigolo mais moi quand j’ai commencé à faire du dev un peu accessible Mathieu m’a repris là-dessus parce que je faisais des ARIA à toutes les sauces partout un maximum et du coup il m’a dit mais c’est pas la peine forcément de toujours les mettre ton bouton il marche déjà très bien tu as pas besoin de lui mettre 480 ARIA c’est vraiment pour enrichir les choses ou même malheureusement détourner le fonctionnement de quelque chose pour le rendre accessible aussi c’est vraiment donc et l’une et la première règle déjà c’est de pas l’utiliser et d’utiliser les éléments natifs quand on peut les utiliser donc par exemple ne pas mettre de div role=button mais utiliser vraiment un bouton. Donc c’est par exemple ce genre de chose, on pourrait avoir l’url des plugins après la visio mais je peux même faire mieux que ça déjà pas mal fourni dans ton interview certes mais attends hop liste des plugins à installer hop notre chère Karine qui est ici a créé cette page là voilà et donc vous avez tous les plugins que nous on utilise chez Warren et voilà donc vous avez les choses il y a sur la page formation en open source du coup, oui c’est Open Source en libre accès plutôt en libre faut connaître l’URL mais voilà bon parce que moi j’ai pas toujours j’ai pas avancé sur mes critères pas image et porteur d’information alternative textuelle il y a un petit plugin qui est plutôt sympa qui est donc Web Developper Toolbar. La Web Developper Toolbar en fait quand on l’installe il y a différents onglets et options, et notamment quand on va dans l’option image on peut afficher les display voilà on peut afficher les alt sur toutes les images donc la balise IMG et donc on peut voir tout de suite en fait s’il y a des bonnes choses qui sont faites ou pas en un clin d’œil voilà il y a d’autres plugins qui le font moi j’utilise celui-là donc on peut voir par exemple donc si on prend dans l’ordre on a notre fameux logo du baromètre qui dit « logo baromètre des sites accessibles » on a le alt donc sur le la petite loupe qui n’est pas remplie on a le logo du baromètre qui dit « logo du baromètre » avec un focus représenté aux couleurs de l’arc-en-ciel. Qu’est-ce qu’on a après on a un petit smiley ici qui dit smiley cœur et après on a des alt sur les petites icônes des tags enfin des catégories ici ou thématiques, je sais plus thématique ou catégorie, excusez-moi, j’appelle ça un secteur pour info je le redis au cas où parce qu’il y a quand même de personnes qui avaient un peu chaud les alt pas remplis permettent de faire en sorte que l’image ne soit pas lue en fait en vocalisation par les gens qui en ont besoin donc qui vocalisent un site web voilà donc c’est une erreur, enfin c’est pas une erreur c’est intentionnel on met les choses vides pour qu’elles ne soient pas lues voilà on considère que c’est juste de la déco en fait et là par exemple dans le petit feu qui va symboliser l’énergie le mot énergie juste après donc ça avait pas beaucoup de sens de dire « énergie image d’énergie énergie » donc on a juste laissé ça. Un emoji a besoin… alors ce ne sont pas des emojis officiels, ce sont les emojis de fluent, donc ils ne sont pas normalement sous que dans cet aspect là donc c’est vraiment de l’image mais oui tu as raison soit si c’est j’aurais pu utiliser des vrais emojis basiques mais là ce sont des images en SVG ou en PNG selon le poids la petite reco perso parce que des fois le poids des SVG était presque plus lourd que certains PNG ou ou JPEG exactement donc là Nathalie donc il y a Aurélie il y a plein de choses pratiques avec ce plugin par exemple vérifier les champs si des champs de formule ouais il y a plein plein de choses dans le Web Developper Toolbar en plus il est super vieux moi personnellement je crois que quand j’ai commencé le dev il existait déjà ou alors il est arrivé peu de temps après donc il y a plus de 10 ans Nathalie oui tu as tout à fait raison, toi c’est plus simple, il faut aussi faire attention à ne pas faire trop de bruit entre guillemets la question qu’il faudrait se poser c’est est-ce que les icônes en question apportent-elles une information nécessaire à la compréhension de la page exactement c’est pour ça que quand Antoine a contribué et créé le site il a fait en partie exprès de rajouter des smiley et cetera et notamment des alt sur les images de smiley pour dire voilà donc par exemple il y a des choses ici sur les thématique ça n’apporte pas on peut si elles sont pas là on comprendrait quand même qu’on est sur assurance énergie et que le le texte est suffisant sur le texte qui est au-dessus par exemple excusez-moi l’outil des tendances de l’accessibilité numérique avec des d’ailleurs tu mets point et donc il y a une faute après de il y a pas de de majuscule et donc tu mettre une virgule plutôt. L’outil des tendances de l’accessibilité numérique avec des smiley cœur pour que ça soit plus sympa personnellement parce que le reste de la phrase c’est « parce que c’est plus sympa » et donc le fait de mettre un alt sur l’image smiley cœur apporte du contexte donc pour moi l’expérience est de l’expérience mais en pure je sais que tu alors la frontière entre accessibilité et ux elle est très fine donc là en accessibilité pure moi personnellement je la laisserai parce que ça apporte du contexte et au reste de la phrase donc là je laisserais par contre en dessous « petit storytelling qui va bien mais dis donc à quoi servent ces baromètres ? smiley septique » donc moi personnellement ici je ne mettrai pas de alt, enfin pardon je mettrai un alt vide excusez-moi, parce que ça n’apporte pas en fait les choses pour une les doivent être ignoré en ajoutant des span masqué avec des alternatives ou là attends il faut que je rebranche mes neurones pour la lecture devrait être ignoré en ajoutant un span masqué pour éviter le côté image pour éviter que la vocalisation elle dise que c’est une image c’est ça ? est-ce que tu peux me confirmer que c’est bien ça, que tu penses qui serait vachement bien ? peut-être activer ton micro pour nous expliquer un peu plus parce que là par le texte je comprends pas la technique alors je me permet juste d’expliquer là le débat qui a lieu c’est un débat qu’on a régulièrement entre est-ce qu’il faut faire en que toutes les images soient coupées c’est à dire que c’est une recommandation qu’on a souvent qui dire non mais c’est décoratif tu mets pas et moi je je vais défendre le point de vue qui pas toujours contre mais ux ui de dire mais en fait je me décarcasse à faire une identité visuelle à faire une traduire une expérience visuelle appréciable pour beaucoup de gens j’aimerais qu’elle ressorte justement dans cette vocalisation c’est dire que je souhaite essayer de mettre cette expérience agréable aussi en vocalisation et pas seulement vocaliser le texte basique et simple donc il y a Antoine a une idée et un parti prix l’accessibilité à des règles et cetera Joël vas-y.

Joël : ouais je me permets du coup de le faire en vocal je pense que ce sera plus simple. Après je veux pas parler à la place de Céline mais par rapport à la lecture fluide, c’est plus par rapport au fait que généralement ça va être vocalisé par « image smiley sceptique », pareil précédemment « image smiley avec des cœurs » tandis que si tu mets en aria-hidden= »true » et que tu mets une span en sr-only, tu peux mettre le texte exact que tu veux qui soit vocalisé sans avoir le « image » au préalable.

A : ah d’accord, ok ! Oui tout à fait, alors oui là il y a une expérience ok une autre expérience merci beaucoup de l’explication parce que vraiment je l’avais pas, mais oui en fait oui c’est un texte d’accord on on met un alt vide et derrière il y a un span il y a un span sr-only qui veut dire maintenant oui parce que image moi personnellement là donc pour le « mais dis donc à quoi servent ces baromètres » moi j’enlèverai donc le alt enfin j’enlèverai c’est des abus de langage excusez-moi je mettra un alt vide les trois autres en dessous il y a quelqu’un qui l’a dit je crois que c’est Joël absolument aussi ça sans en fait la ce qui la question qu’il faut se poser c’est ce que Karine me dit à chaque fois est-ce que sans l’image on comprend et là oui on comprend que en fait il y a un titre qui introduit un paragraphe, ce paragraphe après il introduit du texte on le verra juste après ce texte est en erreur puisque c’est des H4 je crois ou des H3 et donc en fait vous verrez une subtilité pour comprendre la différence entre des titres et des paragraphes et donc là on a ces trois blocs là en fait qui… le texte suffise en en eu même louper quelque chose le plugin tool permet de lire les alt ainsi. Ah oui, oui vous avez loupé quelque chose donc je vous le remets c’est le plugin Web Developper Toolbar et dans l’onglet « image » on active « display alt attribute » et donc si on le désactive ça l’enlève et si on l’active voilà il y a d’autres plugins qui le font il y a je crois que j’en ai un ici hop qui fait sur les images afficher l’alt voilà toc il le fait à côté voilà moi je il y en a d’autres mais moi j’aime bien WE je fais un petit rebond sur cette phrase justement que m’a déjà dit Karine et avec laquelle je suis pas d’accord mais parce qu’on a pas juste pas le même point de vue c’est pas c’est juste que en fait est-ce que l’image apporte quelque chose oui en fait je trouve que justement l’image elle va par exemple dans ce cas-là apporter cette pointe d’ironie qui est pas forcément vocalisable « mais dis donc à quoi servent les baromètres ? » Il y a deux façons de l’entendre : on va avoir un titre qui va être vraiment réponse à une question mais je pense que tous ceux qui ont découvert un peu le baromètre et ma façon de communiquer savent que  j’utilise beaucoup d’ironies ou beaucoup de satire et de ce fait là j’utilise les smiley dans une expérience de vocalisation pour insister sur ce côté-là le smiley sceptique va bien faire clairement comprendre que mon title est une ironie et c’est dans ce sens là ou alors j’en parle souvent dans mes formations en disant justement je vais essayer d’apporter du coup tout ce qui n’existe pas à la vocalisation la vocalisation n’ironise pas contrairement à mon smiley exactement et donc là c’est bien alors c’est là où on est toi et moi versus le tchat on est pas d’accord donc est-ce que la majorité l’emporte je dirais oui et surtout les règles RGAA disent bien et donc là il y a eu plusieurs rappels et vous avez tout à fait raison que une image décorative doit être ignorée. Alors c’est là le truc aussi et là je vais apporter une nuance elle doit êre ignorer le une nuance aussi si vous avez un jour une personne qui fait du SEO et qui vous dit moi l’image décorative j’ai besoin de rentrer des mots clés dans le alt pour pour faire du référencement dans Google Image par exemple donc vous techniquement parlant si on prend le RGAA il va dire ok le ce n’est pas possible parce que c’est une image de décoration une image de décoration doit avoir un alt vite sauf que bah pour d’autres besoins notamment là le SEO et puis ça peut être une grosse stratégie aussi par pour la société et cetera excusez-moi ça peut être une grosse stratégie pour la société et cetera et donc là pour le  coup l’ accessibilité donc l’expert l’auditeur l’experte l’auditrice doit faire un pas en arrière mais pour donc pour valider ça et en gros la technique c’est que on va mettre un aria-hidden= »true » sur l’image c’est que donc avec aria-hidden= »true » on va faire en sorte que le lecteur d’écran ne lise pas l’image, ils vont pas arriver sur l’image parce qu’elle est décorative et le alt va être rempli donc le SEO est content et cetera voilà. Excusez-moi je parle beaucoup voilà donc la technique SEO qui va bien avec de l’access c’est que on met donc un aria-hidden= »true » sur une image on la rend inaccessible et on vient remplir le alt avec les mots clés qu’il faut pour faire du SEO. Pourquoi aussi on fait ça ? C’est qu’en accessibilité on a aussi tellement autre chose à côté pour améliorer aussi l’accessibilité que et en plus on met un aria-hidden= »true » donc c’est totalement ignoré donc voilà tout le monde tout le monde est content dans ce cas là de SEO là dans le cas et notre débat depuis 35 minutes sur ça…. en fait on va arriver à 13h30, il va falloir clore d’ailleurs, voilà mais donc il y a certains on fera un débat ça on organisera un débat public. Il y a certaines images qui sont décoratives et certaines images qui sont informatives dans la page donc on va planter le critère ici donc chaque image porteuse d’information alt… non attendez chaque image porteuse donc oui parce que il y a bien des alt ici pardon sur celle-ci ça c’est bon il y a quoi d’autre qui peut être bien il y en a qu’une donc c’est bien on est bien là et donc ça sera un autre critère donc là sur en fait voilà je réexplique du coup mais il y a cette différence entre la loi donc c’est-à-dire la réglementation du RGAA qui dit certaines choses et l’expérience vécue l’expérience qu’on essaie de retranscrire effectivement là c’est là où on tombe dans les divergences parce qu’on est pas tous d’accord donc là intéressant alors faire vraiment un vrai débat public là dessus un vrai débat public pour la fin. 

Ah oui thème écoconception ah complètement enfin pas hors sujet mais là pour le coup si Antoine tu peux répondre alors du coup pour ça déjà d’une en écoconception je fais tester ou je teste certaines de mes images quand je vois je vais privilégier évidemment le SVG à max de temps mais certaines icônes en fait sont assez lourdes en SVG et utiliser une fois donc dans ces cas-là je vais tester le PNG je vais voir si à sa taille à peu près initiale il est bien sachant qu’en plus j’apporte une compression par WordPress donc il y a un compresseur d’image qui permet de rajouter la compression qui est absolument invisible, d’ailleurs tu vois sous les pages du baromètre je suis quasiment entre 90 et 95 ou 96 % en terme de web carbone, ça veut rien dire mais du coup voilà si on teste le web carbon je suis à 90 96 % supérieur aux autres pages testées donc il y a eu vraiment un sujet d’éconception qui a été bien traité et on va aller plus loin dans un l’OT 2 pour répondre à qui dit que c’est les hacks et que Google n’aime pas les hacks je vais répondre un peu brut : il faut trouver la source que bien sûr Google n’aime pas les hacks on comprend. Maintenant faut trouver la source que Google dit on pénalise ça franchement donnez-moi la source parce que moi je l’ai pas trouvé je sais juste que là on a aria-hidden= »true » et un alt rempli ça rend l’image donc non visible par les lecteur d’écran donc c’est une bonne solution pour nous et le compromis des deux parties est ok mais par contre trouvez-moi la source que Google pénalise ça. Si ça pénalise pas, enfin si il n’y a pas de preuve là-dessus moi je continuerai à conseiller ça parce que c’est la seule chose que je vois, à part ne pas remplir le alt parce que c’est décoratif mais alors là on rentre entre guillemets en conflit avec le SEO et donc ça peut occasionner différentes réunions problématiques plus grandes et cetera donc allez on continue deux critères quand même ça on va pas bien vite là non mais oui non mais t’inquiète parce que il y a des bonnes question le oui tu mettras la note de toute façon après donc chaque image de décoration est-elle correctement ignorée donc non ha pardon non conforme excusez-moi, allez clic Mathieu hop et donc là on va il y a une quand on clique sur non conformité  et cetera on a tu mets carrément en non conforme là-dessus oui « chaque image de décoration est-elle ignorée » et ben non en fait elles sont pas ignorées parce que justement tu mets un alt qui est rempli donc par exemple ici le « smiley sceptique » il devrait être ignoré et il ne l’est pas puisque tu remplis le alt donc ici on mettra que certaines images de décoration et donc après on peut dire correction ah non je crois qu’il y a un truc recommandation de correction je me permet je demande au tchat du coup mais Cristella Etic  mais du coup c’est vraiment une question de curiosité mais on ne sait jamais finalement ce que Google aime vraiment ou pas vraiment on suppose si je ne me trompe pas surtout sur des points aussi précis comme ça parce que du coup si je ne me trompe pas les robots n’ont pas *rires* ne sont pas toujours très clairement, pas toujours très publiques pardon oui c’est ça en fait c’est ça le gros le problème de Google en fait c’est un peu une boîte noire il y a eu des hacks d’ailleurs de ça où ils ont publié des choses pour le SEO externe c’était un peu indoor pour les personnes qui faisaient du référencement mais oui il y a certaines choses en fait notamment celle-ci moi là je n’ai pas de sources j’ai pas trouvé de sources voilà qui me dit. « Question praticopratique : dans tes audits mentionnes-tu les URL des images en défaut pour faciliter la vie de tes clients ? » alors pas là mais oui. En gros c’est pas dans l’audit c’est que une fois que l’audit est terminé on a une réunion de restitution donc pour expliquer l’audit en question et c’est dans ce support là qu’on va mettre certains exemples donc on va mettre on va faire des captures d’écran et on va dire bah cette image là il faut les choses maintenant si un site à on est sur par un site de news et il y  a 300 images et il y en a 100 qui sont pas bonnes c’est pas notre métier de pointer les erreurs, enfin ça serait très long si c’est notre métier de pointer les erreurs mais ça serait très très très long et chronophage de pointer toutes les images qui ne sont pas bonnes et cetera donc on va en dire certaines et après c’est au clients de regarder les choses et souvent en plus c’est des templates avec des boules et cetera donc souvent il suffit de corriger un ou deux template et puis ça se répercute sur les autres donc voilà. Jimmy on apporte une remarque très bien voilà vider ouais VI d’ailleurs je rebondis parce que moi c’est ce qui fait que pendant longtemps j’ai cru qu’il ne fallait pas mettre le Alt et du coup je mettais toujours des ARIA je sais plus je faisais des aria-hidden sur mes trucs parce que justement j’avais alors c’est Mathieu qui m’a expliqué ça quand on se rencontré du coup mais pendant en fait moi j’avais toujours cette reco de la part des auditeurs qui disaient faut supprimer les alt, et je supprimais les alt alors qu’en fait il faut les laisser vides et c’est là où la nuance elle est hyper intéressante don un exemple ouais alors c’est vrai que là on le fait pas parce que du coup on fait à l’oral on donne des exemples là pour le coup là oui parce que nous c’est préciser le contenu de l’attribut oui complètement là pour le coup on va si le alt bah là pour le coup là on va sur le critère 1.3 donc pour chaque image porteuse d’information ayant une alternative textuelle cette alternative est-elle pertinente et donc là pour le coup on a des images qui sont porteuses d’information et qui sont bien mais dont le alt n’est n’est pas bien rempli un exemple sur le logo le gros logo ici c’est marqué logo du baromètre avec un focus représenté aux couleurs de l’arc-en-ciel là c’est pas bon c’est que entre le texte donc là c’est une image et le il y a donc il y a du texte dans l’image qui est incrusté dedans et le alt on a une différence d’information donc là pour le coup il faudrait reprendre l’intégralité du texte de l’image et le mettre dans le alt voilà et et sans préciser logo ça sert à rien donc là ça serait baromètre et c’est accessible comme auditeur avec moi là waouh possibilité de rajouter une capture via l’out de l’élément visible du oui tout à fait si je reprends hop mon audit si je j’ouvre mon petit truc ici on a un fichier ici et donc on peut voilà on peut mettre donc taille maximale par fichier 2 Mo format JPEG et PNG plusieurs fichiers possibles donc oui tout à fait on peut donc faire des captures d’écran et les mettre et les ajouter dans le critère ex donc ça sera après généré dans le rapport donc si c’est une personne marante qui fait les corrections bah oui bien sûr Nathalie absolument si c’est une personne aveugle bah elle a elle aura besoin d’une autre personne pour faire les captures d’écran et pour voir peut-être utiliser le XPath ouais ça devient ça devient tu peux donner les coordonnées mais ça devient vite compliqué non ? non mais en fait veut donner l’URL en fait de dire c’est soit c’est l’URL de l’image soit c’est où ça se situe dans le code aussi mais bon le code peut bouger donc bref c’est oui il y a plusieurs solutions donc voilà après à trouver les choses et à s’adapter en conséquences donc non conforme ici donc le 1.3 chaque image porteuse d’information ayant oui donc là on n’est pas bon c’est que ici on reprend donc tout en haut on a le logo baromètre des sites accessibles donc pour le coup le lecteur d’écran dira donc image logo baromètre des sites accessibles donc là pour le coup ça peut être bien de garder logo moi là-dessus je pourrais ne soit ne pas conserver le logo soit conserver le logo maintenant voilà pourquoi pas parce que c’est quand même l’élément principal du site après il faut voir un peu la structure qu’il y a derrière mais donc on regarde on se concentre là exclusive sur sur l’image donc si on regarde la structure hop je vais désactiver mon petite mes petites images il est où il est là tac mes petit alt donc si je regarde la structure on a alors oh mon dieu un a dans un a ah mais non ça c’est moi qui attende excusez moi hop c’est mon plugin qui a fait des bêtises non excusez moi c’est des mauvaises réputation là c’est ça c’est bon tac donc on a un lien image le et donc l’image porte le ce qu’il faut et donc alors le logo des baromètres et sites accessible donc pour moi je laisserai ça par contre on a une information supplémentaire c’est que le lien fait un retour à l’accueil donc on doit donner cette information là et donc personnellement moi ici je mettrai un comment dire un un texte masqué portant toutes ces informations là donc un title pourrait suffire moi je l’aime pas mais il faudrait qu’il soit bien rempli après ça ferait encore une infobulle par-dessus et cetera et donc moi je n’irai pas sur un title j’irai plus sur une autre solution pour justement la pensée pour les personnes qui utilisent un lecteur d’écran et donc je comme là on est sur un retour à l’accueil donc ça serait on peut mettre un title hein donc ça serait donc retour à l’accueil donc en title et l’image alors on enlèverait le logo parce que ça ferait ça ferait ça ça fait lourd et ça serait pas bon donc on irait sur donc retour à l’accueil et baromètre et c’est accessible donc on pourrait on pourrait utiliser cette technique là aussi donc là pareil ce qui est un peu embêtant dans l’accessibilité c’est qu’on là on a sur un seul bloc un seul composant si je peux appeler ça comme ça le title irait écraser le alt non il y aurait double lecture, il y a pas l’un ou l’autre en fait c’est un il y a un ordre donc après il c’est juste le en mentionnant retour oui aussi on peut aussi retour retour à l’accueil baromètre des sites accessibles ou ou baromètre c’est accessible retour à l’accueil on pourrait tout à fait porter ça c’est juste que là le alt de l’image le pareil le SEO par exemple pourrait nous faire un retour de dire mais c’est voilà j’essaie de d’évaluer un peu tout le tout le contexte et donc justement de différencier les choses permet justement de entre guillemets faire plaisir à à os et nous d’un côté on restitue bien l’information même si on l’a  mis en deux blocs différent voilà la lecture sera globale puis qu’il va lire le a en fait d’un coup donc voilà on peut il y a plusieurs techniques et et voilà donc mais là donc ce que je reprends parce que j’ai disgressé on ce qui est….

Antoine : je me permet juste Mathieu attends parce que du coup ah pardon c’est parce que Nathalie a envoyé un petit message qui disait je suis pas d’accord sur le fait qu’une personne déficiente visuelle doive se faire accompagner pour faire les corrections évidemment que non mais c’est vrai que faut quand même considérer que là c’est un audit général qui ne porte pas juste sur un type de handicap et effectivement quelqu’un qui n’a pas la vue est-ce qu’elle peut apprécier les images les choses comme ça va être peut-être plus compliqué donc elle sait pas qu’elle est obligée de se faire accompagner c’est juste que effectivement ça peut-être que ça pas ouais parce que là et comment dire un ami et je sors la carte j’ai un ami qui mais là pour le coup bah je peux que sortir cette carte là parce qu’il est auditeur enfin il est développeur React et aveugle et en fait il fait parfois des audits et cetera et donc il va lancer des plugins pour voir s’il y a pas d’erreur de couleur et donc il dit si le plugin remonte des erreurs de couleur il va dire bah oui il y a des erreurs de couleur je ne peux pas les apprécier mais je vois que le plugin remonte des erreurs donc à vérifier par quelqu’un d’autre donc c’est pas une question de dire comment dire elles sont bien sûr aussi compétentes qu’une personne qui est voyante que non voyante voilà c’est pas ça du tout le débat c’est que à un moment donné elles ont une la déficience visuelle qui pour nous en accessibilité bah leur permettent pas d’évaluer certains critères par exemple sur les codes couleurs il y a une remontée des erreurs et après il dit voilà vérifier donc par une personne voyante c’est juste ça le truc au contraire il y a pas du tout de débat pour moi là-dessus tout le monde est est valable sur pour faire les audits que ce soit aveugle ou pas quoi donc ça dépend les compétences aussi de chacun chacune. Donc parenthèse fermée donc oui je finis… *** oh là là pardon je dis un gros mot ! L’accessibilité c’est là aussi où c’est intéressant et aussi long et cetera c’est que là on voit on est sur une seule petite image et dans un <a> et en fait on va devoir jouer sur plusieurs critères là ça va être donc la thématique lien la thématique image, on va devoir aussi jouer sur la thématique navigation au clavier pour voir si la navigation au clavier est visible ou pas sur les liens voilà donc ça aussi on est d’accord. C’est hyper intéressant si l’accessibilité c’est que on doit vérifier sur plein de choses et cetera voilà donc mais par contre c’est très linéaire en gros enfin moi en tout cas ma comment je j’audite je fais thématique par thématique parfois je j’ai en tête les choses de dire ah oui quand je vais auditer tel composant je vais devoir aller aussi un peu plus bas dans la grille RGAA pour me noter les choses ou alors il y a une il y a une une technique que j’avais  apprise quand j’étais dans ma précédente boîte d’accessibilité où c’est qui est en gros on va faire des références c’est-à-dire qu’on va on va tout concentrer sur par exemple la thématique script qui est assez importante dans un site internet on va la on va noter beaucoup de choses dedans et on va donc invalider les thématiques au-dessus donc par exemple : j’ai un un bouton qui ouvre une modale et dedans il y a des images il y a des couleurs qui ne vont pas et cetera le on peut tout à fait dire concentrer les choses donc là je réponds à Nathalie on peut concentrer les choses dans un seul critère mais il faut pas oublier d’invalider les critères qui sont concernés donc si dans ma modale dans mon exemple j’ai des couleurs qui sont pas bonnes et une image qui est pas bonne je vais aussi invalider les critères images et couleurs et donc critères images et critères couleurs et faire référence donc dans mon donc là ici dans mon baromètre ça serait ici dans la description de l’erreur dire voir critère 7.1 par exemple voilà et donc comme ça on on dit bien la référence  et donc les personnes qui vont reprendre après l’audit pour les corrections vont comprendre que le critère 1.3 il est planté à cause du critère TER 1.7 et on donne toutes les explications au même endroit parce que c’est pour avoir été dans les deux camps c’est-à-dire en tant que développeur et en tant qu’auditeur quand on est dans le camp développeur ou designer ou chef de projet et cetera quand on reçoit l’audit ça peut être très j’avais déjà employé l’image être indigeste de regarder le la grille ou ou le là le ARA qu’on va qu’on va générer et en fait de voir à plusieurs endroits qu’on a les mêmes choses et de dire ah bah oui mais tu me l’as déjà dit ça tu m’as déjà dit ça là tu m’as déjà dit ça là donc moi personnellement je recommande en plus pour le travail de l’auditeur c’est plus simple puis qu’on concentre tout au même endroit et alors bien sûr ça fait des grands Pava parfois mais voilà faut aussi juger de ça si on commence à rentrer dans des grandes explications à donner des exemples de code et tout peut-être et moi ça m’arrive souvent que le ARA ou la grille RGAA n’est pas adapté et et donc il faut faire un document à part pour montrer des exemples de code par exemple et donc là on donc on mettra dans les explications voir document en annexe voilà donc moi le je quand vraiment on commence dans des grandes explications où quand on commence à regrouper énormément de choses et que ça devient vraiment indigeste parfois c’est peut-être plus simple de penser avec un autre document voilà donc ça n’invalide pas du tout le la note RGAA et cetera puisque on va quand même planter et enfin faire des non conformités ou des conformités donc ça va donner le score par contre les  explications elles sont juste déportées dans un autre document qui peut être plus appréciable et plus compréhensible voilà donc c’est faut nuancer aussi voilà quand on a juste des erreurs à vider les alt machin c’est assez rapide mais voilà on n’a pas encore attaqué les gros critères là mais voilà donc on va y aller. J’en étais où ? oui les alternatives donc ici on a certaines… hop je reprends mon petit plugin pour activer les choses hop image display tac on voit que certaines alternatives sont pas bonnes notamment le baromètre ici celle-ci le logo du baromètre pareil on voit que la technique on mettra pas logo puisque comme c’est un lien qui englobe l’image il faut donner l’information qu’on revient sur l’accueil donc là on va dire il faut supprimer l’information logo puisque c’est juste baromètre accessible voilà donc on le notera ici donc sur l’image hop évidemment je peux pas copier-coller tac c’est bon je recharge ah j’ai perdu voilà et donc hop donc nous aussi ce qu’on fait beaucoup quand on fait des audits c’est qu’on on prend on s’aide aussi de la de la structure du site en disant bon par exemple l’image Logo dans le header voilà donc là ça permet de bien cibler les choses parce qu’il peut y avoir plusieurs logos donc voilà c’est aussi important de bien cibler où on est voilà. Bah merci aussi Amélie et au plaisir oui merci beaucoup pardon plus moi je dois vous quitter quelques une petite demi-heure j’en suis vraiment désolé mais du coup merci à ceux qui ont déjà participé merci aux futurs qui arriveront j’espère que ça vous a plu on on essaiera de faire un sondage sur la finir ce genre de forme intéresse je pensais qu’on irait beaucoup plus vite que ça mais j’étais sûr qu’on déb de tout très cool éidment vraiment le but moi je vois descend mesure beaucoup plus simple faire des live sur des sujet précis ouais je t’avoue qu’on a on teste un peu des mécaniques parce que parce qu’on est assez fan de l’échange avec Mathieu et là on s’est dit tiens vas-y on va le faire après il faut des sites pour le faire aussi parce que les clients son pas forcément pour qu’on fasse ce genre de démarche évidemment là on a une occasion qui est celle du baromètre alors c’est dommage parti et j’aurais bien aimé lui demander si elle était intéressée par faire l’exercice en éconception par exemple ça hyper intéressant j’essaie de lui envoyer peut-être un message après mais ouais de toute façon il des je pense ça marcherait et bah oui pour le coup et donc là en fait alors personnellement que je rejoins Antoine les audits d’accessibilité en live je pour moi ça a jamais été fait donc c’est en fait c’est une première et donc de là on fait quelque chose un peu global et on voit que ben en fait on on a des débats et cetera sur déjà des certains critères qui sont assez petits et c’est vrai que ça pour être intéressant de faire des live sur des sujets plus précis et donc bah voilà comme ça on se concentre que sur quelque chose l’information qu’on retourne à l’accueil c’est hyper intéressant en fait tout ça et puis se rend compte qu’ a jamais une bonne réponse partage savoir c’est avec grand plaisir h vous dit c’est intéressant parce que c’est ce qu’on avance qu’on monte en compétence ouais de toute façon la thématique image et toujours j’aurais un site à vous proposer pour un futur live carrément un projet perso mais ouais de toute façon en fait si ça peut être fait sur des projets perso c’est ça qui est top là on est clairement sur un site qui se veut public donc et qui n’a pas de d’enjeu d’autre que l’amélioration donc du coup c’est pour ça que c’est cool ça ça même si c’est entièrement développé sur Warren j’ai pas mes patrons qui sont sur ma tête en train de dire ouais il faut que tu so c’est vraiment le but de Warren de moi et de Matthieu dans cette démarche c’est juste bien enfin c’est juste bien positif c’est d’envoyer un truc positif d’avoir une idée qui on pense va aider beaucoup de gens et visiblement c’est le cas et donc faut continuer voilà ou vas-y porteuse d’information il y a pas de description détaillée il y a porte description détaillé je un peu plus vite là porteuse information mécanisme de remplacement de texte stylé il pardon il faut que je mette non applicable excusez moi donc non applicable il y a pas de légende donc non applicable ça y est je suis devenu banque par contre je serais plutôt de sans pour autant écrire un avis exemple source baromètre oui totalement Mathieu le fait en général c’est juste là je pense que comme c’est pour moi l’exercice il le fait pas de la même manière oui voilà oui pardon mais c’est vrai en fait oui j’ai il faudrait que je me mette plus dans la tête de quelqu’un qui qui ne connaît pas oui exactement on pourrait non parce que là après c’est enfin tu vois il faut pas non plus que tu passe parce que sinon tu vas y passer un temps fou enfin les PDF que tu fais j’entends ce que tu dis Nathalie mais c’est vrai que Mathieu en général livre des PDF extrêmement complets à la fin des audit c’est d’ailleurs un truc que je lui reproche entre guillemets c’est qu’il va tellement loin moi je sais que j’ai fait passer des audits et j’ai reçu des audits d’autres boîtes qui étaient beaucoup plus concis mais on peux pas reprocher à Mathieu dans son travail de vouloir faire en sorte que l’accessibilité aille très loin de faire un travail très qualitatif de code oui pour l’image c’est assez rapide me confirmes-tu que tu n’as pas d’iframe ah si tu as peut-être une non tu as pas une iframe là sur le la notation de score en bas là non ah si peut-être le website carbone je suis pas sûr c’est pas une iframe non c’est pas un iframe c’est non c’est pas une il a du script carbone ah ou il injecte c’est bien que ce soit pas une iframe et donc moi personnellement de toutes mes connaissances du site il y a pas d’iframe donc on peut pareil aussi sur les iframe donc c’est non applicable et sur toutes les pages toc donc on va vite sur les cadres les couleurs on voit que donc normalement quand on utilise le petit plugin donc moi je vous ai montré Wave, il est où il est où mon petit plugin ? voilà il est là ! Tac quand on l’active on voit qu’il y a donc c’est une remontée automatique on voit qu’il y a aucune pardon je vous abandonne du coup mais je reviens très vite yes à toute et bisous s’il y en a que je revois pas et merci encore à tous et à toutes et je reviens juste après dans pas longtemps Hortense pareil je dois vous laisser merci beaucoup pour ce partage super très bonne journée à tous et oui très bonne journée aussi à toi Hort donc [__] j’ai l’impression d’être un youtubeur twitcher et tout donc voilà Wave il nous retourne donc zéro contraste de couleur et mais par contre voilà ça c’est pas parce que un outil automatique vous remonte qui a zéro erreur que bah il faut pas vérifier à la main du moins à l’œil donc moi personnellement là je sur certaines choses je me dis que je me dis tiens le vert qui est là sur fond foncé ça peut passer ou même le rose là je me dis tiens le rose ça peut être un peu un peu problématique ou même le jaune et cetera donc j’ai un petit plugin alors pica app color ça doit être celui-là professionnal color tools anyone can use ce n’est pas celui-là évidemment erreur de les effets démo je vais le trouver hein pica alors attendez est-ce que je peux aller sur le site à propos le site web voilà vous l’avez hop et donc je vous le colle là dans le et donc ce petit plugin là en fait c’est pas mal c’est qui permet très rapidement de mesurer le ratio donc du premier plan et de l’arrière-plan et il vous donne par rapport aux WCAG les bah si c’est compliance a double A ou triple A et donc c’est plutôt donc voilà comment ça fonctionne en dessous donc je dis A ou oui double A ou ou triple A donc voilà donc une petite pipette et on vient sélectionner les couleurs donc très rapidement quand on a un doute voilà c’est plutôt sympa de voir ça après il y a le moi il y a ce site là que j’utilise beaucoup aussi qui s’appelle Contrast Finder hop et Contrast Finder voilà il est donc je vous le partage hop je vous le mets dans le lien hop tac si cette règle nous concerne n’est pas appliquée dans cette page garantir un rapport de contraste entre les couleurs des liens et du texte qui entourent des liens voir les liens orange et blanc dans le FO oui ben c’est que j’y étais pas encore donc oui on va justement il faut quand même traiter le hover et le focus oui bien sûr oui il faut voilà c’est juste j’y étais pas encore donc voilà je vous partage moi les bons petits trucs que… enfin les bons petits trucs, les trucs en tout cas que que je teste donc Contrast Finder et donc ce qui est pas mal c’est que donc par exemple je vais prendre des couleurs attention ça va piquer les yeux des couleurs un peu fluo pour vous montrer comment ça fonctionne toc voilà et donc là pour le coup il va donc la couleur du du texte la couleur de fond il va vous donner le ratio de contraste donc on sélectionne nous donc il faut connaître après les ratios de contraste mais en gros quand on a un ratio de contraste de 3 c’est qu’on est sur une typo enfin sur une taille de texte pardon qui est non grasse supérieure à 19 pixels et donc au-dessus et quand on est 4. pardon 4.5 c’est entre 0 et 19 pixels voilà donc il y a des un ordre de grandeur aussi par rapport à l’ordre de ratio en moi personnellement j’utilise le 4.5 enfin très régulièrement à part si le 3 bah je rencontre le comment dire le cas avec des des tailles de titres de textes qui sont plus grandes que 19 pixels donc là pour le coup je vais appliquer le ratio de 3 mais là si on prend du texte là com ici que je vous sélectionne la contrast finder est un outil de calcul et cetera c’est vraiment plus petit que 19 pixels ça se voit et donc il il nous donne le ratio tout de suite ici donc il est à 3.3 et donc ce qu’on  va faire on va dire bah tiens modifie la couleur du texte et donc on va cliquer sur trouver des couleurs valides et il va mouliner hop et après il nous donne en dessous donc là il nous donne ce qui ne va pas donc vraiment le calcul qu’on a qu’on a de nos couleurs qu’on a nous sélectionné et après en dessous il va donner les les ratios de contraste qui sont valides par rapport à ce qu’on a sélectionné au-dessus donc 4.5 et il va nous donner le ratio le plus proche au début et  puis voilà en dessous voilà donc celui-ci est bien foutu aussi oui voilà bah partagez vos ressources aussi moi j’aime bien celui-là et mais il y en a plein d’autres sur les couleurs c’est assez il y a beaucoup de ressources même quand on utilise Figma ou d’autres solutions voilà il mais en tout cas voilà donc Contrast Finder est plutôt  pas mal notamment surtout il vous génère un lien donc qui est en haut ici un intitulé donc l’URL plutôt je dis un lien excusez moi l’URL qui a déjà les contrastes sélectionnés et donc quand vous le partagez un designer ou un chef de projet ou autre en développeur bah il a ce lien là et donc il voit tout de suite les couleurs de contraste qui sont bonne ou pas à prendre voilà donc c’est plutôt plus rapide que de dire ah bah il faudrait que tu utilises telle et telle couleur parce que c’est pas notre métier de faire des choix graphiques entre guillemets enfin de on va conseiller sur les couleurs mais c’est pas à nous c’est pas on n’a pas le dernier mot en fait après c’est le designer ou autre qui va dire bah ok on va utiliser tel rose là pour le coup dans mon exemple vous voyez un peu où je vais en venir voilà c’est que nous on conseille et on dit on on remonte les erreurs après que le designer prenne le rose qui est là ou le rose qui est au-dessus tant que nous c’est accessible bah voilà après c’est des choix de couleur ça nous concerne pas forcément tant que c’est tant que c’est contrasté bien sûr donc je dis reste beaucoup les couleurs dans chaque page web l’information ne doit pas être donnée uniquement par la couleur cette règle est-elle respectée et donc on va regarder les tests que nous disent les tests donc pour chaque mot ensemble de mots dont la mise en couleur est porteuse d’information donc là pareil on a un petit lien pour aller voir le glossaire sur qu’est-ce qu’une information ne doit pas être donné uniquement par la couleur cette règle est-elle respectée donc on va regarder les tests après retrouver dans le document les informations données par la couleur dans un mot ou un ensemble de mots après on a chacune des informations vérifier qu’il existe un autre moyen pour récupérer cette information présente un attribut title d’une icône et cetera et cetera si c’était le cas le test est validé voilà donc c’est très important de regarder les tests après quand on est auditeur ou auditrice middle ou senior on a l’habitude et donc on va un peu plus vite mais voilà quand on commence c’est important de bien regarder tous les tests et cetera et même aussi d’aller voir le glossaire parce que il y a plein  d’informations dedans il y a des cas parfois aussi il y a des exceptions aussi qui sont données et ce donc au revoir Nathalie et donc voilà donc là moi pour les couleurs toc. Où j’en étais ? Excusez moi l’information donnée uniquement par la couleur c’est respecté après on a dans chaque contraste entre la couleur du texte et la couleur de son arrière-plan est-elle suffisamment élevée et chaque les couleurs utilisé pour les composants d’interface et cetera donc pour moi chaque l’information ne doit pas être donnée uniquement par la couleur C elle être respecté donc là on va aussi pour le coup on verra plus tard parce  qu’on est sur la homepage donc on n pas de lien activé mais par exemple les liens des menus aussi peu peuvent être enfin vont devoir être audités aussi donc par exemple si je clique moi sur baromètre là en fait il y a une erreur c’est que par rapport à la navigation je ne sais pas où je suis et donc là il faudrait donc là on a l’effet hover je sais pas s’il y a l’effet focus  non l’effet focus n’a pas été fait et donc là si donc là il faudrait là je vous montre en effet hover sur le lien baromètre il faudrait que le lien baromètre là soit de cet état là c’est-à-dire que on est une différence de couleur et une différence une autre différence graphique là il y a une ligne qui est en dessous ça pourrait être un autre petit enfin un autre effet graphique une le texte peut être en gras on peut avoir une petite bulle en dessous, à côté enfin voilà un autre élément graphique voilà donc là il y aura une erreur quand on arrivera sur ce ce menu ce menu là d’ailleurs que je n’ai pas et là c’est une erreur de ma part je n’ai pas mis les transverses en tant que page donc on va l’ajouter tac comme ça ça sera fait je veux pas l’oublier donc option modifier les paramètres on va ajouter une page hop et on va donc c’est pas grave on la mettra à la fin c’est pas très grave tant qu’elle est traité transverse donc header navigation et cetera et donc l’URL de la page on va mettre l’URL de la page courante tac hop mettre à jour les paramètres et donc là normalement tout à la fin voilà j’ai la transverse qui est ici alors pourquoi page baromètre pourquoi il me l’a réinversé c’est dommage accueil bon faudra faire attention à je un petit un petit bug de la part de paramètres dommage qu’il pas repris l’ordre HM peut-être une erreur de chargement peut-être je sais pas si je recharge ça fait quoi ah non il aime pas bon bah dommage il y a un petit il y a un petit bug ici je vais y aller moi aussi merci beaucoup pour cette démo d’IT bonne journée bonne journée à aussi à vous Vanessa donc voilà j’ai bien en tout cas ma page transverse qui est ici et donc quand j’attaquerai les transverses je planterai ce qu’il faut dans les transverses, dans le header le footer ex pourquoi c’est transverse ? Pourquoi on dit pardon excusez-moi pourquoi on dit que c’est transverse c’est que c’est des éléments qui se retrouvent sur toutes les pages du site comme les bandeaux cookies peuvent être aussi des transverses parfois ça m’est arrivé ou même mes collègues aussi d’en faire une page dédiée mais on peut aussi les mettre dans les transverse parce que bah on n’est pas obligé de d’ arriver par la homepage pour avoir le bandeau cookies on peut arriver par une autre page une page produit par exemple donc voilà donc c’est comme c’est moi pour moi c’est c’est aussi transverse les bandeaux cookies donc je traiterai ça après je reviens sur mon comment dire mon mes couleurs donc mes couleurs je suis TIC ici tac mes couleurs donc chaque page web l’information doit pas être donné uniquement par la couleur et donc l’information qu’est-ce que c’est l’information donnée par couleur son transmise visuellement par l’intermédiaire d’une couleur l’indication que le chanson rouge son obligatoire dans un formulaire l’utilisation d’un fond bleu et cetera voilà on a plein de d’exemples ici c’est assez intéressant il faut les prendre en compte une indication textuelle visible et cetera voilà donc c’est plutôt intéressant chaque l’information doit pas être donnée uniquement par la couleur donc bah là pour le coup à part les transverses que je planterai plus tard moi je ne vois pas d’élément et donné par la couleur normalement on est bon est-ce que lui j’ai un doute parce que je sais plus quelqu’un  avait dit que tac il y a des choses dans le footer ah oui c’est peut-être sur l’effet focus ou l’effet hover des choses je sais plus mais bref donc moi pour moi dans l’information là bah elle est pas de pour moi c’est conforme puis qu’il y a pas c’est pas donné uniquement par la couleur sur la page d’accueil pas sur les transverses dans chaque FO je vois les contrastes entre les couleurs de texte et l’arrière-plan est suffisant donc là pour le coup bah voilà on a le on a ce que je vous disais ici par rapport à la taille de de graisse et cetera le texte en image et sans image en graisse par rapport à 24 pixels 19 pixels et cetera aussi donc dans je sais pas les contrastes entre la couleur de texte et son arrière-plan est suffisamment contrasté donc pour moi bah là je vois pas donc par rapport à mes outils et par rapport à ce que je vois ici là sur le jaune moi j’ai toujours un doute sur le mais normalement le jaune qui est ici sur ce fond là hop il est où mon petit picker premier plan c’est ce jaune là arrière-plan c’est donc là on est en sur le le jaune sur le fond foncé ici on est en ratio de contraste de 8.61 donc on est quand même très très bien donc pour  moi pareil il y a pas de d’erreurs de contraste de couleur à l’instant T comme ça après on verra les effets focus et CEA mais ça c’est c’est dans un autre un autre critère qu’on peut les valider ou les invalider donc pour moi ici les contrastes sont ok la couleur utilisée par les composants d’interface ù les éléments graphiques porteurs d’information son suffisamment contrastés h cas particulier donc là par pareil il y a la fameuse image avec le dégradé et donc là normalement tout est tout est ok on avait vérifié cela aussi ou que ça soit hop si je reprends mon ma couleur de fond versus toutes mes couleurs de dégradé on est en 63 le jaune ici on est en 761 voilà il faut c’est toujours compliqué les dégradés parce que il faut il faut il faut tester à peu près enfin même toutes les couleurs et tous les toutes les choses mais voilà donc là on est très bien le le fond foncé aide beaucoup on serait sur fond blanc on aurait planté beaucoup plus de couleurs mais là on est sur le fond foncé donc c’est plutôt très bien composant d’interface on est sur du multimédia donc les médias temporaires il y a pas de médias 
sur sur la page d’accueil donc là on peut mettre qui ne qui ne sont pas applicables sur cette Pagel non applicable sur la page he hop je descends tac tac tac on arrive après à la thématique tableau il y a pas de tableau donc on arrive à la thématique lien c’est là où on va voir si est-ce que chaque lien estil explicite et donc chaque lien texte vérifie une de ses conditions donc l’ l’intitulé pardon du lien seul permet de comprendre la fonction et la destination l’intitulé du lien additionné au contexte du lien permet permet d’en comprendre la fonction et la ation en gros ici c’est souvent les les liens cliqués ici en savoir plus voir plus qui sont problématique parce qu’il ne donne pas assez de contexte et donc c’est là où il faut travailler en accessibilité par rapport au code notamment par donc ça c’est en développement qu’on va corriger ça on va redonner du contexte à ces liens là pour le coup donc quand j’active je reviens sur mon site j’ai des liens d’évitement donc aller au contenu aller au footer nous contacter donc là pareil il faut les tester donc est-ce que quand je clique dessus je suis bien sur le contenu donc là c’est bon quand je suis sur aller au footer je suis bien dans le footer donc là on est bon hop et quand je remonte on a nous on met pas dans les transverses on pourrait oui c’est que oui complètement excusez-moi j’ parti sur sur les liens directs dans dans la page mais oui on va les mettre dans le excusez-moi on va les mettre dans le dans les transverses et donc nous contacter on vient bien sur la page Contact voilà mais on vérifie voilà et en tout cas les transverses ça sera bon ici dans les liens donc là on n pas de lien ici on a pas de lien là on est sur des liens et qui ils nous disent quoi on a donc on a les liens assurance l’image là elle est bien ignorée on a nos span là et on dit voir les fiches du secteur assurance le title là il renforce les choses moi personnellement j’essaie au plus possible d’éviter les titles mais là pour le coup le lecteur d’écran il dirait assurance voir les fiches du secteur assurance bon ça fait c’est red enfin ça fait doublon pas tout à fait puisqu’on reprend quand même le comment dire le l’intitulé du secteur personnellement moi je faudrait faudrait c’est là après on va voir autre chose c’est pour un titre qui doit introduire cette ce bloc là un titre caché pour dire bah secteur d’activité par exemple ou ou secteur voilà secteur d’activité audité enfin voilà il faudrait introduire introduire ce bloc là parce qu’il est pas introduit par le titre qui est au-dessus on comprend pas ce bloc là sans sans contexte de titre le donc là pour moi je vais laisser je n’invalide pas le fait qu’il y ait des titles donc voilà il renforce le fait qu’on aille qu’on comprenne qu’il y a des secteurs et tout donc voilà on met des liens après on va rentrer dans le débat que là il faut une liste <ul> <li> et pas juste une série de liens ça c’est encore d’autres critères qui rentrent en jeu donc là on est bon sur ces liens là qu’est-ce qu’on a après on a pas ah je pense qu’on peut j’ai pas un CSS disable all style linked non il y a pas un CSS pour afficher les liens je sais plus je pense qu’on a pas ici link dtail non display encore il y a pas il y a pas ça si vous me tool non il y a pas ici je pense qu’il faut créer une CSS spéciale pour pouvoir entourer ah mais non je suis bête l’outil je suis vraiment bête j’ai vraiment lien hop les liens tac et donc là les liens texte on vient cocher la case et voilà ça nous les entoure donc voilà avec l’outil assistant RGAA il nous entoure tous les liens donc ça nous permet d’aller plus vite et donc là on voit tac tac tac tac tac tac tac on a tout en bas on a nous contacter vers la page Contact donc là pour le coup moi ça fait redondant donc là on on bonne journée Eric pour le coup pour moi on va on va supprimer le title qui est ici puisqu’il n’apporte pas plus d’information au contraire nous contacter c’est un lien on sait les choses ce site pollue moins que 95 % des sites web testé par web site carbon title vers les résultats de la page là pareil le title n’apporte pas les choses donc on va le on le demandera de supprimer on a les liens Plan du site, Mentions légales, Accessibilité pareil c’est bon il y a des titles aussi sur le site du baromètre non ça sert à rien puisque on sait que ça le contexte c’est un lien Warren Walter donc on sait que c’est un lien après une idée originale d’Antoine boursier profil LinkedIn d’Antoine boursier le title on pareil ça là  ça renforce où on va et donc là par contre on pourrait le laisser hop donc certains tac les liens donc chaque lien est-il explicite alors tout à fait Hamza pour ta question il faudra indiquer l’ouverture d’un  lien externe c’est alors malheureusement en la nouvelle version du RGAA a perdu ce critère là le RGAA3 le deux il y avait un un test qui disait qui disait voilà que les il faut indiquer les liens qui ouvrent une nouvelle fenêtre enfin ou un nouvel onglet pardon le RGAA4 n’a n’a plus cela donc moi personnellement je trouve que c’est une très bonne pratique d’indiquer que tous les targets blank ouvrent un nouvel onglet donc ça serait une nouvelle fenêtre donc on mettra entre parenthèses là pour le coup Warren Walter nouvelle fenêtre ou Antoine Boursier nouvelle profil LinkedIn nouvelle fenêtre mais voilà ce n’est pas il y a-t-il le droit d’être en désaccord avec l’auditeur bah bien sûr oui pourquoi tu es pas d’accord sur quoi Joël moi je suis d’accord oui complètement c’est je suis ok aussi pour que ça soit une une une bonne pratique mais il n’y a pas de test RGAA dans alors Jimmy qui a une icône pour moi c’est obligatoire d’avoir une alternative sur l’icône indiquant que ça ouvre dans une nouvelle ah oui bien sûr yes dans ce contexte là oui voilà pardon excusez moi dans oui bien sûr il y a voilà donc là on est dans un contexte voilà avec une icône qui montre et cetera les choses et et oui donc là oui complètement tu as raison Jimmy le vu qu’il y a une une icône donc l’information était le là est donné uniquement visuellement via l’icône donc il faudra aussi la traduire en code donc là pour le coup absolument et ça alors je sais pas si la personne est parti mais j’avais vu une question de dire qui disait que le CSS a-t-il  un impact sur les lecteurs d’écran oui tout à fait notamment avec les pseudo éléments before  after et avec le content enfin la propriété content où justement bah on peut mettre donc là par exemple on a une un pseudo élément after dans le code donc je sais pas si je vous voyez  bien mais je peux zoomer un petit peu dans voilà dans le l’IDE enfin pas l’IDE mais de l’inspecteur de code et j’ai mon pseudo élément ici et en fait il y a un content qui est l’icône n’apparaît pas en contraste élevé ah bon d’accord bizarre parce que le quand on calcule la couleur de l’icône vers sur le moi pour moi c’est ça où ça me ça me paraît  bizarre je suis en 7.2 enfin 7 702 en terme de contraste donc je vois pas pourquoi je vois pas  où comment vous calculez le sellim le peut-être à cause de l’épaisseur du trait c’est ça hein ouais donc il faudrait ouais peut-être je al là pour le coup il faudrait donc là rentrer dans d’autres dans d’autres choses sur les couleurs ou alors c’est sur les les les images mais c’est là c’est encore autre chose donc bref je termine sur digresse avec toutes les questions les pseudo before after avec la propriété content qu’ a on peut mettre du texte dedans entre autres donc si j’écris ici vous voyez que alors est-ce que il m’a fait évidement par y a un background pu y a un masque et cetera que je désactive que je mets une couleur on voir me fais pas mentir évidemment dommage mais croyez moi que vraiment là on a ah  bah voilà c’est bon donc je mettre on va mettre on va essayer de mettre en blanc pour que ce soit un peu plus visible voilà donc là pour le coup voilà vous voyez que il y a du il y a du via content on peut mettre du texte et donc là ce texte là sera interprété il y a pas les liens texte pour moi  sont ok mais par contre ils sont pas il y a trop de il y a trop parfois il y a trop d’informations donc lien texte l’intitulé permet de comprendre la fonction destination il est où ce critère là l’intitulé visible a-t-il un intitulé et donc retrouver dans le document Les Liens quel qu’il soit pour chaque lien vérifier le contenu a contient un intitulé texte ou alternative ce le lien donc on va valider qu’ils ont bien des intitulés ici donc le le 62 par contre on va planter le fait que il y a des titles qui viennent soit enfin qui viennent comment dire c’est ceux-là qui sont en bas là c’était dans mon critère tac les liens-textes qui sont ici typiquement ce suite pollue moins que 8% des sites vers le résultat de la page web enfin voilà c’est ça sert à rien ce genre de title pareil le title sur la page Contact toujours transverse bah oui oui c’est le footer [ __ ] je suis bête je suis vraiment fatigué moi toujours transverse et donc les liens tac dans ici donc qu’est-ce qu’on a bah là on est bon là on est bon voilà tac voilà donc c’est bon c’est beaucoup plus réglé c’est conforme c’est pour vérifier si on suit ouais on va dire ça merci Joel tac les scripts alors là on va arriver sur un un morceau assez conséquent parce que a une version il faut aussi tester les versions responsives et notamment donc là ça va être dans les transverses donc je prends je mets le menu ici il y a un menu burger qui qui apparaît hop et donc qu’est-ce que j’ai fait tac voilà donc quand on est ici on voit qu’on a un menu burger qui apparaît donc pareil on devra le tester quand on sera en transverse sur voilà sur les script voilà Antoine est de retour donc on testera voilà c’est là que c’est important aussi c’est aussi en responsive aussi en accessibilité pardon on doit tester le responsive voilà donc là il y a pas de bah il y a pas de script voilà sur la page donc ça va être en tout cas enfin sur hors transverse il n’y a pas de script ici cependant chaque script est compatible avec technologie assistant ch script et a une alternative ok contrôle par le clavier on verra parce que  j’ai plus tout en tête mais sur la ah non ça do être la présentation de l’information donc on  va mettre applicable pour le moment puisqu’il n’y a pas de script sur la page je suis toujours sur la page d’accueil hein oui c’est bon toc voilà chaque page web est définie par un  type de document donc ça c’est très rapide on ouvre l’inspecteur on on regarde le doc type et donc il y a bien le doc type qui est là ou alors on nous on fait c’est quoi c’est contrôle u voilà pour afficher la source et on voit bien qu’on a un doctype HTML ici donc là on est bon donc type de document donc pour chaque le type de document il doit présent le type de document est-il valide et pour chaque page web procédant une déclaration de type document celle-ci est-elle située avant la balise HTML donc là oui on est bien conforme oui suggère de  faire un baromètre des baromètres ça pourrait être pas mal Antoine on va devoir faire un baromètre des baromètres oui après on a dans le code source généré est-il valide selon le type de document spécifique donc là pour le coup il y a pas 36 façons de de regarder moi j’utilise l’inspecteur non c’est pas l’inspecteur W3C c’est le vous voyez me venir je sais plus c’est W3 et j’ai c’est tellement des raccourci que Validator voilà hop et donc tac je l’utilise donc on fait c’est ça j’étais mais j’étais plus rapide que ah oui tu donnes l’URL bien joué et donc on inspecte la page pardon excusez-moi c’est pas celui-là on fait inspecter l’élément hop on prend toute la page puisque si on fait ce que j’ai fait avant donc afficher la source certaines technologies de développement notamment tout ce qui est react angular et vue ou même maintenant il y a du nest JS en il plein de tout ce qui est en qui utilise beaucoup de JavaScript bah souvent c’est dans une seule et  même page et c’est des choses qui sont ajouté à la volée et donc la la source de la page quand  on fait contrôle bah en fait elle a rien elle a juste une coquille vide donc ce qu’il faut  faire c’est comment dire prendre l’inspecteur de code et vraiment copier-coller ce qu’il y a dans les balises HTML donc là si on fait modifier comme HTML on fait contrôle A contrôle C  on a une petite subtilité c’est que donc là c’est direct input donc là je fais ici je dois mettrec type ici je sais pas si ça passe copier donc on va le coller on lu mettre sinon il va retourner des erreurs mais c’est du transvers plutôt demandé en fait ça dépend parce que alors oui attends je je d’abord je finis mon truc et après je te réponds doctype HTML voilà toc et on fait check en gros tu as des codes lang c’est-à-dire là tu as le premier c’est je me trompe c’est le code donc c’est la France et FR derrière c’est la langue c’est français France mais tu as français canadien français quelque chose d’autre et en fait c’est la même chose pour l’anglais en anglais as en UK en US en Canada non en CA tu as en Australie et cetera donc ton code langue voilà il peut avoir une donnée en plus qui est donc les majuscules derrière mais pas mais si tu mets juste langue FR c’est très bien aussi voilà comme ça c’est du français c’est juste que si tu mets un peu plus il va y avoir une une autre interprétation voilà ah mince je suis bête j’ai oublié le tombé une fois sur une langue mal enfin pas renseigné d’ailleurs sur un gros site on l’a découvert quand on faisait la formation avec Renault digital du coup je donnait la formation là-bas donc on a testé plusieurs sites de concessionnaire et on est tombé chez Peugeot je crois que c’était Peugeot et assez surprenant la balise à ce moment-là n’y était pas sur certaines parties du site et du coup on s’est retouvé à avoir une lecture vocalisée en anglais alors j’ai voulu aller reprendre la la vidéo mais je n’ai pas eu le temps ils avaient fait la mise à jour avant c’était dommage salut ouais salut Joël merci beaucoup beaucoup beaucoup de toutes tes interventions c’était vraiment très cool à bientôt et à la pour le pour nous proposer le site ah oui pet de fr tu veux il l’a proposé déjà en en message ah oui tu as tant de tant de de déclinaisons de la langue française c’est ouf pour donc là le com com moi je reviens sur mon audit le W3C validateur nous donne après une tout ce qui ne va pas donc il faut prendre avec précaution parce que parfois comme c’est un robot toujours il peut se planter dans l’interprétation et il peut mettre des erreur alors qu’il y a pas d’erreur notamment là vous voyez il met value prelad donc voilà sur un lien un pour charger du CSS le truc par contre qui remonte ici là c’est très intéressant c’est la met viewport où en gros il y a eu un choix de fait et qui n’est pas bon de mettre un maximum scale à 1 c’est-à-dire que donc on a un initial scale à 1 donc on est on va dire 100 % et le maximum scale il est 100 % donc ça veut dire que là en renseignant ça on peut pas zoomer dans le si on on consulte le site sur mobile on pourra pas zoomer parce que le Isabelle le au revoir Isabelle parce que le comme on a mis maximum scale à 100 % bah on peut pas zoomer dedans donc la recommandation c’est de supprimer maximum scale il faut même pas mettre m 2.0 4.0 c’est quoi tu dis par RA ouais je pensais voil US par on enlève tout ça et donc ce qu’il faut laisser c’estal scale à voilà vous pouvez mettre minimum scale à mais pareil moi je le conseille pas très bien salut et donc voilà donc recommandation très importante ne supprimer enfin ne jamais ajouter maximum scale puisque ça empêche les gens de zoomer sur mobile pour qu’elle puisse mieux voir les caractères et cetera ou voilà mieux naviguer donc voilà parce que Cell en plus je l’ai fait évaluer par chat GPT bah voilà bah chat GPT tu vois donc c’est là tout le truc c’est que on a une remontée d’ erreur donc là on va on va revenir dans notre code le code source est généré donc là on met non appli non conforme excusez-moi et donc là on  met dans le alors ça ça serait plus transverse ça parce que c’est dans le Head donc là on va le mettre dans les transverses qu’est-ce qu’il y a d’autre qu’ l’ a remonté qui n’est pas transverse les script c’est transverse ça c’est transverse ça c’est transverse ok bon bah donc là il y a rien du tout donc là le code le code source est ok donc on met conforme alors attendez parce que comme les transverses vont impacter toutes les pages on va mettre on va mettre non conforme et on va le mettre tout de suite dans les transverse excusez-moi hop donc il est où transverse et c’était le critère voilà hop type de document tac le code sur C donc là c’est non conforme sur toutes les pages donc là on a propagé sur toutes les pages la hop donc on va mettre MTA met viewport plutôt met viewport tac supprimer les par les valeurs et comment qu’elle s’appelle l’autre userscalable=no voilà ah oui donc en plus j’ai vraiment coupé le zoom volontaire vraiment oui voilà mais c’est en soi c’est voilà ça arrive hein c’est comme ça mais alors figure-toi que c’est une balise que j’utilise depuis longtemps et je la répète un peu dans tous mes th WordPress donc tu es presque sûr de de la retrouver dans chacun de mes sites oui en en fait le il y a du Markdown en fait le l’outil il comprend le Markdown alors attends-ce que c’est moi c’est un abus de je crois que c’est comme ça serait plus comme ça excusez-moi ou là ça va mettre en bold voilà et donc si on fait voir la syntaxe style de texte voilà ah non c’est italique di di c’est gras je pensais que crochet excusez-moi  c’est du je pensais que ça m’était en gras et en fait non donc il faut mettre l’étoile voilà donc là c’est étoile étoile plutôt tac excusez-moi je pensais que croc c’était à minimum empêche de dézoomer bah oui en fait si tu mets minimum scale à 1.0 bah en fait tu vas pouvoir tu vas pas pouvoir dézoomer alors le truc Hamza pardon Hamza est parti je redis au revoir du coup mais au cas où il serait encore là le pour le minimum scale pour moi dernière question pour la fin de la presse je garderai la réponse en replay le site Picard dit qu’un audit serait en 2020 mais aucune nouvelle depuis le site Colmar nous dit qu’ est conformité parti de 27 % alors qu’ est non conforme à moins de 50 il y a encore plein de sites qui sont borderline avec bah oui mais évidemment ouais qu’est-ce qui se passe dans ce cas et ben il faut faire de la délation il faut le dire il faut revenir il faut revenir vers eux donc en premier via le leur formule de contact qui mettent à disposition notamment dans la déclaration d’accessibilité et qui disent bah si vous avez un problème contactez-nous à je sais pas moi accessibilité@picar.fr ou contact@ je sais pas le l’adresse qu’ils ont utilisé et sans réponse de leur part on peut solliciter le Défenseur des droits pour dire bah voilà le site Picard et cetera donc faire une une remontée et voir les associations et cetera voilà c’est la même chose pour pour Colmar pareil défenseur de droit enfin d’abord d’abord les contacter pour  peut-être ça se trouve Picard il y a un audit qui doit être fait mais voilà mais en fait ils le disent 2020 mais oui là complètement ils ne sont pas bon au niveau de la loi donc moi j’en ai fini avec mon avancer par la suite a baromètre d’ailleurs c’est de pouvoir justement signaler demander plus de 10 ou chose comme ça quoi yes exactement donc j’en reviens moi à ma page d’accueil parce que là j’ai fait les transverses malheureusement donc mes éléments obligatoires donc là on est non conforme parce qu’on a trouvé des erreurs la langue par défaut est-elle présente oui il y a bien une langue en français dans chaque la langue par défaut et le code langue est-il pertinent oui chaque page web a un titre de page donc là le titre de page c’est dans le head et on va voir le title de page donc  là c’est marqué baromètre des sites accessibles l’outil des tendances de l’accessibilité numérique le pipe qui est donc le caractère de donc c’est pas un slash c’est un pipe il sera interprété comme pe-ê donc il dir un baromètre des sites accessibles je sais plus comment il le dit parce que le slash il dit barre oblique le pipe le lecteur d’écran je sais plus comment il le ti on pourra faire le la démo la démo après mais il y a bien en tout cas il y a bien un titre de page et le titre de page est-il pertinent bah oui parce qu’on dit bien baromètre des sites accessibles l’outil des tendance après le truc c’est d’aller voir aussi les autres pages pour voir si le titre échange donc tous les baromètres accessibles là on a quoi le journal de l’accessibilité numérique baromètres accessible on a tous les baromètres des bah oui voilà ça c’est bon donc ça et là accessibilité accessib baromètre très bon argument pour le se bah oui après on pourrait aller un peu un peu plus loin sur la page d’accueil on pourrait dire accueil baromètre mais là pour moi c’est recevable aussi puisque on est on est comment dire sur la page à eux tu vois bah il ils font un truc  vraiment plus fort là le bar le le ara en fait je viens de m’apercevoir de ça c’est que quand tu as sélectionné la selon la page que tu as sélectionné qui est en cours il te dit donc audit baromètre des site accessible page en cours accueil c’est pas mal ça c’est pas mal ce qu’ils ont fait de toute façon ils ont travaillé ave que l’AGEFIPH non pas l’AGEFIPH ils le disent là le FIPHFP voilà c’est l’association pour ils ont travaillé avec des personnes handicapées pour tester les choses donc c’est vachement bien donc lang là on est bon le titre bon le titre est pertinent chaque changement est-il indiqué dans le code source donc là pareil il faut regarder donc bah si le baromètre parle en anglais et donc là on a un beau petit storytelling donc on a bien des des des des textes des mots pardon qui sont dans une autre langue que la langue du site nous on est en français comme on l’a déclaré et donc ici il faudrait donc là on a du storytelling après il faut regarder donc là c’est à la mano hein c’est à la main il faut regarder et lire les textes pour voir si on a pas d’autres contenus qui sont en anglais ou en dans une autre langue hein donc là afficher noté ing il a pas vraiment de traduction ben non c’est que en fait ici il faut pas mettre une traduction faut le l’indiquer que c’est en anglais donc là tu mettras en fait un span autour en gros tu vas faire ça donc tu vas faire span donc comme ça hop mince alors si on peut avoir une traduction en français une traduction oui une traduction on met la traduction ou alors on change le mot et ce ça serait mieux maintenant si tu mets tu peux pas enfin tu veux si tu ne veux pas parce que parce que voilà c’est comme ça c’est ton choix mais en fait il faut faire ça donc en gros quoi du coup c’est un spam évidemment il l’a ah mince un span langue ah oui du VO pardon je je me suis mal j’ai pas mis j’ai pas fait modifier voilà m même sur un mot comme celui-là bah oui utiliser le mot marketing par exemple alors non le le je crois que mot marketing ou comme cookie comme Facebook comme et cetera c’est rentrer dans le dictionnaire français donc là on on peut être communication narrative très bien je cting je mettrai communication narrative hop et donc là voilà le le bon il y a des mots en fait qui sont bons en fait tu as pas besoin de les les traduire j’ai dit Facebook mais je crois que facebook en fait on pourrait le mettre et donc voilà donc en fait en gros je sais pas si tu vois mon code Antoine mais en gros on va mettre un un span c’est le l’élément neutre le plus simple à mettre un span avec une langue autour et donc le le lecteur d’écran prendra le bon accent pour lire ça voilà génial je savais pas ça sinon alors je sinon là il dira story telling story telling j’ai dû le faire tester donc je retesterai ça peut être intéressant et donc là après est-ce que tu as d’autres donc c’est là oui c’est un peu long pour nous en terme d’auditeur parce que on doit regarder tout le site enfin tout le contenu et voir s’il y a pas de mot autre que du mot en français et voir après si c’est si c’est bon moi je n’en vois pas d’autres donc bah malheureusement on doit planter ici donc c’est non conforme et donc recommandation hop du coup on va faire un deuxième truc qui sera le contre-audit du coup après  ça êre je sais pas si on peut faire le contre-audit dans ARA directement j’imagine que oui et bah oui bien sûr pourquoi on pourrait pas non je sais pas tu sais un duplicata d’audit je sais pas je te suggère hop faire ça on fait un sondage à la fin pour comprendre storyelling oui tu as raison enfin en même temps le mot français qui communication narrative je suis pas sûr que soit hyper doit avoir un attribut lang ah oui ça c’est ça qui est le seul défaut  que je trouve enfin le seul défaut il y a peut-être plusieurs mais en tout cas l’un que je vois là c’est que dans la dans le champ texte de en description tu peux en tout cas sur mon mac je peux pas jouer avec les flèches directionnelles donc je peux pas revenir surtout gauche- droite je peux pas revenir au clavier dans le un mot de ma phrase voilà donc bon ouais donc  voilà on sera remonté à à ben au pour identifier les mots anglais j’imagine que c’est plus rapide en lisant la page avec le lecteur d’écran oui on peut oui oui on peut on peut faire aussi plus rapide je sais pas mais plus rapide en tout cas ça fait des choses ça peut aider c’est comme ça qu’on teste parfois les points médians par exemple moi je sais que les points médiant j’ai du mal on a pareil un débat là-dessus où il y a pas de bonne réponse évidemment mais ça permet de les repérer plus rapidement oui ça c’est sûr salut Karine à bientôt à plus tard mais oui à plus tard Karine mais de toute façon les gens vont les manger et cetera oui tout à fait hésitez pas donc on fera évidemment un replay ah oui voilà donc là aussi bah là je vous montre en fait dans chaque page web le code source le code langue de changement de langue est-il valide et pertinent ben en fait il non il y en a pas donc on le salut on met non applicable puisque il n’est pas là on a planté CELI auudsus dans la balise ne doivent pas être utilisé uniquement à des fins de présentation cette règle est-elle respectée al  ça c’est toujours un critère le 89 un peu su pas sujet à débat mais voilà il est important il faut bien le prendre en compte et donc pour ça il faut s’aider de la doc justement qu’on a par exemple il donne des exemples justement uniquement à des fins de présentation c’est utilisation de balises HTML pour une finalité différente de celle qui est prévue dans la spécification exemple utiliser une balise <hn> donc une balise titre à des fins de grossir de donc à des fins de effet typographique donc de grossir des choses et cetera utiliser des blocs code pardon pour mettre un paragraphe en retrait et cetera après il y a des petites notes qui sont importantes l’utilisation d’éléments DIV ou span ou plusieurs BR pour créer visuellement un paragraphe et considéré comme non conforme donc c’est là souvent l’erreur qu’on trouve dans les sites c’est des des morceaux de texte qui sont dans des div et donc pour le coup donc là si on on on on inspecte un peu le site il faut inspecter tous les tous les blocs en fait on est il y a pas de il y a pas de magie là par exemple il faut regarder si là on a un H2 avec un un paragraphe en dessous voilà en fait s’il y a des textes qui sont englobés dans des div là c’est pas bon parce que ça doit être structuré donc ça doit être dans des div dans des paragraphes pardon et non dans des div donc là pour le moment on voit que c’est plutôt bien fait sur cette page là on a ça après on a en dessous on a un paragraphe ouais on a un paragraphe ici aussi dans le bloc ici on a quoi on a un H4 comme ça on verra après parce que c’est pas bon ici on a quoi on a trois paragraphes ça c’est très bien donc là pour le coup pour le moment sur Al sans prendre les transverses header footer il y a pas de <p> enfin il y a pas de <div> avec du texte dedans tout est structuré donc là on serait bien pour juste ce C remarque là <div> paragraphe A il y a pas de <br> non plus ARIA propose un rôle présentation permettant de supprimer la sémantique d’un élément comme un H1 rôle donc là on en a pas encore le rôle présentation utilisation fortement déconseillé voilà donc là ils font un lot sur ça ici hop pardon excusez-moi je reviens sur mon site il y a pas de d’éléments qui sont utilisés uniquement à des fins de présentation la structure est enfin est bonne donc pour moi je je valide ça le changement de sens de lecture est signalé il y a pas de changement de sens de lecture donc on met non applicable la structure d’information là par contre c’est là où c’est intéressant chaque page web l’information est-elle structurée pour l’utilisation appropriée de titres donc là c’est les titres on parle de titres HX ou HN donc de h1 à h6 et donc là pour le coup j’ai un autre petit plugin à vous présenter qui s’appelle HeadingsMap et ce petit plugin HeadingsMap permet de très rapidement naviguer de titre en titre et de voir la structure en fait de titre dans dans la page il y a une erreur qui a été faite je sais pas si je peux pas zoomer je pense ah si je peux zoomer voilà donc il y a une erreur qui a été faite en accessibilité ici où on a plusieurs blocs donc là on a un titre chaque titre doit introduire un contenu c’est ça en fait la règle aussi en accessibilité pour les textes qui ne sont pas des labels et des titres des paragraphes mais qui font de trois mots j’ai souvent eu tendance à mettre des span étant donné qu’un paragraphe est censé être un paragraphe faut-il finalement mettre un P dans tous les cas attends je reprends ton contexte ni des labels ni des titres ni des paragraphes mais qui font deux trois mots j’ai souvent  tendance à mettre des span alors je crois que je vois à peu près ce que tu veux faire moi j’aurais mis des P parce que bah c’est même si c’est un paragraphe bah c’est un petit paragraphe parce que des span en fait c’est une balise neutre comme une div et donc c’est pas forcément interprété le truc c’est que les certaines personnes peuvent naviguer de paragraphe en paragraphe donc après il y a aussi une question de contexte qui a autour si tu es deux trois n’apporte pas forcément grand chose si par exemple ils sont dans les tags mais tu as des tags et ben tu as un résumé ça sera des <ul> qu’est-ce que là comme ça je vois pas trop moi j’aurais tendance à mettre des P parce que voilà au moins je respecte le le critère après avoir peut-être échangeons ensemble après pour avoir un cas plus plus concret et parce que là je vois pas trop j’ai beaucoup de trucs en tête et je vois pas trop un cas qui pourrait avoir juste un SP voil si mais du coup ce serait sans le P mais j’imagine que les si tu veux  mettre un grand texte quelque part mais comme le span est censé être considéré  comme une exception texte une différence dans le texte il faut que quand même une balise je pense moi je mettrai même si même si là Antoine oups pardon j’ai mal cliqué même si Antoine il disait là petit storytelling bah là ça doit être ça doit être quand même un un P ou  un titre enfin voilà là si il avait pas considéré comme un titre ça devait être un P même en deux mots peu du story telling VO c’est un paragraphe donc j’en reviens à mon truc c’est que j’ai mon petit plugin HeadingsMap qui me montre que en fait Antoine il a créé des blocs ici donc trois blocs avec des titres H4 et il en un autre aussi en dessous il en a d’autres aussi en dessous en fait comme un de base il faut savoir que un titre introduit  un contenu un contenu ça peut être une liste un paragraphe un bloc en dessous voilà et là en fait on est coincé c’est que les quatre donc les trois items ici que je vous mets en surbrillance donc les les porteurs et porteuses de handicap peuvent savoir quel quel site leur sont accessibles les entreprises se découvrent des opportunités humaines et commerciales l’évolution dans le temps de la prise en compte des normes accessibilité voilà le ça n’introduit pas en fait de de choses en dessous ces blocs là son sont introduit pardon par un titre au dessus mais dit donc à quoi sert ce baromètre et il va expliquer il va argumenter donc là en fait on va devoir transformer ces titres en <ul><li> donc en liste parce que c’est une série d’arguments voilà c’est la même chose pour ce qu’il y a en dessous on a pardon un titre qui dit j’ai une mauvaise note pourquoi tu tu l’affiches et on a un texte qui est c’est aussi de la transparence une personne porteuse de handicap donc là on va le transformer on va mettre un paragraphe il y a des effets de de graisse qui sont fait donc on peut les reprendre avec une balise strong ou une balise B la différence entre strong et B c’est que strong a un plus fort impact SEO et B c’est plus de la décoration c’est comme I et em I et em font la même chose italique voilà mais le le em si je m’abuse est mieux interprété en SEO que le <i> mais ils font exactement la même chose ils mettent le test en italique en tout cas pour le strong et le B c’est le ça le se c’est c’est plus le strong qui est mis en avant pour favoriser les choses déprécié le <b> il me semble alors en tout cas ça nous sert nous en dev pour on veut on veut mettre du texte en gras mais on veut pas qu’il a un poids en SEO au lieu de faire de <span> <b> bah tu peux quand même utiliser une balise sémantique <b> oh les subités voilà c’est petites choses que tu end aès en tout cas c’est ce que moi j’avais appris à l’école et après avec mes différents tuteurs et que j’avais eu j’avais fait des boîtes  dans une boîte il y a longtemps peut-être que ça a changé mais en tout cas c’est ce que j’avais appris donc voilà on va changer ça et donc là on va planter malheureusement chaque page d’ination était structurée par l’ation à propri des titres avec moi oh là là tu un monstre est-ce que voilà donc là on va citer les titres en question donc là je reprends mon petit plugin HeadingsMap et on va dire les titres donc là il faut citer alors soit on prend un contexte de bloc on dit les donc les les titres dans le bloc Mach et parce que on pourra prendre BL smile dansf design système de l’État français est très bien d’ailles pour système d’un pays je trouve effectivement oup juste ich unot effement ça peut être une indication ça voudrait  dire que le DSFR a forcément raison mais ce qui pas forcément toujours le cas j’imagine mais en tout cas c’est vrai que sémantiquement vous pouvez vous fier au DSFR c’est top mais ouais bon du coup tu Mathieu est dur mais mais juste finalement c’est ça donc là pareil aussi pour information alors nous c’est pas c’est plus du SEO que de l’accessibilité strong une balise strong dans un H4 ça sert pas à grand-chose parce que tu surtout en SEO en fait tu as déjà un titre et en plus dans le titre tu dois comment dire ah Anne Sophie tu dois comment dire tu as ton titre donc déjà qui a un poids en SEO et aussi il a un poids en accessibilité et en plus dedans tu mets du strong donc c’est vraiment genre c’est le important du important mais ça apporte pas plus de poids donc là pour le coup on pourrait recommander de mettre un un span avec gold voilà ou un <b> voilà par exemple un <b> pour être très bien aussi mais point de vue SEO je crois que c’est même ça peut dévaluer en fait je mets des parenthèses quand je dis ça mais strong dans un <h4> ou dans un <hn> c’est pas forcément pertinent j’aurais aimé qu’on ait un expert du coup j’avais ch la prochaine on fait aussi une écoconception par du coup apparemment Amélie n parle du je sais pas le prononcer mais du coup il y a un référentiel d’écoconception je pas comment on dit le RGSN du coup mais référentiel mais il est encore plus flou donc effectivement comme disait serait intéressant pourquoi pas le titre doit être ouais du coup c’est la prononciation que je cherchais si tu as envie de te lancer à ouvrir ta ton vocal et à tenter je sais pas le dire en fait alors c’est comme le RGAA dit RGSN ça ne se dit pas RN ok ben voilà merci voilà pour juste les lettres j’ai déjà entendu des Ragas moi et je franchement ouais j’ai entendu le Ragas je me suis de quoi cause et en fait il disait bah tu sais pour l’access ou bah ouais ok je l’avais pas moi tu vois mais très bien non non RG SN c’est tout simple RGN merci beaucoup mais ce serait vraiment cool j’aimerais bien faire un des exercices qui existent pas mais faire des audit live comme ça tu sais de d’avoir de la confrontation entre SEO Access éconception et ce serait hyper intéressant  de réussir à avoir des consensus alors ça va être extrêmement long mais très intéressant merci là  c’est toi la top du coup de d’Amélie tout à fait tout à fait pe la top le critère 9.2 donc chaque page la structure du document est-elle cohérente là pareil on a un autre petit plugin qu’on peut utiliser qui s’appelle Landmark et en fait grâce à landmark en fait il va donc regarder tout le code et il va détecter les balises header les balises navigation enfin les balises nav les balises footer et cetera et donc après on peut cliquer dessus pour pouvoir pour voir un peu où on est et la structure de document cette structure de document là elle concerne pas mal aussi les transverses notamment parce que on va la retrouver un peu partout et donc on va plus impacter les choses ici enfin dans cette pche là on aura des choses à dire parce que notamment on peut renforcer ces balises là donc balise main avec des rôles et typiquement le rôle on peut mettre sur le header on peut mettre un rôle un rôle banner pour dire que voilà c’est bien la bannière c’est bien en haut sur main on peut mettre un rôle main pour il il en faut que un d’ailleurs rôle main la navigation on peut aussi mettre un rôle navigation et il peut y en avoir plusieurs parce que vous pouvez avoir une navigation navigation principale pouvez avoir une navigation à gauche on peut avoir une navigation aussi dans le footer voilà on peut avoir plusieurs r navigation il y a une différence dans l’onglet sûrement oui exact donc si je vais dans wave et dans structure on voit header navigation il y a main il y a des logos et ce il y a voilà il y a une différence avec l’onglet ah bon pourquoi il détecte pas la même chose j’ai mon Banner j’ai donc j’ai mon header j’ai ma navigation il a détecté j’ai mon main et après j’ai mon footer ben j’ai mon footer qui est bien qui est ici il est très bien ce footer je cis et oui non je vois pas la ah oui la ah oui pardon d’accord je excusez-moi oui elle elle affiche les h les h mais comme je suis pas pass par un autre les rôles ne sont si en fait c’est utile ça peut justement renforcer parce que si vous avez des la une balise nav enfin nav voilà on c’est bien de dire bah que c’est une une navigation après on peut mettre en plus un aria-label pour dire c’est la navigation principale ou navigation secondaire donc là ça va  aussi renforcer aider pardon la personne qui va utiliser un lecteur d’écran comme ça elle va comprendre et pour se repérer que bien là elle est sur la navigation principale et cetera  et cetera voilà mais moi personnellement j’ajoute toujours les rôles parce que ça améliore la compréhension donc surtout sur des structures qui peuvent être un peu complexes et cetera et comme on sait pas si en SEO ça a une valeur encore ou pas de rajouter ce truc là autant les mettre c’est ça il y a pas de mais par contre quand on regarde le critère en question donc si on va sur la zone d’entête de page la structure c’est bien header et il dit vérifier que la zone de structure au moyen d’élément header vérifier que la zone navigation principale secondaire structure moyen nav oui vérifier que la navigation que la nav n’est pas utilisé en dehors de la structure  de zone de navigation principale et secondaire vérifier que la zone de contenu principale est structuré au moyen d’un élément main donc ça c’est bon si le document possède plusieurs main vérifier qu’une seule des éléments est visible voilà par qu’il faut que un M une balise main visible présente visible et après vérif que age en voilà moi personnellement est-ce que si on va sur le VO la définition du contentinfo le rôle en fait ça rajoute des choses moi personnellement je ça veut pas dire que c’est invalide moi personnellement je fais une remarque donc je met conforme mais je fais une remarque ça permet une compati oui ouais parce que les alors quand on dit ancien navigateur c’est ceux qui ne supporte pas header footer on est sur Ie 10 d’ a 15 ans donc oui  après je ne dis pas que c’est pas il faut pas les oublier mais bon on voit que Microsoft a arrêté le support d’Internet Explorer d’ailleurs et donc il est sur Edge maintenant donc voilà il faut à un moment donné passer aussi à autre chose mais oui en tout cas la remarque est bonne c’est tu ne tu es vraiment accroché à i9 sais c’est ta revendication tuas un pin mais mais Internet Explorer enfin Microsoft Internet Explorer fait énormément pour le web il faut savoir oui mais il a combien de temps conforme donc chaque page we chaque liste est-elle cohérente enfin est bien structuré je sais pas si tu as des listes d’ailleurs je vais regarder oui  dans le footer déjà il y en a une je crois oui mais c’est des éléments transverses là je parle de dans la page index attends oui je CIS pas long structure c’est quoi les listes tac là il  va me les entourer donc là tu as le header qui est ici et à l’intérieur tu as pas donc c’est bon donc là on ben on met non enfin non applicable puisque il y a pas de liste dedans on lui a dit au-dessus  de transformer en liste donc c’est bon on prend en compte les citations est-ce que tu as des citations non en a eu mais il en a plus on va voir est-ce qu’il entoure les blockquote retrouver la description du test quoiourour il y en a pas j’ai pas de citation comment j’ai pas mis de bal du coup ok pas de problème présenter l’information donc là on arrive sur la 10è thématique sur 13 les pages la est elle est nul part très bien dans les sites web la feuille de 6 sont utilisé pour contrôler la présentation de l’information donc là pareil il faut regarder donc faut lancer le test donc là pour le coup on y va mince hop hop je sens que j’aurai pas ma note totale à 13h30 non c’est certain on a même pas fait page la dans chaque page web les balises servant  à la présentation ne doivent pas être présentes dans le code source et donc là on a c’est ce qui est bien avec avec le le comment dire cette extension on voit les balises qui doivent être absentes donc les balises tu vois uniquement sur doc type est un ne correspond pas au HTML 5 donc là pareil on peut cliquer et il va nous il va nous entourer pardon les balises qui ne doivent pas être là donc là pour le coup le le test 101 est ok donc on peut passer au test suivant les attributs servant à la présentation ne doivent pas être présents dans le code source donc pareil c’est des attributs à ligne background et cetera donc là on vient cliquer dessus et normalement le test il dit pour chaque élément al afficher l’attribut donc là pareil on regarde s’il y a eu un impact dessus donc il y a pas eu d’impact donc il y en a pas donc le 10 1 2 est ok le 10 1 3 pour l’utilisation des espaces vérifier les conditions si l’espace ne sont pas pour séparer les mots les espaces ne sont pas utilisés pour simuler un tableau les espaces  ne sont pas utilisés pour simuler les choses désactiver les styles vérifier l’absence de l’espace entre les mots donc là on désactiver un petit raccourci tout de suite avant on éta obligé de passer par le plugin moi je passe par plugin web developper et j’allais dans les CSS et je faisais disable CSS voilà maintenant le plugin assistant le permet on vaquer dessus donc là on a bien le  site sans CSS et on voit bien donc là il faut détecter s’il y a pas des espaces et cetera qui sont ajoutés en plus et donc pour le coup en rapide passage je ne vois pas de différence hop on réactive les CSS et donc le test 101 est OK et donc il est conforme j’ai quand même deux trois points c’est pas mal non ça va non le contenu visible information présent lorsque les feuilles de 6 sont désactivées donc pareil donc là on va on redésactiver les choses et on on va regarder alors le mieux c’est d’avoir ils le disent d’ailleurs il faut l’instruction c’est comparer le document prévu avec les styles mise en forme fait que le document est bien Dépau de style avec les contenus visibles il reste  voilà donc en gros C’était pas de en désactivant les CSS s’il y a pas de de contenu qui s’en va  donc qui est fait exclusivement en CS donc avec un background par exemple ou quelque chose comme ça donc là on va désactiver les CSS et donc on va se concentrer moi le truc que je fais c’est j’ouvre deux onglets il en a un où je désactive le CSS et l’autre où je  le laisse et je regarde un peu le niveau qui est fait donc on y va hop donc là si je désactive et que je regarde uniquement dans le main puisque je vais pas m’occuper pour le moment des transverses donc on prend à partir de ici baromètre des sites accessible outil tendance et cetera outil tendance on a bien les icônes qui restent on a bien les icônes avec les mode et cetera on a bien ça mais dis donc à quoi sert le baromètre on a bien les textes ici porteur porteuse handicap on a bien ce genre de on a bien les textes on a bien les textes aussi qui sont là afficher une idée le RGAA OK et là après on arrive à la fin on arrive dans le footer donc on prend pas en compte les choses tiens oui dansle footer il y a du contenu en anglais aussi ici  view quoi bah cleaners 84 ah c’est celui deç je je vais la virer ou c’est la web site carbone c’estçaçon ils le disent mais en fait quand tu la mets tu pompes un peu je crois de de band passante pas  très utile et finalement ma phrase en texte brut elle fait bien ta donc je vais je vais la retirer  le 103 donc l’information reste telle compréhensible lorsque les feuilles de style  est désactivé on l’a testé ici aussi en regardant on a bien l’information qui reste compréhensible et donc là voilà on on joue le test vérifie que l’ordre des éléments contenu est implémenté ne pose pas de problème ça ne pose pas de problème on est bon hop ici dans chaque page web le texte reste visible lorsque la taille de caractère augmente jusqu’à 200 %. donc là pour le coup il y a pas de secret hop on va faire alors c’est c’est dommage parce que avec le RGAA3 avec Firefox on faisait un zoom text uniquement et maintenant ça a changer on doit faire un zoom navigateur donc le le zoom navigateur c’est le truc contrôle plus ou command plus dans votre avec les clavier et selon le l’os que vous utilisez moi c’est Mac donc c’est command plus et donc on  va faire SEP fois donc normalement si je me TR pas c’est ça donc là je suis à combien voilà 1 2 3 4 5 6 6 six fois pardon et donc on regarde sil y a les choses ne se chevauchent pas s’il y a bien des des si les éléments sont bien tous bien restitués restitués pardon avec le zoom le zoom texte à 200 enfin le zoom le zoom navigateur à 200 % pardon et donc là on voit bien que il y a pas de de de problème de chevauchement ou autre voilà donc là c’est confort la déclaration CSS de couleur de fond d’éléments ou de police sont correctement utilisé donc là pour le coup ce qu’il faut regarder aussi principalement donc là je vais revenir sur mon hop en zoom normal on va regarder aussi sur la balise BODY si on a bien un background couleur pourquoi parce que donc là on a bien un background couleur on a même un background pourquoi parce que certaines enfin certaines personnes peuvent charger des styles aussi par défaut et enfin leur style à eux pardon et ça peut venir en en en comment dire en conflit avec le le site aussi donc faut faire attention et bien vérifier qu’on met un background par défaut voilà pour qu’il puisse être être bien interprété aussi donc là on a ça et puis après on va regarder c’est un truc un petit peu long mais on va  regarder justement si les couleurs de fond est bien utilisé par rapport aux police et notamment comme c’est du SSS il y a le coût des parents donc les parents et enfant et donc pourquoi il faut regarder body parce que body c’est le plus haut parent qui existe il y a HTML bien sûr mais  on on peut ne pas mettre de background sur HTML on va mettre plus sur body et donc c’est important de  vérifier que body a bien un background donc comme ça on est sûr que au moins les les textes auront toujours un background même quand le parent comme même si c’est le parent le plus haut et la body voilà donc là voilà on va regarder et on regarde en fait si les textes ils sont bien faits il y a bien tout ça donc il y a pas de il y a pas de problème en soi ici donc là pareil il faut dire dans chaque page web chaque déclaration CSS de couleur de police d’un élément susceptible de contenir du texte Estelle accompagnée d’une déclaration de couleur de fond background couleur est au moins hérité d’un parent voilà donc le héritage du parent c’est body  voilà et bien sûr que ça n’influe pas bien sûr sur le contraste de couleur mais ça on l’a révélé on l’a testé avant aussi donc ça tout est tout ok. Qu’est-ce qu’on a après ? background ou background image ben tu as pas de background tuas pas de background image donc non tout voilà hop hop chaque lien dont la nature n’est pas évidente est-il visible par rapport au  texte environnant chaque lien don la nature n’est pas évidente bah tu as pas de lien Sophie qui gentiment me défend en disant tu met conforme et pas non applicable quand pas concerné c’est sur quel point de Sophie parce que j’ai pas vu mais conforme et pas non applicable sur le background B ben en fait il est conforme parce que ça hérite quand tu prends le premier test le le le 10 5 1 il  dit au moins hérité d’un parent et donc le parent c’est le parent c’est body attends après tu dis quoi tout à l’heure background image par contre ah oui du coup c’est le même TR oui voilà  intervention de Sophie oui voilà c’est c’est là qui nous confirme pas de souci donc oui on met conforme parce que bah body a bien un background s’il y avait pas là on planterait on mettrait dans applicable on mettrait forme pardon et Christella nous confirme que le RA external ne suffit pas il faut un texte donc exactement ce que tu disais bien mais je pour moi naïvement encore une je suis pas d tu n’as pas de lien de nature don la nature n’est pas évidente dans ton h transverse donc on met non applicable parce que il y a pas de lien donc pas conforme puque dans chaque page web chaque élément recevant le focus la prise de focus est visible et c’est là où je sais tout suite on met conforme ah non ça suis trompé dans on va voir donc là les transvers donc là c’est pas bon par contre ici enfin moi je je suis toujours dubitatif sur l’effet par défaut des navigateurs que je trouve pas assez enfin pas assez bon et pour moi il faudrait le surcharger pour en faire un vraiment accessible donc toi ici tu as que six liens dans ton dans ton dans ton bloc alors technique c’est vrai que techniquement parlant ils sont assez contrastés puisque sur du tu es sur du fond foncé mais t’inquiète mais moi enfin c’est un avis d’auditeur moi personnellement je conseille fortement de faire un effet focus dédié au site et non se reposer sur le comment dire le navigateur pourquoi parce que là on a un bon exemple aussi ici c’est que techniquement parlant donc là Antoine il a fait un ici un custom on a bien des petits tiret orange et cetera sur fond foncé c’est très bien par contre dès qu’on arrive sur ce genre de choses donc la navigation donc là ça sera planté dans les transverses on voit que c’est coupé donc en fait on sait pas où on est donc le il y a des il y a un défaut là de et là même on est sur accessibilité c’est coupé donc je ne sais pas pourquoi peut-être que tu as dû mettre un un overflow hidden quelque part non je pense que je pas bien défini simplement bah non en fait non c’est pas ça en fait il comprendrait je pense que tu as vraiment voilà t’as un overflow auto est-ce que sur ta  nav tu as un overflow hidden tu je pense que c’est l’overflow auto qui doit faire planter le truc faudrait retester revérifier retravailler du coup les focus de ma nave en desktop c’est ça yes voilà et même ta navigation moi personnellement je comment dire salut merci beaucoup de  ta présence et de de tes échanges façon on a terminé dans 28 minutes dans 25 minutes je vous enverrai un sondage qui dira est-ce que vous avez trouvé Mathieu particulièrement pas gentil avec moi voilà je je vais beaucoup pleurer li dans la nature n’est pas dividente dans le texte si  mais c’est dans les transversesist il sera noté dans les transverses et non dans la page d’accueil le lien dans la nature n’est pas évidente dans le texte attends on peut y aller mais 4 tester par Leen n’est pas un bah c’est un lien au revoir Romain alors je vais à l’oral ça sera plus simple un lien dont la nature n’est pas évidente c’est pas un lien qui est dans un texte justement et qui n’est pas montré comme un lien voilà et du coup là c’est un <a> qui est dans une balise <p>donc en toute logique enfin selon la définition du gouvernement un lien dont la nature n’est pas évidente c’est justement un lien au milieu d’un texte donc tout à l’heure tu disais on en a  pas dans la page de lien dont la nature n’est pas évidente et donc je pose la question est-ce que celui-ci n’est pas un lien dont la nature n’est pas évidente justement bah non parce qu’on est dans un un paragraphe avec un lien avec un avec un intitulé non excuse-moi je comprends pas en fait alors non mais parce que du coup c’est une vraie question parce que moi aussi c’est un sujet où j’ai un peu de mal à le comprendre cette règle là et ce qu’on m’avait dit à l’époque de ma formation c’était qu’un lien dont la nature n’est pas évidente c’est un lien qui est dans un  champ de paragraphe c’està-dire un lien au milieu d’un texte et d’ailleurs le site du gouvernement donne pour exemple le site du SNCF si le mot grève est un lien qui renvoie vers une nouvelle page ou  qui ouvre une nouvelle page c’est un lien dont la nature n’est pas évitante en gros c’est pas  un bouton c’est pas un truc qui est tout seul et qui va te dire aller vers telle page d’accord et alors après mais est-ce que donc là-dessus ça se fait est-ce que enfin je comprends et là je  suis entièrement d’accord avec toi mais là on voit que le lien il est souligné et en gras  Oui oui alors c’était plus pour le cas de je crois que tu l’as mis en non applicable si je dis pas de  bêtises oui parce que tu disais qu’il n’y a pas de lien dont la nature n’est pas évidente voilà il y  a pas de lien dans enfin voilà dans la page ici et déjà de premier truc c’est dans la page et donc le footer comme c’est transverse ça sera traité après ok donc dans cette page là il y a pas de lien de  nature évidente puis qu’on comprend ici c’est assurance banque et c’est bien ils sont bien isolés du coup c’est juste le cas de parce que c’est le footer en effet on le traitera en en transverse ok exact exact et d’ailleurs j’ai fait une erreur sur les listes parce que ça ça va être une liste oui donc je vais revenir sur mes présentation de l’information feuille de style contenu compréhensible taille de caractère CSS non c’est non ça passe ça élément structure l’information titre document liste voilà donc là c’est pas bon c’est non conforme excusez-moi je me suis et oui c’est mais en fait en gros ici tu fais une série de liens dans ton en plus tu mets un ID barre liste donc en plus tu sais que c’est une liste ouais et donc là il faut faire unet pourquoi c’est vraiment obligatoire c’est à partir du moment où considère que c’est une liste tu es obligé de mettre un tu peux pas avoir de une série de de liens comme ça en ça sin ça fait lien lien lien lien lien lien et en fait c’est parce que c’est des liens que je suis obligé de mettre un lit non ça sera ah oui oui tu pourrais avoir des boutons ce serait la même chose mais si tu mets des paragraphes non tu mets pas une liste de paragraphes mais là c’est des liens qui se suivent qui sont sur la même thématique enfin sur la même ils ont la même même comment dire nature en gros ils envoient sur des thématiques et donc c’est une liste et surtout il faut bah voilà cl dit si visuellement c’est une liste il faut utiliser la balise liste pour que ce soit bien vocalisé voilà et en fait c’est là où j’allais arriver c’est que quand tu utilises une balise liste enfin une oui une balise liste donc <ul><li> ou <ol><li> le lecteur d’écran va énumérer le nombre d’items et donc voilà c’est bah tu vois Ann Sophie ah merci Anne Sophie tu viens de m’expliquer aussi Mathieu parce que je le dis en même temps qu’elle donc et merci merci Mathieu aussi ouais mais je préfère féliciter le tchat merci Christella de et donc voilà et donc voilà et donc il faut c’est important parce que il va justement énumérer le nombre d’items dans la liste donc et ça lui permet de savoir s’il doit vraiment passer du temps ou pas aussi dessus parce que si tu as une liste avec je sais pas combien d’items 48 c’est long quoi j’espère ça lu ça lui donne une information déjà déjà de base donc voilà donc là il faut sur baro list il faut donc hop et donc là bloc ID bar je dis pendant qu’il note je me suis jamais senti autant jugé en une matinée quand même là je trouve que ça va va très loin je vous le dis non c’est rigolo du coup de se faire passer un mais c’est tu ça devrait presque être fait avec les DF d’ailleurs on devrait parce que tu vois je m’ai dit que des fois quand tu as ta réunion de restitution c’est top c’est c’est génial en plus tu fais un document très très précis faire ça en live comme ça je trouve ça encore plus fort tu vois yes donc là on était bon je suis parti là après j’étais quoi chaque élément ressem le focus ah oui voilà donc le focus alors moi c’est là le grand débat moi personnellement je planterai celui-là parce que pour moi il est pas assez visible sachant que alors là je parle pas de des des transverses ça sera dans une autre page mais pour moi celui-ci il est pas voilà c’est pas ouf est le navigateur le faire en fait c’est ça le ouis et moi mon argument c’est de ne pas laisser le navigateur le faire et de de faire vraiment un effet dédié à chaque ok pour voilà donc désolé après techniquement parlant si tu mesures le blanc et le fond foncé ça se voit mais comme il y a aussi les transverses au-dessus qui où c’est pas bon en fait ton critère là va être planté parce que comme c’est transverse ça va impacter ton tout ton site voilà donc en gros là je mets rien pourquoi n pour laisser le focus navigateur pourquoi parce que en fait sur certains éléments regarde par exemple ici si tu vois le le baromètre et journal en fait le l’effet focus est coupé donc déjà en fait il y a une il a en laissant en laissant faire le navigateur le navigateur a mal fait les choses parce que bah on a mal développé voilà et donc il y a quelque chose qui est pas bon donc c’est ça en fait c’est vaut mieux avoir sur l’effet focus je préfère laisser enfin avoir le contrôle plutôt vraiment de de tout les focus et cetera que plutôt que de laisser le navigateur faire et potentiellement occasionner des problèmes d’interprétation parce que voilà là c’est couper et sur le reste ça va dans le contenu ça va mais il y a des choses qui sont pas bon et du coup pour le coup je moi je j’ai une autre réponse à donner à ça faut savoir que ça ça m’a été donné par Urbilog du coup donc il a un dirigeant qui est aveugle et en fait qui m’a expliqué en fait que beaucoup de gens qui se retrouvent en situation de handicap par ce genre de biais là apprécient énormément le fait qu’on leur travaille les focus en fait ça montre que tu as une conscience aussi de l’accessibilité assez haute et que et du coup c’est quelque chose qui est bien pris dans dans le milieu de manière général en fait bon j’ai vu que tu sais j’ai pas fait d’ailleurs cet exercice ça vient dans le de pour info par exemple certaines erreurs avaient déjà été aperçu notamment j’ai laissé les focus et j’ai une question mais du coup tous les focus ont été déjà retravaillé du coup dans le nouveau CSS d’accord pas tous parce que de la navigation je crois je l’ai pas vu une question quand tu veux designer tes focus tu utilises quoi parce qu’il y a le focus focusin focus visible du coup tu mets quoi les trois non tu mets tu mets en outline avec outline offset dans ton préfixe CSS tu as leas le préfix focus ça ouais parce que du coup tuas plusieurs des focus visible alors oui mais ils ont des propriétés différentes le focus c’est que tu peux dire un élément au-dessus de prendre le focus donc ça c’est c’est intéressant autrement la vraie propriété c’est c’est la propriété comme hover c’est la même propriété que de points focus et de dedans tu fais avec outline le truc qui est important aussi c’est de pas mettre des bordures à la place de parce que les bordures en fait ça vient créer un décalage que le outline c’est quelque chose qui vient vraiment par-dessus et qui n’est il n’est pas alors je vais parler un peu technique mais il est pas compris dans le modèle de boîte voilà qu’est-ce que dit Marie l’utilisation de focus navigateur permet aux personnes de modifier le focus suivant leurs préférences mais je me disais que ça permet de laisser le choix à chaque personne selon leur besoins de préférence mais je comprends votre avis en fait voilà le le truc c’est que tant que tu mets pas des c’est toujours en CSS des trucs importants en mode vraiment le truc c’est comme ça et ça ça bouge pas et voilà bah en fait tu laisses la possibilité quand même au à l’utilisateur de changer donc si toi tu l’as défini bah si l’utilisateur ou l’utilisatrice a des CSS personnalisés pour X raisons voilà et qui viennent toucher le le focus bah c’est c’est toi si tu as bien codé en mode voilà j’ai je fais un style par défaut bah au moins comme ça lui il a quand même la main pour le le surcharger donc voilà il y a pas de et donc nous on on aura fait le travail en amont de dire on a quand même fait un effet pu custom on l’a testé il est il est il est solide et robuste et après bah l’utilisateur ou l’utilisatrice qui a son CSS custom il peut venir par-dessus et le changer et donc ça posera pas de problème voilà plutôt que de le laisser au navigateur qui peut occasionner des problèmes d’interprétation voilà donc c’est non conforme mais ça va être non conforme dans les transverses mais je le mets je le mets ici pour chaque page web les contenus cachés ont-ils vocation à être ignorés par les technologie d’assistance donc là les contenus cachés faut regarder pour le on l’a vu avec le CSS désactivé tu n’as pas de contenu caché qui s’active ou pas tu as pas des des boutons qui activent des choses ici dans  juste dans la main c’est dans les transverses c’est autre chose puisque tu as le menu  burger qui s’active en responsive donc là il y a pas donc là on peut mettre conforme sur cette page là dans chaque page l’information doit pas être donnée uniquement par la forme la taille ou la position C elle est respecté absolument je ne parle pas des transverses toujours mais dans la page ici il y a pas de choses qui sont données par la forme la taille ou la position à l’inverse des transverse où là oui ça va poser problème ici sur le le menu notamment dans chaque page we l’information do pas être donnée par la for Estelle pertinente bah on met non applicable puisque le truc c’est respecté donc voilà mettre non applicable dans chaque page web le contenu peut-il être présenté sans perdre d’information sans avoir recours à un défilement vertical ou à une fenêtre ayant pour hauteur 256 pixels soit un défilement horizontal sur une fenêtre ayant une largeur 320 pixels donc là il y a pas de secret on active l’inspecteur on se met en mode responsive donc là avec on active les choses et donc c’est en mode alors je sais plus c’est où ah oui non on peut dans comment ça s’appelle il y a un plugin Figma qui permet de tester ça oui ça serait bien d’ajouter un offset absolument voilà on le si on met juste outline ça vient vraiment être collé à l’élément avec un notline offset positif ou négatif ça dépend le l’effet qu’on veut mais souvent c’est on va dire négatif positif pour ça soit audessus on met commme une espèce de padding transparent autour donc oui complètement je recommande fortement d’utiliser un notline offset pour ça marrant j’aurais mis conform il y a des marrant j’aurais mis des informations ah intéressant en fait moi quand je valide le 19 je je mets souvent en non applicable le 10 10 parce que comme le 19 est conforme l’information doit pas êre donné uniquement donc oui c’est pas donné uniquement mais après est-ce que c’est pertinent bah en fait l’information ne doit pas être donnée par la forme taille position uniquement cette règle est-elle de façon pertinente ouais ça ça se tient vraiment ça se tient Anne Sophie pour le coup moi je préférais qu’on mettre conforme allez je suis pas objectif pas non mais c’est pas ça qui change c’est pas ça qui te fait garder gagner 10 % de conformité non je sais mais ça se tient Sophie Je je changerai mon fusil d’épaule comme on dit pour pour ça donc là moi je reviens à donc sans perdre d’information un  définement dans une fenêtre ayant une hauteur de 256 donc là on il y a pas de secret tac on prend ça on change la hauteur évidemment c’est pas pixel c’est ici et donc là on regarde Siah il y a  pas de perte d’information donc là pour le coup ah non c’est bon et donc c’est un défilement comment défilement horizontal voilà pour un défilement vertical voilà c’est ça donc là on regarde s’ y a pas de perte d’information si on a bien tout qui s’affiche en gros alors là on voit qu’il y a un problème ça sera les transverses parce que il y a ah je vais le dégager ce plugin non mais attends ça me fait trois critères qui me fait sauter c’est bon quoi c’est ça gentil mais bon donc là il y a pas de perte d’information là ce qui est très important c’est que en comment dire en responsive il y a un critère enfin là on le c’est marqué où il doit pas y avoir de perte d’information donc c’est important de bien restituer les choses on peut trouver des moyens d’afficher différemment on peut déplacer des blocs aussi hein il y a pas de pas de problème là-dessus mais il faut que l’information soit bien donnée quel que soit enfin faut que l’information soit la même et aussi donnée de la même façon que ça soit sur mobile tablette ou desktop le coût dug du menu burger c’est elle est l’information est juste présentée différemment VO et donc le reste c’est 320 pixels donc là je vais me remettre un peu plus gros du 800 et 320 en 320pixels on voit qu’il y a pas de scroll horizontal qui se fait parce que tu as un overflow qui doit se passer ici mais en tout cas sur la page la page principale pas sur les transverses mais sur la page principale c’est bon mais comme c’est des transverses bah ça ça sera non conforme sur tout le tout le site voilà donc on doit mettre non conforme mais on dirait les transverses je crois qu’à cause du plugin web carbone alors du coup c’est ça ouais donc je vais appeler web carbon après dans chaque page web les propriétés d’espacement du texte peuvent-elles être redéfinis être voilà peuvent-elles être redéfinis c’est bizarre la liaison par l’utilisateur ou l’utilisatrice sans perdre de contenu de fonctionnalité là ce qui est sympa donc c’est un autre petit plugin que je vais vous montrer qui s’appelle Stylus en tout cas moi que j’utilise qui s’appelle Stylus je recharge juste ma page pour pas perdre les choses en gros dans Stylus donc c’est un petit plugin et peut ajouter des styles donc quand on va dans Gestion on a , je sais plus où il est, créer un nouveau style et donc on va éditer le style ex moi pour le coup j’ai déjà fait des des styles il s’appelle il est où je sais plus je sais plus où est il s’appelle comment ah oui RGAA4 10.12 donc vraiment le critère 10.12 et donc quand je l’active alors j’espère qu’il va pas me faire mentir voilà et donc quand je l’active si je l’édite voilà hop je vais vous montrer je vais vous zoomer un peu les choses voilà un peu plus encore et en gros bah je reprends exactement hop ce qui est dit alors évidemment ça impacte tout mon site il est où le 10.12 il est là et donc en gros je reprends ce qui est dit dans la spécification enfin dans le test pardon donc l’espacement entre les lignes line E8 doit doit est augmenté jusqu’à ,5 l’espacement des paragraphes c’est deux fois la police l’espacement des let spacing c’est 01 et 016 pour le wordspacing donc en gros bah ça ça se traduit par cela voilà et donc quand on active les choses on regarde si il y a pas de contenu qui sorte ou qui soit bizarre au niveau du design et donc là on voit que bah ça se passe bien il y a pas de de de texte qui sort des choses ça vient bien à la ligne là on a bien les blocs qui se qui qui se qui comprennent leur taille et voilà donc ils s’adaptent qu’est-ce qu’on a d’autre pareil ici en four pareil aussi ça s’adapte bien on va tester en responsive au cas où pour voir aussi les choses parce qu’on peut être aussi sur des choses qui viennent voilà donc là on voit que les textes viennent bien enfin les blocs viennent en dessous des autres ça paraît très bien donc voilà on peut redésactiver Stylus on va arriver à la fin maie pardon ou on arrive à la rest Conz 10 le contenu additionnel apparaissant à la prise de focus il y a pas de contenu additionnel qui apparait au focus donc non applicable dans chaque page web les contenus additionnels apparaissant via styles CSS uniquement peut être rendu visible il n’y a pas de style qui viennent par-dessus en effet hover par exemple, il y a pas ça dans le site enfin dans la page d’accueil en tout cas. formulaire il y a pas de formulaire donc toc s’il y a des formulaires ça sera peut-être dans les transverses ou pas mais en tout cas sur le site il y a pas navigation chaque ensemble de page dispose-t-il de deux systèmes de navigation différent ça ça sera dans les transverses donc sur la page d’accueil on met non applicable j’en ai mis pourtant non mais ça sera dans les transversal rien pardon on met rien ça sera dans les transverses que ça va influencer dans chaque ensemble de page le menu et la barre navigation sont-ils toujours à la même place ça sera dans les transverses aussi la page plan du site est-elle pertinente on verra si elle existe l’ensemble et cetera aussi moteur de recherche on verra aussi c’est dans les transverses les zones de regroupement de contenu excusez-moi présente dans plusieurs pages zone d’entête navigation principale contenu principal pied de page moteur de recherche peuvent être peuvent-elles être atteintes ou évité donc là on est sur des liens d’évitement mais ça transverse mais vous avez vu que tout en haut du site et si je recharge on a des liens d’évitement et on les a testé tout à l’heure dans le critère 6.1 malgré que ça impacte enfin ça va toucher les transverses mais on les a test donc bien ils sont fonctionnels donc c’est on mettra conforme dans chaque page web un lien d’évitement et accès rapide c’est là aussi l’ordre de tabulation est-il cohérent donc dans la page ben question oui par contre dans la navigation non donc c’est le fameux on avait le débat hier où en gros on arrive là attends je vais recharger ma page donc à la tabulation uniquement j’arrive sur les liens d’évitement après j’arrive sur la navigation il a mis un Tab index à Z0 je ne sais pas pourquoi mais on verra plus tard j’arrive ici et après je passe sur le logo donc là il y a une erreur qui a été faite c’est que l’information elle est pas cohérente au niveau du code et au niveau de l’affichage et donc aussi ça impacte la navigation au clavier parce que normalement on aurait d’abord en premier le logo puis la recherche et après la navigation que là à la navigation au clavier il y a un ordre différent et donc là on on on on a il faut être cohérent donc là c’est pas bon donc là l’ordre de tabulation est-il cohérent non mais on mettra non applicable parce que non conforme parce que ça va être des transverses navigation au clavier il y a pas de piège au clavier ici donc on pourra là on peut mettre conforme ici non même pas parce que ça sera conforme ça sera non non c’est bon conforme ça un P la page dans chaque page web les raccourcis clavier il y a pas de raccourci clavier donc non applicable tu as pas de raccourci clavier sur tout le site hein minuscule et cetera non donc on peut mettre sur toutes les pages dans chaque page web les contenus additionnel apparaissant au survol à prise de focus ou à l’activation d’un composant d’interface sont-ils nécessaires atteignables au clavier dans ta page là actuellement tu as pas de contenus qui peuvent être atteignables enfin qui sont qui apparaissent au survole et tout donc on met pas non conforme on met non applicable parce que tu en as pas la limite de temps tu as pas de limite de temps l’ouverture du nouvelle déclenché sans action utilisateur donc là c’est les transverses donc on mettra pas parce que ça va impacter tes transverses donc on met rien on met rien ici dans chaque page web chaque document pourquoi un Tab sur la nav je crois qu’on avait créé cette erreur pour la démo en fait VO pour mon je crois elle était non alors on l’a pas créé pour on l’avait laissé c’était une indication de chat GPT justement et que moi j’ai suivi sans comprendre forcément le pourquoi du comment encore une fois c’est technique et du coup c’était Mathieu qui m’avait expliqué que c’était pas bien fait ouais c’est pas bien fait voilà il y avait pas plus de et pour terminer parce qu’il me reste 5 minutes et je pourrais terminer parce qu’il me reste quelques critères dans chaque page web un document bureautique téléchargeable il y a pas de document il y a pas de PDF sur tout le site tu me confirmes il y a pas  de PDF non ok sur sur le site il y a des liens ton pdf il a une version accessible il y en a pas donc non applicable sur tout le site le contenu cryptique tu as pas de contenu cryptique ah Sky émoticône syntax cryptique attends on va revenir sur ça on va revenir il y a des Sophie tout de suite il y a des émoticônes j’avais lu partout ce sont que des images mais c’est des images elles sont pas officiellement des émoticones du coup compte et donc un attribut T est disponible une définition est donnée par le contexte adjacent et donc retrouver dans le document le contenu cryptique émoticône oui en fait c’est alors l’émoticône c’est pas des émoticones en caractère non c’est des émoticones en image donc en gros il faut travailler les alt ou pas pour les rendre accessibles ou pas justement on a vu que dans la homepage par exemple parce que tu n’étais pas là au début je crois Sophie en gros l’émoticône qui est ici donc si je réactive les Alt et puis je terminerai sur ça ok il y a voilà c’est ça et en gros tu regardes ici le premier avec le smiley en fait après il y a un texte après donc parce  que c’est plus sympa et donc si on met pas de alt bah en fait on comprend pas le contexte donc avec D parce que c’est plus sympa non en fait là il faut des smiley il faut il faut un alt voilà et il y en a d’autres non et il y en a pas donc on est on est raccord donc je pour l’anecdote les émoticônes étaient là à l’origine des premiers baromètres et en fait ça suscitait beaucoup de débats donc on a fait un genre de petit test utilisateur en design avec des pour voir comment les gens recevaient les émoticônes donc on on a fait juger plusieurs direction artistique et ton et les émoticônes en fait divisaient pas mal mais beaucoup de gens disaient que ça humanisait à mort le site en fait donc c’est pour ça qu’on les a gardé et comme j’aime particulièrement celle de fluent de Windows enfin de Microsoft c’est pour ça que je ne vous laisse même pas choisir le type d’émoticône vous n’avez pas celle de votre OS vous avez celles de fluent parce qu’elles sont juste géniales et donc là je teste l’un des derniers l’un des derniers comment dire test où on fait l’orientation donc c’est très important de ne pas fixer l’orientation et  de pas dire à l’utilisateur vous devez consulter ce site uniquement en mode portrait parce qu’en fait vous ne savez pas comment l’utilisateur final ou l’utilisatrice finale consulte votre votre site il y a des personnes qui sont par exemple en fauteuil roulant merci et qui sont paraplégiques et qui ont leur téléphone en mode portrait et c’est fixe et parfois il y a des alors il y a sauf exception bien sûr les applications de jeux vidéo ou pour apprendre le piano notamment apprendre le piano sur un écran en mode portrait c’est compliqué mais par contre voilà vous ne devez pas dire ou forcer la consultation dans telle ou telle orientation il y a un exemple qu’on donne souvent c’est YouTube et Netflix si vous allez sur en mode applicatif je peut-être en mode web aussi enfin je confirme en mode mobile web mais en gros si vous allez sur sur l’application YouTube et l’application Netflix l’application YouTube vous permet de lire des vidéos en mode portrait alors c’est petit mais ça permet de lire par contre quand vous lancez une vidéo sur Netflix elle va automatiquement basculer en mode en mode paysage alors sous prétexte de l’expérience utilisateur et utilisatrice pour que c’est plus grand bla bla bla bla bla sauf qu’en fait c’est une erreur d’accessibilité parce que bah il y a des personnes  qui ne peuvent pas tourner leur téléphone donc voilà donc faites attention à ça il faut pas l’avantage de forcer les émoticônes c’est que tu maîtrises leur couleurs parce que certains comme le plus n’est pas le même couleur selon io attention avec ah oui il y a un débat sur ce n’est pas accessible mais c’est difficilement compréhensible avec les générations donc pas super inclusif tout à fait pour quel donc là oui c’est conforme hop chaque pas la fonction utilisable disponible en moyen de geste complexe il y a pas de geste complexe donc non applicable h mais par contre tu as raison aussi Cristella effectivement c’est pas forcément très accessible aux personnes plus âgées c’est pas faux mais bon en même temps elles sont pas porteuses d’information normalement à part la première vraiment donc 
quand même relativement explicite mais si c’est applicable parce que normalement c’est l’action de déclencher ou relever le dispositif de pointage  l’action de déclencher pour moi en fait là clairement je mets en en non applicable parce que en fait tous les liens en fait c’est la ils sont de c’est la bonne comment dire il a utilisé les liens les balises comment dire web il a pas refait un autre truc et cetera donc en gros il y a un test où quand on clique dessus ici et quand on lâche on est pas on n pas parti par exemple voilà on est bien sur bar on est resté sur la homepage par il y a des sites malheureusement où quand on clique et ben il a compris le clic donc il va faire l’action mais alors qu’on a relâché ailleurs donc là en fait comme il utilisé des éléments natifs c’est le mot que je cherchais il y a pas de il y a pas de problème donc là moi je mettrai plus dans chaque pe les actions déclenchées au  moyen d’un dispositif de pointage sur un point unique de peuvent-elles être d’annulation bah en fait moi je mettrai non applicable parce que il y a pas de de voilà de choses qui permettent des annulations voilà on pourra mettre conforme là-dessus j’ai un doute donc je moi je préfère mettre non applicable on arrive après et on a fait une page et encore non parce que alors après il y a eu énormément de débat eu énormément de les vers vers ou vert l’appareil peuvent être satisfait de manière alternative bah il y en a pas donc non applicable donc voilà ouf alors il y a des choses qui vont être impactées par les transverse mais on peut déjà voir ce qui se passe en général d’avoir fini au moins quoi ah non ça va j’ai cru que j’avais j’allais dire merci du coup de tout ça donc on voit que bah voilà on est sur 19 la partie rapport d’audit finale est très bien faite d’ailleurs dans l’ARA ouais c’est franchement c’est très joli très bien fait avec les tableaux et cetera donc voilà donc et ben on a terminé ouf on a terminé une partie terminé c’est on a on a présenté comment nous enfin moi et il y a aussi ma collègue notre collègue pardon Karine qui était là et qui est parti pour manger on a à peu près la même méthode aussi après c’est des débats d’experts ou de d’auditeurs d’auditrices aussi on a eu beaucoup de débats dans le tchat notamment sur les images les émoticônes et cetera et c’est ça qui rend l’accessibilité aussi hyper intéressant il y a aussi avec le SEO aussi voilà séim tu le fais sur mobile aussi c’est-à-dire l’audit ah oui complètement il faut me il faut regarder en fait bah si les contenus disparaissent pas si l’ordre est bon si bah les menus notamment souvent on a des menus burgers qui sont là voilà donc les composants ch voilà excuse-mi je CIS que tu fini ta j’ai j’ai fini c’est bon et du coup Basil ouais le le replay il sera dispo normalement sur Youtube on va le mettre sur la chaîne de Warren pour que ce soit un peu plus bah il sera là et puis il sera sur le le baromètre il sera dans le un article avec comme ça il y aura toute la l’audio description qui sera dispo directement c’est ça bah merci franchement alors du coup pardon avant vous partiez je parce que je voulais envoyer un message à maieu depuis une heure et j’ai toujours pas fait mais merci parce que vous avez rendu la chose extrêmement intéressante et vivante Benoît nous demandait comment on allait faire un audit sexy et cool c’est franchement grâce à vous parce que c’était vraiment hyper intéressant de de d’échanger avec vous av extrêmement vivant bah ouais on refera je pense Mathieu ah ouais un grand plaisir après peut-être pas sur un audit entier mais sur des thématiques ça peut être intéressant parce que il y a des choses où il y a des débats il y a des il y a des choix qui sont faits par l’un par l’autre je sais plus qui est la personne qui sur des textes  en span et en paix je voudrais bien voir les exemples mais voilà on peut se recontacter par LinkedIn et voir en 10 15 minutes les choses mais voilà mais voilà donc merci beaucoup pour  avoir été si nombreux nombreux on s’attendait pas à ça pour le coup parce que le le sujet n’est pas forcément un audit d’accessibilité c’est pas non plus voilà et d’apparence en tout cas et en fait bah si c’est intéressant il y a plein de choses à voir il y a plein de choses à échanger et cetera sur lequel on peut échanger voilà donc c’est cool vraiment très très cool et je pense que l’exercice de faire la même chose mais sur une page avec tu sais un expert en écoconception enfin un ou une pardon du coup en plus ce serait vraiment alors horrible en terme de jugement je vais pleurer beaucoup mais ce serait hyper intéressant de le faire ouais et comme et comme le disait aussi Anne Sophie c’est intéressant de voir comment les autres  font pour le coup il y a pas grand monde qui le fait donc ça serait bien de voir les grosses agences aussi d’accessibilité aussi pouvoir montrer comment il font et cetera donc ça peut être hyper intéressant aussi et pas juste échanger événement dédiés ça pour être intéressant mais carrément là c’est un sujet co aussi à analyser c’est pas une vieille page Wikipédia pas fun c’est là c’est fun on a mis plein de choses intéressantes en plus ce qui est cool c’est qu’on a vraiment cette moi je l’ai travaillé mais je suis pas expert et en même temps bah du coup je me suis j’ai beaucoup essayé de défier Mathieu dans mon comme quoi j’ai raté pas mal de fois dommage mais voilà non non je vois pas du tout c’était génial c’était vraiment exceptionnel c’est puis on va continuer carrément et ben merci tout le monde merci à tous et à toutes et merci cœur sur vous c’est ça cœur sur vous je pense que on est tous et tous concernés par le sujet de l’accessibilité donc voilà sachez que c’est hyper important pour certaines personnes c’est bénéfique à tout le monde bien sûr et mais c’est hyper important voir vital pour certaines personnes donc il faut bien faire attention à l’accessibilité numérique tout à fait et oubliez pas du coup on travaille tous les deux chez Warren Walter d chez Warren en fait du coup on oublie il y a encore plein d’autres gens qui ont des sujets cool et voilà on en a parlé mais si voilà on donne des information des sens des choses n’hésitez pas à nous contacter évidemment on ne fait pas que des audits live le mardi matin on fait plein de voilà hésitez surtout pas et bah je pense qu’on on s’arrête là Mathieu on s’arrête là Sophie comment être au courant pour la suite LinkedIn beaucoup ouais beaucoup beaucoup on a rien démarré de plus officiel que LinkedIn pour l’instant après on a quand même le site puisque du coup il est accessibiliténumérique.com ce n’est pas rien LinkedIn Warren tu peux nous suivre tous parce que du coup Warren va publier des articles un peu plus généraux un peu plus liés à l’entreprise et nous deux on fera des com des posts pardon LinkedIn un peut plus précis ouais pour parler de ce qu’on a fait de là il y a un gros morceau qui fait parce que Mo ça fait 3 plus de 3 heures de live donc il faut faire les sous-titres la transcription et cetera donc il y a du taff aussi de ce côté-là donc voilà on va travailler aussi tout ça pour que ça soit bien access aussi.

Antoine : Et oui hésitez pas à suivre Warren parce que du coup quelque part Warren est beaucoup plus général et surtout en fait parce que du coup on oublie de le dire c’est Antoine et Mathieu qui étaient là aujourd’hui mais c’est Warren qui nous permet de le faire et ça merci à eux, merci à Quentin, à Romain à Seb, plein d’autres gens parce que tout ça c’est du temps en fait, c’est beaucoup de temps de préparation de travail et voilà il nous permettent de faire tout ça donc c’est plutôt chouette.

Mathieu : Super !