Replay vidéo « Audit d’accessibilité numérique en live »
133 minutes de lecture passionnante !
Publié le 28 décembre 2023 par Sebastien Bouvier
Bonjour à tous et à toutes !
Il y a quelques semaines, nous avons annoncé sur Linkedin un évènement sans précédent, et très intéressant pour nous ! Le 5 décembre 2023, à 9h30, nous avons réalisé, Mathieu Bouillot et moi-même (Antoine Boursier), un audit d’accessibilité en live, publique, sur le site du baromètre des sites accessibles. Et franchement, c’était très cool.
A la base de cette idée : montrer les coulisses du quotidien d’un·e auditeur·trice en accessibilité numérique. Mathieu Bouillot (Mathieu BZ) réalise souvent ce type de prestation pour Warren Walter et nos client·es, mais ce type de travail n’est jamais rendu public. Il était donc très intéressant pour nous d’échanger avec de vraies personne en direct, qu’ils ou elles soient expert·es ou non.
Comme nous l’avions imaginé, pas mal de débats ont eu lieu, et ils étaient tous plus passionnants les uns que les autres ! Chaque auditeur et auditrice en accessibilité numérique a aussi sa propre manière de travailler.
En une matinée, nous avons réussi à auditer la page d’accueil et les transverses (header et footer), directement sur l’outil ARA, conçu par la DINUM.
L’idée était vraiment d’acculturer, d’une part, à l’audit d’accessibilité numérique, et d’autre part, aux différents critères du RGAA (référentiel général d’amélioration de l’accessibilité).
Avec plus de 50 participant·es connecté·es tout au long de l’évènement (et particulièrement attentif·ves !), nous estimons avoir rempli notre cahier des charges !
Pourquoi faire un audit d’accessibilité ?
Notre site n’est pas légalement soumis à la RGAA, nous ne faisons pas parti d’une organisation d’état ou publique… Mais nous savons aussi que plus de 20% de la population française est porteuse d’un handicap, et développer un web plus accessible est l’une des priorités du baromètres des sites accessibles.
Donc : pas de concession, ce site est orienté « accessibility-first » (toutefois, nous ne sommes que des humain·es, si jamais vous rencontrez des difficultés, contactez-nous)
Vidéo replay « Audit d’accessibilité numérique en live »
En français, sous-titres semi-automatiques disponibles (en cours de correction)
Durée : 3h50.
Lien vers la vidéo sur youtube : https://www.youtube.com/watch?v=nfZS4uMqNwc
Transcription de la vidéo (en français, en cours de réécriture à partir d’une génération automatique)
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.
Euh 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 !
Oui voilà, c’est plus sympa de
voir les gens en vrai, quand même !
Ah oui !
Ouais c’est surtout
Y’a des têtes connues là…
Bonjour tout le monde, j’avais
une question à vous poser !
Tiens on s’est parlé plein de fois sur linkedin !
Oui je 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 a 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 ? »
Rires Ahah alors…
Tu veux répondre Matthieu ?
Tu veux que je réponde ?
Euh… bah vas-y, et je compléterai.
Parce que je suis
en train de regarder la ville de Van et parce que ça pouvait être 100 % s’il y avait quelque chose
mais ça ne l’ pas donc en fait c’est ça en fait
Ttu veux répondre Matthieu tu veux que je réponde euh bah vas-y et je compléterai parce que je suis
en train de regarder la ville de Van et parce que ça pouvait être 100 % s’il y avait quelque chose
mais ça ne l’ pas donc en fait c’est ça en fait
sera toujours bisé euh en fait le baromètre on
a utilisé les notes rg2a qui ont été donné à un
instant T par un auditeur t donc Mathieu là ce
matin va faire par exemple l’udit du baromètre
euh il va me donner 80 % parce que ça mérite 80
% demain pour X raison non mais c’est un exemple
he je me B 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 popine de popup de popine
de cookies qui est désastreuse et à ce moment-là
ça va couper toute l’accessibilité de mon site B
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 c’est pour ça que dans chez waren
du coup c’est une grande démarche qu’on a pris
justement c’est en fait on fait pas trop alors
on fait des audits parce que c’est c’est jeu mais
on est fait un instant par contre c’est un audit
ne vaut rien du tout s’il n’est pas complété par
la formation et par des gens qui maintiennent
le niveau d’accessibilité c’est 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 et enfin voilà c’est
vraiment le le jour où tu as fait l’udit bah il y
avait pas de de il y avait des escaliers et entre
deux tu as pété tes escaliers mais tu as pas mis
à jour ta ton audit donc là c’est certainement ce
qui s’est passé sur la ville de Vann j’étais
en train de regarder effectivement la vidéo
derrière alors un peu mer ouais alors en fait
en gros pour donner un peu plus de de contexte
est-ce pardon est-ce que c’était clair la partie
de pourquoi de qui sont à 100 mais c’est plus
mérité vas-y Mathieu pardon excuse-moi oui donc
ben en fait pour pour comment dire compléter
ce que tu dis exactement ils aur à 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 queil 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 euh 4 mois
après le 3 octobre 3 octobre 2022 à la suite
d’un compreudit il il mettent des contenus
qui ne sont pas pris en charge pour charge
disproportionné pardon euh donc alors après il y
a pas de ils disent vidéo pr vidéo présente sur le
site carte open Street Map bouton casacocher voilà
euh et après ils mettent les contenus non soumis à
l’obligation le lecteur vidéo player YouTube carte
open Street Map et bouton cas à cocher en gros ils
se ils se dédouinent en fait euh parce qu’ils ont
pris des compes contenus de de d’une d’une société
tierce le 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 Map la la carte google map est
très complexe pour une pour en accessibilité par
contre on va se concentrer sur le bandeau qui est
à gauche euh le 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 map 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 le moi je
suis pas forcément d’accord sur le player YouTube
euh pourquoi pour charge dispr disproportionné et
cetera en fait à chaque fois c’est un choix
que les entreprises font enfin entreprise
collectivité enfin voilà euh de dire bah voilà on
met nos vidéos sur YouTube parce que c’est eux qui
gèent 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 Bed donc
en erame et on prend et on l’intègre et basta
c’est fini euh mais en fait il y a des players
accessibles qui existent et en fait qui listent
des contenus YouTube donc voilà c’est AVC des API
et CETA 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 access c’est c’est mieux et surtout ça
ne légitime plus le choix de dire bon bah c’est
bon on se dédouine c’est Youtube c’est pas de
notre faute et C 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 contant les
utiliser donc voil j’aime pas trop les les
dérogations pour notamment les vidéos YouTube
enfin le player YouTube parce queon peut plein
d’autres choses VO donc Joë vas-y ouais du coup
je continue sur ma lancée je je voulais savoir
comment est-ce que on peut définir euh qu’est-ce
qui est soumis à obligation d’accessivité et
qu’est-ce qui ne l’est pas c’est c’est sur la
base de quoi c’est un peu au pourvouloir alors
il y a ça il y a ça malheureusement euh 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à euh 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 euh 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 van 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
personnel fasse le travail avec le client de dire
ok pour cibler quel contenu et cetera voilà en en
exemple enfin en exemple aussi euh les bandaux
cookies les bandau cookies pendant un temps on
on ne s’en occupait pas en accessibilité mais ça
durer un très court temps parce que c’était des
solutions de tierce donc il y a one 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 euh et donc comme ça voilà il se
dédoine du truc sauf que bah au tout début même
encore maintenant sur certains certains comment
dire produits de band cookies c’est pas c’est
pas accessible et donc moi pour avoir travailler
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 les bah on qui s’affiche sur le site en plus
c’est en modal ça recouvre tout donc que 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 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 on
ils veulent la conformité ont le pouvoir aussi
euh de de demander et il faut le demander aussi
de mettre en accessibilité les bandaux cookies ou
ou autre chose donc oui pour revenir à ta question
parce que je digresse beaucoup euh la dérogation
c’est souvent la l’auditeur ou l’auditrice qui ou
l’expert l’experte en accesss qui 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
road map du client voilà je vite fait d’ailleurs
sur ce que tu dis parce que il y a une un truc
qu’on a appris justement grâce au enfin que j’ai
appris grâce au baromètrre euh c’est 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 par exemple siite as
beaucoup changé depuis que je suis passé là il
mériteraient plus du tout leur sang visiblement de
tout ce que j’ai regardé le sang n’est clairement
plus mérité c’est pour ça qu’on pense par exemple
sur le baromètre à dire à mettre un sous peu une
une histoire de signalement de dire en fait
je suis en situation d’handicap je n’ai pas
pu accéder à ce site là ne le signalez plus comme
un 100 % qui serait une option intéressante mais
tourner de la bonne façon pour que ça fasse pas
non plus trop d’élation et stratégie donc ça faut
faireen à ça clairement non non je je confirme
que très clairement il ne mériterait pas le 100
%ors le bon après on a l’impression qu’on casse
du sucre c’est pas ciblé c’est pas les se c’est
juste de dire le totalement il est il est Chud à
atteindre quoi donc juste par qui ça la société
access man ok bon voilà la fameuse qui audite
beaucoup les maies d’accord ok donc du coup je
suis expert en boîte d’auditeur maintenant oui
voilà maintenant oui avec tous les audit que tu
asé les 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é bonjour 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 ENF horrible horrible
horriblement bien 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é la partie page d’accueil est
complètement dérogé 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 sais 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’
a de l’argent en jeu l’audit ça reste un business
euh faut faire quand même gaffe à avoir un minimum
d’éthique quand même quand on travaille quoi
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 vanne 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 les gifs animés euh
et ben là là on est en erreur donc voilà donc
c’est pour ça que au tout début quand tu quand
euh Joel a pris la parole et a dit voilà il y a
une vidéo qui se tourne qui joue automatiquement
euh je suis allé voir pour voir si elle durait
moins de 5 secondes et elle ne tourna et si
elle était pas en boucle mais malheureusement
est 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 Vann à 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 avoir le score aussi
donc ils vont c’est sûr ils perdent le totalement
conform voilà allez donc qui qui qu’est-ce que qui
a la main c’est toi c’est moi à propos de quoi de
la de la tu partages ouais du partage c’est moi
c’est moi pour l’instant c’est moi le chef c’est
toi le chef mais je t’ai donné les accès part
ma pour vous donnerasy non vas-y vas-y vas-y je
partir mon premier clic mais tu es très bien tombé
en fait c’est hyper pertinent en fait c’est toute
façon tu tombes dans les très dans les limites du
baromètre c’est parfois ce qui nous est reproché
tu vois sur une C dans les messages par exemple
des messages arneux pas d’autres mot c’était
arneux euh moi qui mon moral pendant 2 3 jours
mais en fait malheureusement tu il il y a rien qui
permet de se fier à une expérience tu vois et 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 le l’exemple
de la ville de Van le prouve tu fais un audit un
jour le lendemain il est plus forcément bon euh
je cite toujours l’exemple de je travaille chez
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 contreit plus de 80 % ce qui
est phénoménal pour un cite 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 le l’audit enfin le
travail réalisé par 80 personnes sur ce sujet
là c’est là où l’accessibilité c’est c’est très
très 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 a 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’appque pas qu’à l’accessivité ça
marche aussi en nu ça marche aussi c’est un bon
exemple ouais merci mais oui c’est voilà tuas
ce côté là une personne peut vraiment gâcher le
travails 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 des sites français et donc tu dis
attends cette personneel elle a rendu inaccessible
à 20 % de la population tout il porte le nom
d’un métier et le site est orange c’est ça euh
ouais ouais non non mais c’est mais en plus enfin
voilà je c’est très dommage d’ailleurs qu’ils aent
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éveloppeur euh é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 un une méconnaissance
et c’est toujours le problème sur lequel on tombe
euh on voit souvent j’ai travaillé récemment chez
un client qui qui faisait pareil les s’étaient
formé les les développeurs et les développeurs
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 a jamais expliqué pourquoi
il devaient remplir les alts euh de manière
pertinente et cetera bah du coup il se faisaiit
retoquer sur ces pointsl au niveau des audits
c’était pas grand-chose mais et personne prenait
1 heure ou une matinée pour aller leur expliquer
pour leur donner un sens c’est très dommage
quoi pour ça qu’on sens on dit toujours quand
on commence nos formations on 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 à euh à n’importe quoi en fait
tous les gens qui interviennent sur le site ou
qui peuvent intervenir par un billet quelconque
doivent avoir au moins de trois notions et c’est
la même chose du coup on éconception merci du
coup bonjour Amélie hésite pas à intervenir
aussi par je sais que tu es si je ne me trompe
pas tu es chez ni 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 et pour répondre à
Hamza aussi qui dit bonjour le taux de validation
des critère est vraiment trompeur un site à 60 %
aura peut-être moins de points bloquants un site à
70 % c’est tout a fait vrai euh et même pour alors
pour la petite anecdote l’État français c’était
fixé euh donc pendant le je crois c’était pendant
le premier quinquen 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 on faut viser
75 %. donc les administrations bah il faisaient le
taf ils arrivaient à 75 % et dis bah voilà c’est
bon on a je je tire des grand traits voilà je fais
des raccourcis mais il disait voilà 75 % c’est OK
et en fait nous donc auditeur auditrice en Access
on était mais non parce que 75 % il y a il y a
encore des bugs bloquants enfin il peut y avoir
des bugs bloquants donc faut c’est pas parce qu’on
atteint un bon SCOR 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 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 euh
voilà et euh et donc le les les bugs bloquants
ça va être bah plein de choses notamment la
navigation au clavier les modales euh ça va
être souvent les couleurs c’est c’est très voyant
donc et souvent c’est le prier la première chose
euh qu’on qu’on fait d’ailleurs c’est dans
l’un des premiers les premières thématiques
du rh2a euh qu’est-ce qui qu’est-ce qui peut être
bloquant euh il y a plein plein plein de choses
qui peuvent être bloquantes euh les les scripts
voà en Javascript si vous déclenchez euh des
choses avec des boutons qui ouvrent un panneau ou
voilà les alertes les formulaires avec les erreurs
et ceeta voilà et donc ça peut occasionner des
erreur donc voilà tout à fait d’accord et donc
connaissez-vous accè score c’est une méthode je
en train de regarder euh c’est assez buffant qui
ajoute des points très rigolo C cl 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 la la méthode elle fonctionne très bien mais
elle a un énorme défaut euh qui était le défaut
qu’on a observé chez beaucoup d’autres de ce type
d’acteur c’est qu’elle n’est pas euh vulgaire au
sens où et c’est tu noteras d’ailleurs que c’est
le travail inverse qu’on fait sur le le baromètre
en fait le le problème de l’accessibilité c’est
que un site comme lequel sur lequel vous allez
la accesscore il est pas sexy il donne pas envie
il est hyper blindé de texte et en fait du coup
personne n’ 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 qu’il
a plus de l’acilité 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 en détestond va fort quand même ouais pardon
peut-être j’exagère mais d’accord pas détest mais
ah oui mais la masse de texte attends je
je attends je connaissais pas ah oui oui
quand même après c’est c’est quoi la meilleure
initiative mal vendue ça reste à mon sens euh
la pire façon de procéder possible quoi dit l’idée
est magnifique mais tellement mal vendu 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 dans des situation comme ça qu’il faut
absolument éviter je trouve c’est toujours c’est
là où lu a son intérêt le débat des des comment
dire des des projets open source où derrière il y
a vraiment tout tout ce qui va avec l’Open Source
l’ouverture sur le partage et cetera euh et versus
les solutions privées ou les solutions privées
souvent on un meilleur design mais c’est privé
voilà on reste donc c’est c’est un débat qui est
assez assez grand et mais malheureusement après
voilà là je moi personnellement je ne connaissais
pas access score en il prend 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 le nutriscore là ouais donc c’est et tu as
c’est c’est la 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 mais ouais
en fait ce ce qui existe c’est souvent c’est
ouais voilà éindex écoindex et le n’est pas très
sexy non plus le truc en fait c’est aussi embêtant
avec l’accessibilité parce que il y a pas tout
tout n’est pas super aussi en accesss notamment
avec le le rg2a comment on note les choses comment
on évalue les choses en fait c’est très binaire
c’est souvent c’est 0 ou 1 c’est conforme ou non
conforme il y a pas de subtilité dans la notation
c’est-à-dire par exemple B on va le voir avec le
baromètre mais dans mon exemple il y a une une
page à la 10 images il y en a neu qui sont bonnes
elles ont un soit elles ont un alt rempli parce
qu’elles sont informatives soit elles ont pas de
alt rempli parce qu’elles sont décoratives mais il
y en a une la 10è qui est une image informative
mais avec un alt rempli et ben en fait on va
planter le critère donc des images parce qu’il y
en a une qui est pas bonne alors que les 9 autres
sont sont super et donc ça c’est un quelque chose
que le le comment dire les les WE donc c’est Web
Content accessibity guelines travaille sur une
nouvelle version encore de notation c’est c’est
encore en draft et cetera mais il voudrait
revenir avant le avant comment dire qu’on
est cette version là actuelle des c’est 2.2 enfin
2.1 vraiment pu que on se sur celle-ci en Europe
mais il y a les 2.2 qui sont arrivés récemment euh
avant cela en fait il y avait le R2A aussi il il
notait avec des médailles bronze argent or et il y
a eu toute une réflexion alors j’ai je je sais pas
encore où ça en est parce que c’était 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 euh bah là sur moi mon
mon mon comment dire mon exemple des images il
y en a euh 9/ 10 qui sont ok donc on serait euh
euh bronze à sur le à 100 % mais argent on serait
à je sais pas moi 80 %. he et donc justement
ça et à la fin on ferait un un total de tout
ça et voilà donc euh je mets encore beaucoup de
guillemet quand je dis ça parce que je suis pas
euh 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 on apporte un peu plus de nuances et de
subtilité et euh c’est parce que comme le disais
parce que comme ça je raccroche les wagons euh
le disait Antoine au tout début c’est que tout le
monde doit être formé sensibilisé bien sûr et euh
ç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 produonur 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 et en
tech toute tout bien le le dev l’architecture et
cetera et tout et il suffit malheureusement de
publier une vidéo sans sous-titre ou une une image
informative mais sans Alt et ben on va perdre ça
va impacter le score donc tout le monde doit être
sensibilisé mais même après ça va au-delà de de
tout ça ça va aussi les les personnes dirigeantes
les les les RH les commerciaux et cetera voilà on
peut il faut justement aller sur ces genres
de métiers pour aussi les raller à la cause
tout à fait on est parti bah on est parti si
tu veux le temps que tu lances ah oui ah mon
wou trop bien ou ou on est vachement nombreux
je m’attendais pas c’est très cool merci du
coup je relance je disais merci remerci à 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 voir t merci
pour les petitsojis voilà ça fait plaisir donc on
va tout doucement lancer l’audit par Mathieu yes
on vautiliser excuse-moi je t’ai coupé pardon non
enfin tout va bien on va lancer du coup l’udit 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 Go a utilisé
le a créé pardon une plateforme qui s’appelle
ara je sais pas ce que ça veut dire d’ailleurs
ara et et personne va redemander et du coup on
va aller revérifier en ligne je sais pas ce
que ça veut dire je vi seulement de me poser
la question et ça ça vous permet de faire des
audits sous trois formes la forme euh légère
moyenne et complète euh 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 euh avant qu’on ait des détracteurs sur le
sujet au cas où parce qu’on le voit facilement
euh non l’outilara 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éren
d’accessibilité c’est bien il y a des on était pas
loin euh ben il faudra demander parce que il y a
sûrement une signification derrière cet acronyme
audit rapide d’accessib 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 euh pour le coup
euh pourquoi pour donner un peu de contexte aussi
euh d’habitude comment on fait un il y a donc moi
je pour donner un peu de contexte euh ça fait 13
ans que je fais du web euh je suis intégrateur à
la base et je suis passé après devvelopper front
avec toute l’évolution du métier euh avec gérer
une équipe jusqu’à 10 personnes pour de frontte
pour de 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 lequelle 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 rg2a et
je ne connaissais pas du tout ce ce que c’était
donc je suis arrivé dans ce Mondel en mode ok avec
des idées bien préconçu qu’on m’avait appliqué et
enseigné à l’école même mes tuteurs euh que que
que j’avais me disait non il faut que tu fasses
comme ça comme ça comme ça et une fois formé euh
par bah parce qu’on peut faire de la pub aussi
parce qu’ils font d’excellentes formations aussi
access 42 euh la formation dev certifié et en fait
euh bah j’ai réappris mon métier d’intégrateur et
de Death 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 de chefer 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 euh 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 sur le les codeurs euh ou les codeuses
euh 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 euh 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 Frontin
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 les les experts et les experts ça
les experts pardon voilà mais grosso modo on n 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 pe amener
aussi de l’eau au moulin comme on dit euh 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 chat il y a
un truc de question euh à l’oral aussi leverz la
main tout simplement euh voilà essayer de mettre
des smiley du coup pardon t je sais qu’il y en a
quelques-uns ici qui ont fait des formations
avec moi euh hésitez surtout pas à utiliser
les smiley juste pour nous envoyer une réaction
un machin ça fait toujours vivre un peu le chat
euh merci beaucoup an euh voilà ça fait toujours
un peu plaise et et ça nous donne un peu de de
retour en fait on sait que vous êtes tous tous
en vie et que euh et que vous nous entendez que
vous nous voyez et cetera qu’est-ce euh un
onglet chrome non une fenêtre voilà chrome
euh alors est-ce que je fais Chrome Firefox
parce que Chrome n’est pas euh alors pour vous
réexpliquer un petit truc aussi euh 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 euh 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 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 htmls
euh 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 euh ç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
rg2a 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
oui 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 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 euh 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é euh elle est pas assez futé
pour travailler toute seule en tout cas à l’heure
actuelle euh faut vraiment la guider faut y aller
pas par pas euh 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’accessivité 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
euh voilà donc 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 euh 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 euh en gros quand est
sorti alors j’ai plus les dates faudra g 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 euh on était solcité
pardon par l’équipe euh 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
les le formulaire de retour il y a eu le fait
bah de de de créer un compte et de stocker les
les audits pour pouvoir justement les retrouver
parce queavant c’était pas stocké euh 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 le truc
c’est que normalement quand on fait un audit euh
voilà c’est ça aussi où je voulais en venir quand
je vous parlais de mon expérience euh 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 R2A donc quand on va sur le site de du R2A
on peut télécharger le kit d’audit et dans le kit
d’audit il y a la grille euh officielle rg2a et
euh certaines entreprises société d’accessibilité
euh prennent cette base là et refont une grille à
eux pour l’améliorer avec des des formules excel
en plus extériur 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 ex nous
euh bah quand moi j’ai quitté ces entreprises
pour arriver chez waren Walter euh on on a navait
pas on allait pas recréer tout ça donc on s on
partait en fait et on part toujours sur la grille
officielle du rg2a pour faire tout ça donc c’est
un Excel euh non c’est un point ODS je crois pour
être plus open source mais qui s’ouvre avec Excel
et euh 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 euh avec et cetera on peut
l’envoyer au clients et cetera aussi et tout euh
le 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 euh 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 euh une
certaine logique et une certaine euh il faut être
rigoureux et rigoureuse dans le la la 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
euh parce que bah il y a beaucoup de bugs et
cetera et c’est pas c’est pas du tout digeste voà
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 euh 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 fait des choses aussi bien dans ce senslà
euh pour cette vidéo est sponsorisée par ara je
jouer youtubeur merci à notre sponsor du jour
design goov ça serait drôle pas du tout euh donc
M Coupé j’étais dans un élan de d’explication
euh excuse par t’inquiète et donc l’outil a été
mise à jour et cetera et euh avec ils ont ils
prennent voilà ils travaillent euh à améliorer
l’outil et tout et donc c’est cool de de de voir
que bah l’état 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 benah 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 s 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é euh par certaines
boîtes d’Access euh 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 bah qui
sont spécialisé 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 tuattaques Mathieu là ou quoi
je récupér mon mot de passe désolé on a on a 30
minutes de retard déjà sur l’audit aujourd’hui
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
çair 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 RG2 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 rg2a mais on va quand
même le faire parce que bah quand même un site sur
accessibilité c’est quand même un peu dommage sur
pas nous-même accessible euh 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 Nura 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 pas obligé de 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 euh
audit complet dit de conformité donc audit de
conformité euh le rg2a 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 R2A 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
on on c’est bien de de vérifier les choses et
surtout que le R2A é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 g
voilà le quand est-ce que ça va être mise à jour
cela cela cela et cetera donc bref euh 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é le conton
square la Fondation cont square pardon euh
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 euh euh sur ouais je
t les envoyé sur je t’ai fait un Google sheets ah
c’est gentil et ben je vais euh je vais l’ouvrir
mais comme ça ça me donne les explications tout
de suite enfin je donne les explications tout de
suite euh 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 rg2a
euh donc euh référentiel général d’amélioration de
l’accessibilité nous donne euh une une technique
alors je sais à chaque fois je sais plus où c’est
euh critère gloccernant obligation légal euh
mention P obligatoire est-ce
que c’est ici c’est pas
ici critères le nombre des pages exuse vaisrouver
ça peux all suite toc ah ça suit dans le chat
toc euh 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 hyperactif c’est cool
ouis désolé euh é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 R2A 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 plurri annuel
quand on on est soumis aussi bien sûr au schéma
plurannuel 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 plurannuel 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 plurannuel dépasse vraiment
le 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 plurannuel
par contre le schéma plurannuel ne pointe pas
sur les déclarations d’accessibilité pourquoi
parce que euh c’est une faille de sécurité euh
il suffit qu’un attaquant euh trouve le schéma
plurannuel avec toutes les 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 voà 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 plurannuel voilà et pas l’inverse
la petite subtilité euh 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 euh 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
euh la documentation téléchargeable donc souvent
c’est des PDF et malheureusement les PDF euh à
99 % ils sont inaccessible de base euh donc il y
a un travail qui doit être fait pour les rendre
accessibles ou alors trouver une une solution
alternative euh c’est souvent ce qu’on excusez-moi
ce qu’on recommande aussi c’est euh 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éconnise 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 euh 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 euh comment dire oui ça dépend
bien sûr il y a une date de publication je je
rentrai pas trop dans les détails parce que ça ça
reste cadre légal et cetera euh le d’avoir en fait
une une version alternative et donc c’est souvent
ça peut être soit une page html euh un Word et
cetera c’est qui qui est quand même beaucoup plus
simple alors bien sûr il faut il faut comment dire
euh 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 euh 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 le ce
produitl euh il 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
euh 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 doiv vous fournir euh tout
ce qui est couvert et c’est en PDF et souvent
ils passe par des prestateurs externes et donc
bah 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 tiersce donc des des
entrepr prise tiersce pour générer des PDF quand
on prenait des assurances de voyage et cetera et
ils avaient exigé euh à leors leur prestataire de
rendre les PDF accessibles donc vous voyez c’est
aussi voà 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à euh oui toujours
possible je me permets je rebondis parce que du
coup faut qu’on avance Mathieu pardon Paron j’ai
d ontill euh donc masqué tu m’obligesê time keeper
c’est vasy r en plus donc tu m’as envoyé euh ouis
t’envoyé tout les pages si ça voulait te faciliter
la vie donc là du coup maie vasy je je vais faire
du copiercollé 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é euh voilà donc il y en a certaines
qui sont déjà acté la page Contact euh 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 puisque
le il y a pas de compte créable pour l’instant
pour l’instant eu 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 tu
dissocies pas la page templ
page de la template page accessibilité ça va êre
il y a très très très peu de Pag réell c’est pour
ça je suis la page d’acessibilitéen a une ok bah
par contre il faut je pense qu’on va la dissocier
parce queok alorsfin la page accessibilité on
la créera nous après parce qu’elle l’stant 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’imession 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 sondage
ah ok div vot il y a eu div vot de c’estclair
et technique parfait cool j’is demandé si vous
avez des exemples d’outils pour rendre les PDF
accessibles- qu’on des exemples d’outils euh oui
euh alors euh ah non des non des outils alors
moi il y a InDesign qui voilà qui fait qui fait
ça bien qui fait 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 euh 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 euh sur
les tableaux j’ai un euh 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 euh
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 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 euh Acrobat donc Adobe Acrobate Reader
pro il a l’analyse l’analyse d’accessibilité
et on peut intervenir dessus par contre Adobe
AC enfin euh Reader classique euh bah il comme
il est gratuit machin bah il a beaucoup moins
d’options et donc voà c’est un peu frustrant ce
que 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 euh 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 ouis c’est
quelque chose qu’on a qui a rarement été fait
en live et là on avit 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 euh oui ben oui moi je suis
prêt euh donc pour vous montrer un peu l’interface
retrouver vos audits oui on s’en fiche hop euh
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 euh
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
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
bah 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 euh qui soit non conforme conforme
ou non applicable ou non testable on peut valider
l’audit pour justement générer après le le rapport
et et et terminer en gros l’audit le comment
ça se passe après on a donc le nom du bah le
nom du du 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 apppplicable
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 euh 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 clitère conforme
non conform c’est c’est pas mal parce qu’au niveau
des filtres c’est plutôt intéressant et c’est là
le la force aussi de de faire un site web plutôt
qu’un Excel c’est que bah dans le Excel il faut
le manipuler créer des formules et cetera que là
bah 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 bah tout le site sur le critère image par
exemple euh si à un moment donné j’ai oublié
une page et ben je vais pas être à 100 % donc
c’est aussi un un rappel euh pour dire ah est-ce
que j’ai bien aussi toutité 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 euh donc dans un Excel qui est long et
donc voilà et que là on a des ancres donc on pe
aussi bien sûr scroller he c’est classique hein
mais c’est bien d’avoir des encres 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 euh 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 euh 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’ effffectivement sinon il y aura
un peu un un un souci d’éthique concrètement
de C à 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
euh 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 euh enfin non c’est pas
personnellement c’est retour pro la grille rg2a
ne permet pas ça donc c’est un peu frustrant dans
mes précédentes sociétés et on avait C 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 le pour le le comment dire le le
pourcentage que tu pardon c’était pour rebondir
parce que du coup c’était pas clair je dans le
chat 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 euh 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 la 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 ouais euh
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 euh comment moi je procède euh
et je pense que Karine si elle est encore là euh
peut valider ou invalider parce que chacun a ses
techniques aussi hein c’est aussi euh on peut on
n’est pas voilà des robots et on n’ pas tous la
même technique moi personnellement euh durant mes
formations euh que j’ai j’ai eu euh on me disait
de d’activer d’abord des plugins automatiques pour
voir justement euh euh bah très rapidement le les
erreurs qui sont donc automatiques en gros euh VI
a ces plugin là donc j’en ai une une ribambelle
en haut je vais vous les présenter euh le les
tests automatiques ça représente entre 25 et 30
% du rg2a donc sur les 106 critères on va on va
en tester entre 25 et 30 %. VO ça dépend si le les
personnes entre 25 et 30 % on tombe d’accord donc
en gros là moi le mon plugin chouchou que j’aime
beaucoup il s’appelle wave et wave donc c’est W
A V tout est gratuit he c’est Open Source tout
est gratuit euh il donc le truc cool c’est que
il va vous en vous l’installer et en quelques KIC
même pas euh quelques secondes il va vous faire un
rapport sur la page et donc là on voit que donc
là c’est le l’onglet sommaire on a une erreur
donc c’est pas laquelle parce qu’il faut aller
après dans le l’onglet détail on a zéro erreur
de contraste donc automatiquement c’est là aussi
c’est cool parce que les les 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 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 très très
rarement et donc c’est pour ça que je je fais à
la main euh on a des alertes on a les le 30 % de
fatur qui sont ok euh 15 éléments de structure et
on a deux Aria euh j’en parlerai quand on arrivera
au critères qui euh concne enfin il y a pas des
critères qui concne à rien mais les scripts
notamment on on on va pouvoir dire queil faut
mettre des Aria dessus euh donc j’en parlerai
après et donc quand on va sur l’onglet détail
on voit que on a une erreur sur la homepage donc
quand on clique dessus ou quand on passe en over
avec la souris on voit que à droite il a entouré
avec un petit liseret 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 il nous la met en en surbrillance le
truc aussi qui est cool c’est que en bas on a le
code donc quand on clique dessus bah on voit on
voit les choses qui sont qui sont faites et donc
quand on reclique sur l’erreur bah il nous c’est
une encre 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 englob
c’est un lien englobant h tu as un ID mais l’ID
c’est par rapport je pense à au au comment dire
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 je me
permets de vérifier que ce que je dis pour
savoir comment je le rpare 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 il faut il faut 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 une une bien
sûr une une une information supplémentaire là il
y a pas de il y a pas de débat là-dessus mais par
contre il faut toujours comme un AR laabel
aussi donc voilà j’en parlerai aussi après
euh mais il faut justement un un title et il faut
un intitulé de texte dedans donc on va corriger
ça après euh donc voilà le lien est vide oui voà
j’ pas branché les neurones euh donc là on a une
erreur euh 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 Matthieu
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 ah [ __ ] pour ça que j’aime bien
chrome aussi parce que le leur moteur de code il
autocomplète les choses euh donc il y a la fameuse
classe alors ça dépend si tu l’as je pense que tu
l’asibility ah accessibility ah
non pardon j’ai pas mis la SR donc
ouais donc là ce sont des classes qu’on va
appliquer qui permettent de cacher visuel
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
le la même chose donc moi person title moi je je
virerai le title puisquil fait doublon donc
ça fait en plus pour à la vocalisation avec
les pour les pour les personnes qui utilisent un
lecteur d’écran les personnes aveugles il va lire
aller sur la page d’accueil euh aller sur la page
recherche aller sur la page recherche donc ça sert
à rien donc moi personnellement je recommanderaai
de 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 overover voilà je
faut faut voir faut comment dire Hamza
pourquoi ne pas renseigner le alt euh
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 dans le critère parce que dans le
rg2a euh non pourquoi je mreou hop euh je trouve
le c’est que pour les lecteur d’écran c’est
vrai mais comme quoi tu vois il y a plusieurs
ouais mais en gros alors dans critè
test dans intéressant justement de de
travailler parce qu’ 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
élment 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 icibat déjà pour une
image si le lien c’est un lien image voilà mais
je je sais plus trop dans le r C’est je sais
plus si c’est dans les images images de décoration
imag alternative textuelle est-ce que c’est là le
lien je chauffe texte donc condition on ouvre
le test retrou docum les li im donc avec conten
im oui je me permets de rebondir mais Jimy
a un peu r non non tu je pense pas que tu
te trompes c’est là on est sur des 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 ouais 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
[ __ ] merde ouais ç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
vra 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 c’est plutôt cool
que de mais oui on peut le Hal peut porter peut
porter l’information donc on irait donc aller sur
la page recherche et on mettrait pas justement
icone loop ben non c’est pas c’est pas une une
bonne information par exemple donc là on il faut
renseigner où on va euh n’estlu que par l’é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 euh donc
justement euh bah 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 le le robot quand on lance wave il
détecte il a détecté que le 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 un un contenu caché de
façon accessible euh voilà euh donc toc euh moi
en tout cas voilà la technique que j’aurais que
je recommanderais euh à on on voit bien que tu
as pas mis la donc c’est quoi la classe access
hiidden 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 je donc euh t’inquiète pas 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 euh après moi
il y a un truc pour donc pour tester il y a plus
je vous montre plusieurs plugins que j’utilise euh
il est où h le voilà le l’assistant rg2a qui a
été repris par une au début il était porté par
l’adinum 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é euh et comment dire il
ils ontah mis à jour et cetera donc le ce plugin
là il est vachement bien au lieu de se balader du
S rg2a et de revenir et cetera on ouvre un petit
plugin et çapp permet d’avoir le H2A vraiment
à côté donc donc voilà donc le c’est plutôt
intéressant d’avoir d’avoir ce genre de chos et on
voit que là ils l’ont mis à jour parce que j’avais
pas vu que on pouvait masquer les CSS en un en un
clic donc c’est plutôt intéressant et donc voilà
donc moi j’utilise aussi beaucoup l’assistant R2
pour éviter d’aller sur le site et C donc bien
sûr ça remplace pas le glossaire mais on a des
liens aussi donc com par exemple je clique sur
euh image porteuseination et vous voyez en bas
donc on va cliquer dessus et hop il m’amène au
glossaire à la bonne ancre et ca donc c’est moi
j’aime beaucoup ce plugin là euh qu’est-ce que
euh je me permets je rebondis sur le commentaire
de Joë charv qui disait euh 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 euh
Mathieu m’a repris là-dessus parce que je fis
des ari toutes les sauces partout un maximum et du
coup il m’ 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 euh 480
Arya c’est vraiment pour enrichir les choses
ou même malheureusement détourner euh le
fonctionnement de de quelque chose pour le rendre
accessible aussi c’est vraiment donc et l’une et
la première règle Deia c’est de pas l’utiliser et
d’utiliser les éléments natifs quand on peut les
utiliser donc donc donc par exemple ne pas mettre
de div r button voilà et mais utiliser vraiment
un bouton voilà donc c’est par exemple ce genre
de chose euh on pourrait avoir l’url des plug
après la visio mais je peux même même mieux
faire mieux que ça déjà pas mal fourni dans
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 qui que que nous n on
utilise chez waren et voilà donc vous avez vous
avez les choses il y a sur la page for formation
en open source du coup euh bah oui B après oui
c’est Open Source en libre accès plutôt en libre
faut connaître l’URL mais voilà euh bon parce que
moi je j’ai pas toujour j’ai pas avancé sur mes
critères euh pas image et portable d’formation
alternatif textuel il y a un petit plugin qui
est plutôt sympa qui est donc web developper
toolb la web developper toolb en fait quand on
va dans les dans on l’installe il y a différents
onglets et options qu’on peut et notamment quand
on va dans l’option imag on peut afficher les
display voilà on peut afficher les les alt sur
les sur toutes les images donc les la balise IMG
euh donc 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à euh donc on
peut voir bah par exemple donc si on prend dans
l’ordre on a notre fameux logo du baromètre qui
dit logo baromètre des sites accessible on a le
alt donc sur le la petite loupe euh 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 euh 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 les petites
icônes des des tags enfin des catégories ici ou
thématique je sais plus thématique ou catégorie
le excusez-moi on appelle j’appelle ça un secteur
euh pour info je je le redis au cas où parce qu’il
y a quand même de person qui avait un peu chaud
euh les alt pas remplis permettent des de faire
en sorte que l’image ne soit pas lu en fait
en vocalisation euh par les gens qui en ont
besoin donc qui vocalisent un site web euh voilà
donc c’est c’est une erreur int enfin c’est pas
une erreur c’est c’est intentionnel on met les
choses vite pour qu’ell ne soit pas lu voilà
considère que c’est juste de la déco en fait
et là par exemple dans le le petit feu qui va
symboliser l’énergie le mot énergie juste après
donc ça avit pas beaucoup de sens de dire énerg
image d’énergie énergie donc on a juste laissé
ça un emoji a besoin alors ce ne sont pas des
emojis officiels euh ce sont les emojis de
fluent donc ils sont pas normalement sous
que dans cet aspect-là donc là c’est vraiment
de l’image mais oui tu as raison soit si c’est
j’aurais pu utiliser des vrais emojis euh euh
basiques mais là ce sont des images euh en SVG
ou en PNG selon le poids euh 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
devveloppeur TOB en plus il est super vieux moi
personnellement quand j’ai 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 il faut je tue 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 apporte une apporte-elle pardon une
information nécessaire à la compréhension de
la page exactement c’est pour ça que quand quand
comment dire Antoine a contribué et créé le site
il a fait en partie exprès de rajouter des smile
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 bah ç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 euh 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 euh donc je reprends
excusez-moi l’outil des tendan de l’accessivilité
numérique avec des smile cur pour que ça soit
plus sympa personnellement euh en fait parce que
le le reste de la phrase c’est parce que c’est
plus sympa et donc le fait de mettre un alt sur
l’image smile cœur apporte du du contexte donc
moi pour moi l’expérience et 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 on
là en accessibilité pure moi personnellement je
la laisserai parce que ça apporte du contexte
et au reste de la phrase donc là je laisserai
par contre en dessous petit storytelling qui
va bien mais dis donc à quoi servent à quoi
servent ces baromètres smile sptique 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 desternativités ou là attends il
faut que je rebranche mes neurones pour pour la
lecture devrait être ignoré en ajoutant un span
masquéve 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 pens 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 la technique alors je 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àd 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
uxi 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 veux
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 il y a Antoine a une idée et un parti prix
l’accessibilité à des règles et cetera Joë vas-y
ouais je me permets du coup de le faire en
vocal je pense que ce sera plus simple je
pense que après je 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 imag smile ctique euh pareil
précédemment image euh smiley avec des cœurs euh
tandis que si tu mets en arrière hiidden trou et
que tu mets une span en S only euh tu peux mettre
le texte exact que tu veux qu’ soit euh vocalisé
sans avoir le image au préalable ah d’accord
ok euh oui tout à fait alors oui alors là on
est sur eu là il y a une expérience ok une autre
expérience merci beaucoup de l’explication parce
que vraiment je l’avais pas euh mais oui en fait
oui c’est un Tex d’accord on on met un alt vide
et derrière il y a un span il y a un span SR only
ou qui veut dire maintenan oui parce que y image
moi personnellement là donc pour le M dit donc à
quoi servent ces baromètres moi j’enlèverai donc
le 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ë absolument aussi ça
sans en fait la la ce qui la question qu’il faut
se poser c’est est-ce que Karine me dit à chaque
fois est-ce que sans l’image on comprend et
là oui euh on comprend que en fait bah donc
il y a un titre qui introduit un paragraphe ce
paragraphe après il 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 une subtilité pour comprendre la
différence entre des titres et des paragraphes
le et donc là on a ces c’est bloc là ces trois
blocs là en fait qui le texte suffise en en eu
même louper quelque chose pluging Tool permet
de lire les alt ainsi ah oui euh oui vous avez
loupé quelque chose donc je vous le remets c’est
le plugin web developpper toolb et dans l’onglet
Image on active display alt attribute et donc
si on le désactive on on le bah ça l’enlève et
si on l’active voilà il y a d’autres plugins qui
le font euh il y a je crois que j’en ai un ici
Hop qui fait sur les images afficher l’ voilà
toc il le fait à côté voilà moi je il y en a
d’autres mais moi j’aime bien WE je per 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 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 il y a deux
façons de l’entendre on va avoir un titre qui va
être vraiment réponse à une question mais euh 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 de
de Satir et de ce fait là j’utilise les smiley
dans une expérience de vocalisation pour insister
sur ce côté-là le smile 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 cette tou ce
qui n’existe pas à la vocalisation la vocalisation
n’ironise pas contrairement à mon sm exactement et
donc là c’est bien on AB euh alors c’est là où on
est toi et moi versus le chat on est pas d’accord
donc est-ce que la majorité l’emporte je dirais
oui et surtout les règlesga disent bien et donc
là il y a eu plusieurs rappels et vous avez tout
à fait raison que une image décorative doit être
ignorer et euh ou alors alors c’est là le truc
aussi et là je vais apporter une nuance elle peut
euh doit êre ignorer euh le une nuance aussi si
vous avez un jour un 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 euh pour euh
pour faire du référencement dans Google Image par
exemple donc vous techniquement parlant euh si on
prend le rg2a il va dire euh ok le ce n’est pas
possible puce 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’expertexperte l’auditeur l’auditrice doit euh
faire un pas en arrière mais pour donc pour
valider ça et en gros la technique c’est que
on va mettre un ariden trou sur l’image euh c’est
que donc avec Aria hiidden TR on va faire en sorte
que le lecteur d’écran ne lise pas l’image euh
qui ne voilà 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
euh c’est que on met donc un ariden trou 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 on aussi on fait ça c’est que on a en
accessibilité on a aussi tellement autre chosees
à côté pour améliorer aussi l’accessibilité que
et en plus on met un arr don trou donc c’est
totalement ignoré donc voilà tout le monde tout
le monde est content euh dans ce caslà de SEO là
dans le cas et notre débat depuis 35 minutes sur
sur ça en fait on va arriver à 13h30 on aura fait
va falloir clore d’ailleurs euh voilà mais donc
il va falloir clore et 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 donc on va planter le critère ici
donc chaque image porteuseination alter non on
va attendez chaque image porte donc oui oui parce
que il y a bien des alt ici pardon sur celle-ci
ça c’est bon il y a il y a quoi d’autre qui peut
être bien il y en a qu’une donc c’est bien là on
est bien là on est bien là et donc ça ç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àd la réglementation du
rg de ça 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 fa vraiment un vrai
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
échoconception je fais tester je teste certaines
mes images quand je vois je 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 euh qui permet
de rajouter la compression qui est absolument
invisible sur d’ailleurs tu vois sous les pages
du baromètre je suis quasiment à 4 entre 90
et 95 ou 96 % euh en terme de web carbone 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é 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 euh je
vais répondre un peu brut euh il faut trouver la
source que alors que bien sûr Google aime pas les
comprend euh 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 aridon trou 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 bah enfin s’ 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 la 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 mets tuuras la note
de toute façon après donc chaque image
oration est-elle correctement ignorée donc
non non app pardon non conforme excusez-moi
allez clic Mathieu hop euh et donc là on va
il y a une quand on clique sur nonconformité
et cetera on a tu mets carrément en non
conforme là-dessus bah oui chaque image
de décoration est-elle ignorée et ben
non en fait elle est pas elles sont pas
ignorées parce que justement tu mets un un alt
qui est rempli donc par exemple ici la Smile
est sceptique il est il devrait être ignoré
et il l’est pas puisque tu remplis le alt le
ilut
J je m’ends donc on pas ici on mettra
que certaines images certaines images de
décoration et donc après on peut dire
correction ah non je crois qu’ a un truc
recommandation de correction je me permet je
demande au chat du coup mais cristella Etic
mais du coup je 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 CRIRES ne sont pas toujours très clairement
euh publ pas toujours très publiques pardon
oui c’est ça en fait c’est ça le gros le problème
de de Google en fait c’est un peu une boîte noire
euh il y a eu des hacks d’ailleurs de ça
où ils ont publié euh des choses pour le
SEO externe c’était un peuindor pour les
personnes qui faisaient du référencement
euh mais oui il y a certaines choses en fait
notamment celle-ci moi là euh je n’ai pas de
sources j’ai pas trouvé de sources voilà qui
me dit euh euh question praticopratique dans
tes audits mentionnes-tu les URL des images
en défaut pour faciliter la vie de tes clients
alors euh euh pas là euh mais mais oui mais pas
dans l’audit en gros euh 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
euh le le 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à cette image là
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 et
C enfin de dire que 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
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 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 ça se
répercute sur les autres donc voilà je m Jimy on
apporte une remarque très bien voilà vider ouais
VI d’ailleurs je 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
iden sur mes trucs parce que justement j’avais
alors c’est mathu 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
disait faut supprimer les alt faut supprimer les
Alt et je supprimais les alt alors qu’en fait il
faut les laisser vided 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 le
préciser le contenu de l’ribu euh oui complètement
euh là pour le coup on va si le alt bah là pour
le coup là on va euh sur le critère 1 3 donc pour
chaque image porteuseination ayant une alternative
textuelle cette alternative est-elle pertinente et
donc là pour le coup euh on a des images qui sont
porteuses d’information et qui sont bien et qui ne
dont mais dont le alt n’est n’est pas bien rempli
un exemple sur le logo le gros logo ici euh 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 incusté dedans et le alt on a une différence
d’information donc là pour le coup il 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 commoditeur 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 de
dire c’est soit c’est l’URL de l’image soit c’est
le comment dire où ça se situe dans le code aussi
mais bon le code peut bouger donc bref c’est oui
ça peut être ça peut être comment dire il y
a plusieurs solutions euh le donc voilà après
à trouver à trouver les choses et à s’adapter en
conséquences euh donc non conforme ici euh donc le
1.3 chaque image porteuse d’information ayant euh
VI euh donc là on n’est pas bon c’est que euh donc
ici donc on reprend donc tout en haut on a le logo
logo baromètre des sites accessibles donc pour
le coup le lecteur d’écran dira donc image logo
baromètre des sites accessi donc là pour le coup
euh ç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 de
du 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à exclusiv sur sur l’image euh donc si
on regarde la structure hop je vais désactiver mon
petite mes petites images il est où il est là tac
h mes petit alt donc si je regarde la structure on
a alors oh mon dieu un a dans un a euh ah mais
non ça c’est moi qui attende excusez-moi hop
c’est c’est mon plugin qui a fait des bêtises non
excusez-moi c’est Don des mauvaises réputation là
c’est ça c’est bon tac euh donc on a un lien image
le et donc l’image porte le euh ce qu’il faut et
donc alor le logo des baromètres et s accessibl
donc pour moi euh je laisserai ça euh par contre
on a une information supplémentaire c’est que
le lien euh fait un retour à l’accueil donc
euh on on doit donner cette information là et
donc personnellement moi ici je mettrai euh un
un comment dire un un texte masquibleant 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 une
infobulle par-dessus et cetera et donc moi je
je je n’irai pas sur un title j’irai plus sur
une autre solution pour justement la pensée euh
pour euh pour les personnes qui qui utilisent un
lecteur d’écran et euh donc je comme là on est
sur un retour à l’accueil donc ça serait on peut
mettre un title hein donc ça serait donc euh euh
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ère et c’est accessible donc on pourrait
on pourrait utiliser cette technique là euh
aussi donc là pareil ce qui est un peu embêtant
dans dans l’accessibilité c’est qu’on là on a
euh sur un seul bloc un seul composant si je peux
appeler ça comme ça euh on irait le title irait
écraser le alt non il y aurait double lecture
euh le le comment dire euh 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 bah
remettre des sites accessibles ou ou baromètre
C accessible retour à l’accueil on pourrait on
pourrait tout à fait porter porter ça c’est juste
que là le alt euh de l’image le pareil le SEO par
exemple pourrait nous faire un retour de dire
mais c’est voilà je 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 de 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 dgressé on ce qui est je
me permet just Mathieu attends attends parce que
du coup ah pardon c’est parce que natthalie
a envoyé un petit message qui disait je je je
suis pas d’accord sur le fait qu’une personne
en déficient visuel doiv se faire accompagn
pour faire les corrections évidemment que non mais
c’est vrai que faut quand même considérer que là
c’est un audit qui btimement 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 euh les images les choses comme ça va
être peut-être plus compliqué donc elle sa 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 un ami et et
je sors le la carte Chen un amiki mais là pour le
coup bah je peux que sortir cette carte là parce
que il est il est auditeur enfin il est développ
et devvelopper react et aveugle et en fait il
fait parfois des audits et cetera et donc il va
lancer des 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 donc remonte
des erreurs donc à vérifier par quelqu’un d’autre
donc c’est pas une question de dire euh comment
dire elles sont bien sûr aussi compétentes qu’une
personne qui qui 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 les codes couleurs il y a une remontée de
des erreur et après il dit voilà vérifier donc
par une personne voyante c’est juste ça le le truc
au contraire il y a pas du tout de de débat pour
moi là-dessus tout le monde est 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 euh donc euh parenthèse fermé donc
oui je je finis [ __ ] oh là là pardon je dis un
gros mot euh le 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 euh là ça va être le critère
donc la thématique lien la thématique image euh
on va devoir aussi jouer sur la thématique euh
navigation au clavier pour voir si la navigation
au clavier se se est visible ou pas sur les liens
voilà donc c’est aussi ça aussi on est on est
d’accord on est euh comment dire euh ou 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 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 euh
aussi un peu plus bas dans le dans la grille rge2a
pour euh euh me noter les choses ou alors il
y a une il y a une une technique que j’avais
apprise quand j’étais en en dans ma précédente
boîte d’accessibilité où euh c’est qui est en
gros euh on va faire des références c’est-à-dire
qu’on va on va tout concentrer euh sur euh par
exemple la thématique la thématique script qui
est assez euh importante dans un site internet
on va la on va noter euh beaucoup de choses
dedans et on va euh donc euh invalider les
thématiques au-dessus donc par exemple un exemple
j’ai un un bouton qui ouvre une modale et dedans
il y a des images il y a des 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 imag et
couleur et donc critères image et critères couleur
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 qu’
le critère 1.3 il est planté à cause du critère
TER 1.7 et on donne toutes les explications au
même au même endroit parce que c’est pour avoir
été dans les deux camps c’est-à-dire euh euh en
tant que développeur et en tant que 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 euh mais
voà faut aussi juger de de de 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 RGA 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 dans dans les
explications voir document en annexe voilà donc
moi le je quand vraiment on commence dans des
grandes explications ùou 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 rg2a et
cetera puisque on va quand même planter et enfin
faire des non conformités ou des cononformité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 altt machin c’est assez rapide mais voilà on n
pas encore attaqué les gros critères là mais voilà
donc on va y aller euh qu’est-ce que j’en étais
où oui les alternatives donc ici on a certaines
hop je reprends mon petit plugin pour activer
les choses hop euh 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 puisqueon il faut comme c’est un lien qui
englobe l’image il faut donner l’information qu’on
on on revient sur l’accueil donc là on va dire il
faut supprimer l’information logo puisque c’est
juste baromèt accessible voilà donc on va le on
le notera ici donc sur l’image hop évidemment
je peux pas copiercoller euh tac c’est bon je
recharge ah j’ai perdu voilà et donc hop donc
nous aussi ce qu’on fait beaucoup euh quand on
fait des audits c’est qu’on on prend on cède
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 de de de de se de
de bien cibler les choses parce qu’il peut y avoir
plusieurs logos euh donc voilà c’est c’est aussi
important de de bien cibler où on où on est voilà
euh bah merci aussi Amélie et euh au plaisir
oui merci beaucoup euh pardon plus moi jeir
vous quitter quelques une petite demi-heure
j’en suis vraiment désolé mais du coup merci
euh à ceux qui ont déjà participé merci aux
futurs qui arriveront euh j’espère que ça vous a
pluçon on essaiera de de faire un sondage sur la
finir ce genre de form 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 Liv 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 in j’ess de lui envoyer
peut-être un message après mais ouais de
toute façon il des je pens ça marcherait
et bah oui pour le coup et donc là en fait alors
personnellement que je rejoins Antoine les audits
euh d’accessibilité en live je pour moi ça a
jamais été fait euh 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 benah 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
des Liv sur des sujets plus précis et donc
bah voilà comme ça on se concentre que sur
quelque chose l’information queon retourne à
l’accueil c’est 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 monre en compétence
ouais ouais de toute façon la thématique image
et toujours j’auris 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 euh et qui n’a pas de d’enjeu
d’autre que l’amélioration donc du coup c’est
c’est pour ça que c’est cool ça ça même si
c’est entièrement développé sur T waren euh
j’ai pas mes patrons qui sont sur la tête 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
matthie 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 porteuseination
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 euh pardon il faut que je mette
non applicable excusez-moi euh donc non applicable
non applicable non applicable non applicable non
applicable euh il y a pas de légende donc non
applicable ça y est je suis devenu banque par
contre je serais plutôt de euh sans pour autant
écrire un avis exemple euh source baromè oui
oui totalement euh euh 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 euh 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 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
les les PDF que tu fais j’entends ce que tu dis
natthalie mais c’est vrai que Mathieu en général
livre des PDF extrêmement complets à fin des audit
c’est d’ailleurs un truc que je lui reproche
entre guillemets c’est qu’il va tellement loin
euh moi je sais que j’ai fait passer des
audits et j’ai reçu des audits d’autres
boîes qui étaient beaucoup plus concis euh mais je
on peux pas reprocher à Mathieu d’Er son travail
de vouloir faire en sorte que l’accessibilité a
très loin de faire un travail très qualitatif de
code oui pour l’unimage c’est assez rapide euh me
confirmes-tu que tu n’as pas de di frame ah si tu
as peut-être une non tu as pas une e frame là sur
le la notation de score en bas là non euh ah si
peut-être le website carbone je suis pas sûr c’est
pas uneiframe euh non c’est pas uniframe c’est
non c’est pas une il a du script carbone ah ou il
inject c’est bien que ce soit pas uneame et donc
moi personnellement de toutes mes connaissances
du site il y a pas d’ame donc on peut pareil
aussi sur lesame donc c’est non applicable 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 euh il est où il est
où mon petit plugin mon petit W 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 euh donc tin
j’ai l’impression d’être un youtubeur twitcher
et tout euh donc voilà wave il nous retourne donc
zéro contraste de couleur euh 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 euh ça
do être celui-là professional color tools anyone
can use ce n’est pas celui-là évidemment erreur
de les effets démo euh je vais le trouver hein euh
pica alors attendez est-ce que je peux aller
sur le site à propos le site web voilà voilà
vous l’avez hop et donc 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 du du premier plan
et de l’arrière-plan et il vous donne par rapport
au weag 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 a
ou triple double A ou ou trip donc voilà donc un
petit 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 de 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 h
hop et contrast Finder voilà il est donc je
vous le partage hop je vous le mets dans le
lien hop tac euh si cette règle si cette règle
nous concerne n’est pas appliquée dans cette
page garantir un rapport de contrast entre les
couleur des liens et du texte qui entour 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 euh
justement il faut quand même traiter le overover
et le focus euh oui bien sûr euh oui oui il faut
voilà c’est juste j’y étais pas encore donc voilà
euh je vous partage moi les les les bons petits
trucs que enfin les bons petits trucs les trucs
en tout cas que que je teste euh 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 euh des couleurs un peu un
peu fluo pour vous montrer comment ça fonctionne
euh toc euh 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 euh il faut connaître après
les ratios de contraste mais en gros euh quand on
a un ratio de contraste de 3 c’est qu’on est sur
une typo euh enfin sur une taille de texte pardon
qui est euh non grass euh supérieur à 19 pixels et
donc au-dessus et quand on est 4. pardon 4.5 euh
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 je je rencontre le le comment dire le 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 contrastf est un outil de calcul et cetera
c’est vraiment plus petit que 19 pixels ça se
ç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é audessus donc 4.5 et il va
nous donner le ratio le plus proche au début et
puis voilà en dessous voilà donc euh celui-ci est
bien foutu aussi oui voilà bah partagez vos vos
vos ressources aussi moi j’aime bien celui-là et
euh mais il y en a plein d’autres sur les couleurs
c’est assez euh il y a beaucoup beaucoup beaucoup
de ressources même quand on utilise figma ou ou
d’autres 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 euh un intittu donc le le
l’URL plutôt je dis un lien excusez-moi l’URL
qui a déjà les 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 les couleurs de contraste qui sont
euh 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 guillemetsfin de on va conseiller sur les
couleurs euh mais c’est pas à nous c’est pas on n
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 de
couleur ça nous concerne pas forcément tant que
c’est tant que c’est contrasté bien sûr euh donc
euh je dis reste beaucoup euh 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 euh que nous disent les tests euh donc
pour chaque mot ensemble de mots dont la mise
en couleur est porteuse d’ination donc là pareil
on a un petit lien pour aller voir le glossaire
sur qu’est-ce qu’une information euh ne doit
pas être donné uniquement par la couleur cette
Estelle respecté donc on va regarder le les tests
après retrouver dans le document les informations
données par la couleur euh dans dans un mot
ou un ensemble de mots euh après on a chacune
des informations vérifier qu’il existe un autre
moyen pour récupérer cette information présenteun
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 qu’est-ce que qu’est-ce
que qu’est-ce que qu’est-ce que je où j’en étais
excusez-moi l’information do donné 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 le 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
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 over 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
overover sur le 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 pe êre en gras on peut avoir
une petite bulle en dessous 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 vux pas
l’oublier donc option modifier les par paramètrre
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 euh
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 h tout à la fin voil
j’ai la transverse qui est ici alors pourquoi
page baromè 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 euh 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 euh je vais y aller moi aussi merci beaucoup
pour cette démo d’IT bonne journée bonne journée
ai aussi à vous Vanessa euh donc voilà j’ai j’ai
bien en tout cas ma page transverse qui est ici
et donc quand je j’attaquerai les trans trans je
bah planterai ce qu’il faut dans les transverses
dans le header le footer ex puisque pourquoi
c’est transverse en pourquoi on pourquoi qu’on
dit pardon excusez-moi pourquoi qu’on dit que
c’est transverse c’est que c’est des éléments
qui se retrouvent sur toutes les pages du site euh
le comment 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 bandau
cookies donc je traiterai ça après euh je reviens
sur mon sur mon comment dire mon mes couleurs euh
donc mes couleurs je suis TIC ici tac mes couleurs
donc chaque page web l’information doit pas être
une euh 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
euh une indication textuelle visible et cetera
voilà donc c’est plutôt intéressant euh 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 euh
moi je ne vois pas euh de d’élément et donné par
la couleur normalement on est bon euh est-ce que
lui j’ai un doute parce que je sais plus quelqu’un
avait dit que euh tac tac tac il y a des choses
dans le foo ah oui c’est peut-être sur l’effet
l’effet l’effet focus ou l’effet l’effet over
des choses je sais plus mais bref euh 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 euh
dans chaque FO je vois les contrastes entre les
couleurs de texte et l’arrière-plan est suffisant
donc là pour le coup euh bah voilà on a le on a
ce que je vous disais ici euh par rapport à la
taille de de graisse et cetera euh le texte en
image et sans image en graisse par rapport à à
24 pixels 19 pixels et cetera aussi euh donc dans
chis pas les contrasts entre la couleur de texte
et son arrièrep é 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 euh il est où mon petit Pik premier
plan c’est ce jaune là arrière-plan c’est donc
là on est en sur le le jaune euh 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 queon on peut les valider
ou les invalider donc pour moi ici les contrastes
sont ok euh la couleur utilisée par les composants
d’interface ù les éléments graphiques portant
d’information son suffisamment contrastés h cas
particulier donc là par pareil il y a la fameuse
image avec le dégradé euh 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
euh composant d’interface on est sur du multimédia
donc les médias temporaires il y a pas de médias
euh sur sur la page d’accueil euh donc là on peut
mettre qui ne qui ne sont pas applicables sur
cette Pagel euh 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 euh en accessibilité par rapport au
au code notamment par donc çac en développement
qu’on va corriger ça on va redonner du contexte à
ces liensl là pour le coup donc euh quand j’active
je reviens sur mon site j’ai des liens d’évitement
donc aller au contenu aller au footeur euh nous
contacter donc là pareil il faut les tester donc
est-ce que quand je clique dessus je suis bien
sur le le contenu donc là c’est bon quand euh
je suis sur aller au footeur euh je suis bien
dans le footer donc là on est bon hop et quand
je remonte on a nous on met pas dans les trans
on pourrait oui euh 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 euh ici
dans les liens donc euh 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 euh donc on a les liens
assurance euh l’image là elle est bien ignorée on
a no span là et on dit euh voir les fiches du
secteur assurance le title là il renforce les
choses moi personnellement je j’essaie au plus
possible de de de 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
puisqueon reprend quand même euh les le comment
dire le l’intitulé du secteur personnellement
moi je faudrait euh 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
audessus 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 donc donc voilà il il renforce
le fait qu’on aille qu’on comprenne qu’il y a
des secteurs et tout donc voilà on met des des
liens après on va rentrer dans le débat que là
il faut une liste Uli et pas juste une série de
liens ça c’est encore c’est d’autres critères qui
rentrent euh qui rentre 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 euh 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 euh display
encore euh 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 une CSS euh spéciale pour pouvoir
entourer ah mais non je suis bête euh l’outil
je suis vraiment bête j’ai 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 r il
nous entoure tous les liens donc ça nous permet
d’aller plus vite euh 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 euh pour le coup pour moi
on va on va supprimer le title qui est ici
puisqueil il n’apporte pas plus d’information
au contraire nous contacter c’est un lien bah
on sait les choses euh 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
plans du site Mo sur les G accessib pareil c’est
bon euh il y a des titles aussi sur le site du
warovateur benah non ça sert à rien puisque on
sait que ça le contexte c’est un lien waren Walter
donc on ser que c’est un lien euh 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 on pourrait le laisser hop donc
certains tac les liens donc chaque lien est-il
explicite alors euh 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 R2A a perdu ce critère là
euh le rg2a3 euh le de 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 R2 A4 n’a n’a plus
cela donc moi personnellement je trouve que
c’est une très bonne pratique d’indiquer que
bah tous les targets blans euh ouvrent un
nouvel onglet donc ça serait o une nouvelle
fenêtre donc on mettra entre parenthèses là
pour le coup waren Walter nouvelle fenêtre
ou Antoine boursier euh nouvelle profil
Linkedin nouvelle fenêtre euh mais voilà
ce n’est pas euh 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 rge2a euh
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 euh qui disait que le CSS a-t-il
un impact sur les lecteurs d’écran euh oui tout
à fait notamment avec les pseudoéléments before
after et avec le Content enfin le le 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 le
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 euh 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 pseudol 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 éidment 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
euh 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é euh 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’intit li permet de comprendre
la fonction destination il est où ce critère là
l’intité 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 euh soit enfin qui viennent comment dire
c’est ceux-là qui sont en bas là euh c’était
dans mon critre tac les liens text qui sont
ici euh typiquement ce suite pollue moins que 8
% des sites euh vers le résultat de la page web
enfin voilà c’est ça sert à rien ce genre de
de title pareil le title sur la page Contact
euh toujours transverse toujours transverse
euh bah oui oui c’est le foter [ __ ] je suis
bête je suis vraiment fatigué moi euh toujours
transverse et donc les liens tac dans ici donc
qu’est-ce qu’on a euh 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 euh
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 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 tour donc on testera voilà c’est là que
c’est important aussi c’est aussi en responsive
euh aussi en accessibilité pardon on doit tester
euh le responsive voilà euh 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 euh hors transverse
il n’y a pas de script ici euh cependant euh
chaque scrip est compatible avec technologie
assistant ch script et a une alternative ok
contrôle par le clavier euh on verra parce que
j’ai plus tout en tête euh mais sur la ah non ça
do être la présentation de l’information donc on
va mettre applicable pour le moment puisque il
y a pas de il y a pas de script sur la page je
suis toujours sur la page d’accueil hein oui c’est
bon toc voilà euh chaque page web é définie par un
type de document donc ça c’est très rapide on 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 euh nous on fait c’est quoi c’est contrôle
u voilà pour afficher la sourse et on voit bien
qu’on a un Doct type HTML ici donc là on est bon
euh donc type de document donc pour chaque le
type de document benah il do présent le type de
document est-il valide et euh 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 euh après on a dans le code
source généré euh est-il valide selon le type de
de document spécifique donc là pour le coup il y
a pas 36 façons de de regarder euh moi j’utilise
le euh l’inspec non c’est pas l’inspecteur
W3C c’est le le euh vous voyez me venir euh
je sais plus c’est W3 et j’ai c’est tellement des
raccourci que Validator voilà hop et donc tac on
comment on comment je l’utilise on 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
euh la la page euh pardon excusez-moi c’est pas
celui-là on fait euh inspecter les 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ôleu 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 de code et vraiment copiercoller ce qu’il
y a dans les balises HTML donc là si on fait
modifier comme HTML on fait contr a contr 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 sin il vaetourner des
erreurs mais c’est du c’est du
transvers plutô 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 dog type HML voilà
toc et on fait check en gros tu as des codes
langu 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 tuas français canadien français quelque
chose d’autre et en fait c’est la même chose pour
l’angla en en anglais as en UK en US en Canada non
enca tu as en Australie et cetera donc ton code
langue voilà il peut avoir un un 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à euh ah mince je
suis bête j’ai oublié le tomb une fois sur les
sur une langue mal enfin pas renseigné d’ailleurs
sur un gros site on l’ découvert quand on faisait
la formation avec Renault digital du coup je
donna l’ information 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 le la balise à ce moment-là
n’y était pas sur certaines parties du site et
du coup on s’est retouva à 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 j euh ouais salut Joël
merci beaucoup beaucoup beaucoup de toutes tes
interventions céit vraiment très cool à bientôt
et et à la à la pour le le 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 euh pour donc là le com com moi je reviens
sur mon audit euh 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 euh notamment là
vous voyez il m value prelad euh donc voilà
sur une une un lien un pour charger du CSS
le truc par contre qui remonte ici là c’est très
intéressant c’est euh 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 isab 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 tout le tout le
tout le truc c’est que on a une remontée d’ erreur
donc là on va on va revenir dans notre code euh le
code source est généré donc là on met non appli
euh non conforme excusez-moi euh et donc là on
met dans le alors ça ça serait plus transverse ça
parce que euh c’est c’est dans le Head donc là on
va on va le mettre dans les transverses qu’est-ce
qu’il y a d’autre qu’ l’ a remonté euh 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 euh est ok donc on met conforme euh
alors attendez parce que comme les transverses
vont impacter toutes les pages euh on va mettre
on va mettre non conforme et on va le mettre
tout de suite dans les transverse excusez-moi
hop donc euh il est où transverse
et c’était le critère euh
voilà hop euh 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 euh met viw port plutôt met
viw port tac euh supprimer les par les
valeurs et euh comment qu’elle s’appelle l’autre
euh users scable no voilà ah oui donc en plus j’ai
vraiment coupé le zoom volontaire vraiment oui
voilà mais 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 euh 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 euh
style de texte euh voilà ah non c’est italque 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à euh 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 amza pardon
amza est parti je redis au revoir du coup mais
au cas où il ser encore là le pour le minimum
scale pour moi euh 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 fautut
il faut le dire il faut revenir il faut revenir
vers eux euh 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
euh sans réponse de leur part on peut on peut
solliciter le défenseur de droit Défenseur des
droits euh pour dire bah voilà le site 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 euh mais voilà mais en fait
ils le disent 2020 mais oui là complètement
ils sont ils ne sont pas bon au niveau de au
niveau de la loi euh donc moi j’eni fini avec mon
avancer par la suite a bar remè 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 euh 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 c’est marqué baromètre des Sit accessible
l’outil des tendances de l’accessibilité numérique
le le pipe qui est donc le caractère euh de donc
c’est pas c’est pas une c’est pas un slash c’est
un pipe euh il sera interprété comme pe-ê donc
il dir un baromètre des Sit accessible je sais
plus comment il le dit euh 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 euh mais il y a bien en tout
cas il y a bien un tytre de page et euh le titre
de page est-il pertinent bah oui parce que on
on dit bien baromè site accessible l’outil des
tendance après le truc c’est d’aller voir aussi
les autres pages pour voir si le le le titre
échange donc tous les baromètres access baromè
accessible là on a quoi le journal journal de
l’accessibilité numérique baromètr s accessible
on a tous les baromètres des bah oui voilà ça
c’est bon donc ça et là accessibilité accessib
baromè 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è mais là pour moi c’est 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ètrre
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 laagfip
non pas laagfip l’ ils le disent là euh euh la
f phfp voilà c’est l’association pour ils ont
travaillé avec des personnes handicapées pour
tester les choses donc c’est vachement bien euh
donc on est Lang là on est bon le titre bon le
titre est pertinent euh chaque changement l estil
indiqué dans le code source donc là pareil il faut
regarder donc bah si euh le baromètre parle
en anglais et donc là on a un beau euh 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 comm
on l’a déclaré et donc ici il faudrait donc là
on a du story telling euh 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 euh donc là afficher
noté ing il a pas vraiment de traduction euh 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 euh 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 euh 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 merde mince un span langue ah oui du VO
pardon je je me suis mal j’ai pas mis j’ai pas
fait modifierl voilà euh 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 euh 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 euh ça voilà génial je savais pas ça sinon
alors je sinon là il dira story tel telinge story
t linge j’ai 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 euh 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 contreodit du coup aprs
ça êre je sais pas si on peut faire le contreodit
dans ara directement j’imagine que oui et bah oui
oui bien sûr pourquoi on pourrait pas non je sais
pas tu sais un duplicat d’audit je sais pas je te
suggère hop faire ça on fait un sondage à la
fin pour dire euh 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 euh doit avoir un atribut
langue 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 euh 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é à à benau pour identifier
les mots anglais j’imagine que c’est plus rapide
en lisant la page avec le lecteur d’écran euh 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 euh ça peut aider c’est comme
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 euh on a pareil un débat
là-dessus euh où il y a pas de bonne réponse
évidemment mais euh ç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 euh
oui tout à fait hésitez pas donc on
fera évidment un replay ah oui voilà euh
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
doiv 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
céder de la doc justement qu’on a euh par exemple
il donne il donne des exemples justement euh
uniquement à des fins de présentation c’est euh
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 typographi donc de grossir des
choses et cetera euh utiliser des bloc bloc code
pardon pour mettre un paragraphe en retrait et
cetera après il y a des petites notes qui sont
importantes euh 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 euh pour le coup donc là
si on on on on inspecte un peu le le le site il
faut inspecter bah tous les tous les blocs en
fait on est il y a pas de il y a pas de magie
euh là par exemple il faut regarder si là on
on a on a un H2 avec un un paragrap en dessous
euh voilà en fait s’il y a des des 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à euh
on a ça après on a en dessous on a un paragraphe
ouais on a un paragraphe ici aussi euh dans
le bloc ici on a quoi on a un H4 comme ça on
verra après parce que c’est pas bon euh ici on
a quoi on a trois paragraphes ça c’est très bien
euh donc là pour le coup pour le moment sur
Al sans prendre les transverses header footer
on on 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à euh
div paragraphe A il y a pas de BR non plus euh
le wearia 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 euh encore le rôle
présentation utilisation fortement déconseillé
voilà donc là ils font un Laus 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
la structure est enfin est bonne donc pour moi je
je valide ça euh le changement de sens de lecture
est signaler bah 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 euh le et donc là pour le
coup on a un autre petit plug j’ai un autre petit
plugin à vous présenter qui s’appelle edigmap et
ce petit plugin ING map 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 une
erreur qui a été faite al 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 euh 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 souv 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 euh
ni des labels ni des titres ni des paragraphes
mais qui font deux trois mots j’ai souvent
tendance à mettre des span alors euh je 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 spans en fait c’est une
balise neutre comme une div et donc bah c’est
pas forcément interprété le 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
euh n’apporte pas forcément grandchose si par
exemple ils sont dans un les les tags mais tu
as des tags et ben tu as un résumé ça sera des UL
euh 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 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 j’ai mal 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 un titre euh ça devait être un P même en
deux mots peu du story telling VO c’est c’est un
paragraphe euh donc euh j’en reviens à mon à mon
truc euh c’est que j’ai mon petit plugin heading
map qui me montre que en fait Antoine il a créé
euh des blocs ici donc trois bloc avec des titres
H4 et il en un autre aussi en dessous euh il en a
d’autres aussi en dessous en fait comme un de base
il faut il faut 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 auudessus mais dit donc à quoi ser ce
baromètre et il va expliquer il va argumenter donc
là en fait on va devoir transformer ces titres en
Ulli 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 SIO 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 euh alors en tout cas ça nous sert
nous en en dev pour on veut on veut mettre du
texte en gras mais on veut pas qu’il a un poids
en SIO 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 c’est petites choses que
tuend 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î
dans une boî 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 euh chaque page
d’ination était structurée par l’ation à propri
des titres avec moi oh là là tu un monstre euh
est-ce que euh voilà donc là on va citer les
titres en question donc là je reprends mon petit
pluginmap et on va dire les titres euh 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 effectivementoup justeich 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 V
que séantiquement vous pouvez vous F au
dsfr c’est top mais ouais bon du coup tu
Mathieu est dur mais mais juste finalement
c’est ça euh donc là pareil aussi euh
pour information alors nous c’est pas
c’est plus du SEO que du que du que de
l’accessibilité euh strong une balise
strong dans un H4 euh ç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 euh tu dois
euh tu dois comment dire ah Anne Sophie euh
tu dois comment dire euh euh 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 pour être
pour être très bien aussi mais point de vue SEO
euh je 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
H chîn c’est pas forcément pertinent j’aurais
aimé qu’on estit un une expert du coup j’avais
ch la
prochaineon 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 r jeis pas comment on dit le RG SN
du coup mais référentiel mais il est encore plus
flou donc efftivement comme disa ser 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 rgn ça ne se dit pas RN ok ben
voilà merci voà pr 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
euh très bien non non RG SN c’est tout simple
rgn merci beaucoup mais ce serait vraiment cool
euh 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 euh qui s’appelle Land marark et en fait
grâce à landmark en fait il va donc regarder tout
le code et il va détecter euh bah les balises
headur les balises navigation enfin les balises
nav les balises foour et cetera et donc après on
peut cliquer dessus pour pouvoir pour voir un peu
où où on est et la structure de document cette
structure de document là elle concerne pas mal
aussi les transverses notamment parce que bah
c’est on va la retrouver un peu partout euh et
donc on va plus impacter euh les choses ici
enfin dans cette pche là on aura des choses
à dire parce que notamment on peut renforcer ces
balises là donc Balis main avec des rôles euh et
typiquement le rôle on peut mettre sur le header
on peut mettre un rôle un rôle bannerner pour dire
que voilà c’est bien la bannière c’est bien c’est
bien en haut sur main on peut mettre un rôle main
pour il il en faut que un d’ailleurs rô 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’onglais
ah bon pourquoi il détecte pas la même chose euh
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 fooeur 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
euh un autre euh les rôles ne sont euh si en fait
c’est c’est utile ça peut justement renforcer
parce que si vous avez des la une balise nave
enfin nave voilà on c’est bien de dire bah que
c’est une une navigation après on peut mettre en
plus un arriè laabel pour dire c’est la navigation
principale ou navigation secondaire donc là ça va
aussi renforcer euh bah aider pardon la personne
qui va euh 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à euh mais moi personnellement je je
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 euh 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 d’
structure moyen d’alément header vérifier que la
zone navigation principale secondaire structure
moyen nav oui vérifier que la navigation que la
nave n’est pas utilisé en dehors de la structure
de zone de navigation principale et secondaire
euh vérifier que la zone de contenu principale est
structuré d’ moyen élément main donc ça c’est bon
euh 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 queage en voil
moi personnellement je est-ce que si on va sur le
VO la définition du cont info le rôle en fait ça
rajoute des choses Mo personnellement je ça veut
pas dire que c’est invalide moi personnellement
je 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
footur on est sur du Ie 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 de de 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
tuine 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 euh il faut savoir
oui mais il a combien de temps conformme donc
chaque page we chaque liste est-elle cohérente
enfin est bien structuré euh euh 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 aments transverses là je parle de
dans la page index attends oui je CIS pas long
structure c’est quoi les listes tac euh 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 euh les citations est-ce que tu as des
citations non euh en a eu mais il en a plus on va
voir est-ce queil entour les bloc côes retrouver
description du test quoiourour il y en a pas j’ai
pasitation 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 euh mince hop hop je sens
que je dourais pas ma note totale à 13h30 euh
non c’est c’est certain on a même pas fait page
euh la dans chaque page web les balises servant
à la présentationination 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
le cette extension on voit euh bah les balises qui
doivent être absentes donc les balises u 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 euh les balises
euh qui euh qui ne doivent pas être là donc là
pour le coup le le test 101 est ok donc on peut
passer au test suivant euh 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 ceera 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 pass par plugin web
developper et j’allais dans les CSS et je faisais
disable CS voil maintenant le plugin assistant
le permet on vaquer dessus donc là on a bien le
site sans CSS et euh on voit bien donc là il faut
détecter s’il y a pas des espaces et cetera qui
sont euh qui sont euh ajouter en plus et donc pour
le coup en rapide rapide passage je ne vois pas de
de différence hop on réactive les CSS et donc
le test euh 101 est OK et donc il est conforme
ouou j’ai j’ai quand même de trois points c’est
pas mal euh non ça va non euh le contenu visible
information présent lorsque les feuilles de 6
sont désactivées donc pareil donc là on va on
redésactive les choses et on on va regarder
alors le mieux c’est d’avoir ils le disent
he d’ailleurs il faut l’instruction c’est euh
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 Ctait 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
euh donc là on va désactiver les CSS et
donc on va se concentrer euh 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 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 euh 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 R2A OK et là après
on arrive à la fin on arrive dans le footer donc
on prend pas en compte les choses tiens oui dans
le 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
euh 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 euh ici dans chaque page web le
texte 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 R2 à3 on
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 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 euh 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 confor euh 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 euh 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 euh 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 ont ils ont bien ils
sont bien 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 élment susceptible de contenir du texte
Estelle accompagnée d’une déclaration de couleur
de fond bground B couleur et au moins hérité d’un
parent voilà donc le héritage du parent c’est body
voilà et bien sûr que ça ninlue 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 euh 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 euh chaque lien dont la nature n’est
pas évidente est-il visible par rapport au
texte environnant euh chaque lien don la nature
n’est pas évidente bah tu as pas de lien Sophie
qui gentiment me défend en disant tu m confor et
pas non applicable quand pas concerné c’est sur
quel point de Sophie parce que j’ai pas vu mais
conform 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 euh le 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 euh 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 euh on mettrait forme pardon et
Christella nous confirme que le RA external ne
suffit pas il faut un texte donc exactement ce
que tu disaiss bien mais je pour moi naivement
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 conformme pu
que 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 conformme ah non
ça suis trompé dans on va voir
donc là les transvers donc là c’est pas bon euh
par contre ici euh enfin moi je je suis toujours
euh euh dubitatif sur euh le l’effet par défaut
des navigateurs euh que je trouve pas assez enfin
pas 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 euh alors technique c’est vrai que
techniquement parlant ils sont assez contrastés
puisque sur du tu es sur du fond foncé euh mais
t’inquiète mais moi enfin c’est un avis de
d’auditeur moi personnellement je conseille
fortement de de faire un effet focus dédié au
site et non se reposer sur le comment dire le
le navigateur pourquoi parce que là on a un bon
exemple aussi ici c’est que techniquement parlant
donc là Antoine il a 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 chos donc la navigation
donc là ça sera plantée 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 euh non je pense que jeis 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à tuasas un overflow auto est-ce que sur ta
na tuas un overflow Hiden 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 je comment dire salut merci beaucoup de
ta présence et de de tes échangese façon on a
terminé dans 28 minutes dans 25 minutes je vous
enver un sondage qui dira est-ce que vous avez
trouvé Mathie 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 transvers 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à là c’est un A qui est dans une balise P donc
en toute logique enfin selon la la définition de
de du 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ù
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 euh
et qui va te dire alleer vers telle page d’accord
et alors après mais est-ce que donc làdessus ça
ça se fait est-ce que enfin je comprends et là je
suis entièrement d’accord avec toi euh 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 euh puis qu’on comprend ici c’est
assurance banque et c’est bien euh ils sont bien
isolés euh du coup c’est juste le cas de parce
que c’est le foour 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 euh
présentation de laformation euh feuille de style
contenu compréhensible euh taille de caractère
CSS non c’est non ça pasre ç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 tu
mets un ID barre liste donc en plus tu sais que
c’est une liste ouais et donc là il faut faire un
et 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 euh non ça sera ah euh
oui oui c’est une oui c’est 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 euh 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
ui ou Olli il va te 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 tu 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 le chat 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 j’esère ça lu ça lui donne
une information déjà déjà de base euh donc voilà
donc là il faut sur Barrow list il faut euh donc
euh hop et donc là euh bloc euh ID bar je dis
pendant qu’il note euh je me suis jamais senti
autant juger 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 euh parce que tu vois
je m’ai dit que des fois quand tu tuas ta réunion
de restitution c’est top c’est c’est génial en
plus tu fais tu fais un document très très précis
faire ça en live comme ça je trouve ça euh encore
plus fort tu vois yes euh 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 euh 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 euh pour voilà
donc désolé euh après techniquement parlant si tu
mesures le blanc et le fond foncé ça se voit mais
euh 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é euh par hurbilog euh du coup donc il
a un dirigeant euh qui est aveugle et en fait
qui m’a expliqué en fait euh que beaucoup de gens
qui se retrouvent en situation de handicap par ce
genre de bia-là euh apprécie é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 général en fait bon j’ai vu que tu c’est j’ai
pas fa d’ailleurs cet exercice ça vient dans
le de pour info par exemple certaines erurs
avent déjà été aperçu notamment j’aiillé 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
tuutilises 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 focus focus 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 over c’est la même propriété
que de points focus et de dedans tu fais avec
outline le 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 hotline c’est quelque chose qui vient
vraiment par-dessus et qui n’est il n’est pas
euh 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 euh tant que tu mets pas des euh 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 le le l’utilisateur
ou l’utilatrice a des CSS personnalisés euh
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 euh 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 voà plutôt que de le le le le laisser
au navigateur qui peut occasionner des problèmes
d’interprétation voilà donc euh c’est non conforme
mais ça va être non conforme dans les transverses
mais je le mets je le mets ici euh 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 la le le menu
burger qui s’active en responsive donc là il y
a pas donc là on peut mettre conforme sur cette
page là euh dans chaque page l’information do pas
être donné 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 euh 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 pouruteur 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 euh
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 euh oui
ser bien d’ajouter un offs 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
euh 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
euh 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 ma 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 évidment 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éfiniment
vertical 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 transverse
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 Perre d’information là
ce qui est très important c’est que en en comment
dire en 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 euh 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 euh VO et donc
le reste c’est 320 pixels donc là je vais me
remettre un peu plus gros du 800 et 320 en 3
pixels 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 euh c’est bon euh 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 dirair les transvers je crois que
à cause du plugin web carbone alors du coup c’est
ça un ouis donc je vais appeler web carbon après
dans chaque page web les propriéés d’espacement
du texte peuvent être peuventê 1 2 3 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 euh donc quand on va dans Gestion on a
euh 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 euh je sais plus où est il
s’appelle comment ah oui rg2a4 10.12 donc vraiment
le 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 le
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 euh il est où
le 10 12 il est là et donc en gros je reprends bah
ce qui est dit dans le dans l’aspec enfin dans la
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 wordpacing donc en gros bah ça
ça se traduit par cela voilà et donc quand on
euh on active les choses on regarde si il y a
pas de contenu qui sortte 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 çaevient 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 j
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 les textes
vient bien enfin les blocs vient en dessous des
autres ça paraî ça paraît très bien donc voilà
on peut h redésactiver styus on va arriver
à la fin maie pardonou on arrive à la rest
Conz 10 le conten additionnel appariss la prise
de focus il y a pas de conten additionnel qui
appariss au focus donc on non applicable dans
chaque page we les conten additionn apparaissant
VI styles CSS uniquement pe être rendu visible il
y a pas de style qui viennent par-dessus en effet
over par exemple il y a pas de il y a pas ça dans
le dans dans le site enfin dans le dans la page
dans la page d’accueil en tout cas euh formulaire
il y a pas de formulaire donc euh tocf 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 euh navigation euh 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 euh
j’en ai mis pourant non mais ça sera
dans les transverses al rien pardon
on met rien ça sera dans les transverses que ça va
influencer dans chaque page ensemble de Pag le
menu et la barre navigation sontil toujours à la
même place ça sera dans les transverses aussi la
page plan du site Estelle 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 h on a des liens d’évitement et
on les a testé tout à l’heure dans le critère 61
malgré que ça impacte enfin ça va toucher le le
les transverses mais on les a test donc bien ils
sont fonctionnels donc c’est on mettra conforme
euh dans chaque page web un lien d’évitement
et accès rapide c’est là aussi euh lors de
tabulation est-il cohérent euh donc dans la page
en question euh oui par contre dans la navigation
non euh donc euh c’est le fameux euh on avait
le débat hier où en gros on arrive al attends
je vais recharger ma page euh donc je je à la
tabulation uniquement j’arrive sur les liens
d’évitement après j’arrive sur la navigation
euh il a 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 le
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 euh donc là le lors de tabulation
est-il cohérent non mais on mettra non applicable
parce que euh non conforme parce que ça va
ça va être des transverses euh navigation au
clavier il y a pas de piège au clavier ici donc
on pourra là on peut mettre conforme ici euh non
même pas parce que ça sera conforme ça sera euh
non non c’est bon conforme ça un P la page euh
dans chaque page web la raccourci clavier il y
a pas de raccourci clavier donc non applicable
euh tu as pas de raccourci clavier sur tout le
site hein minuscule et cetera non donc benah on
peut mettre sur toutes les pages euh dans chaque
page web les contenus additionnel apparon survol
à prise de focus ou à l’activation d’un composant
d’interface sont-ils nécessaires atteignable au
clavier dans ta page là actuellement tu as pas
de contenus qui peuvent être atteignbles enfin
qui sont qui apparaissent au survoile et tout donc
on met euh pas non conformme on met non applicable
parce que tu en as pas euh la limite de temps tu
as pas de limite de temps l’ouverture du nouvelle
déclenché sans actionutilisateur 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 nave je crois qu’on avait
créé cette erreur pour la démo en fait VO pour mon
je croelle était non alors on l’ 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éit pas bien fait ouais
c’est pas bien fait voà 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èr dans chaque page web un document buotique
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 euh le contenu
cryptique tu as pas de contenu cryptique ah
Sky emoticone syntax scryptique attends on va
revenir sur ça on va revenir il y a des Sophie
tout de suite il y a des émoticones j’avais lu
partout ce sont que des images mais c’est des
images elles sont pas officiellement des
émoticon du coup euh compte et donc euh
un attribut T est disponible une définition est
donnée par le par le contexte adjacent et donc
retrouver dans le document le contenu cryptique
emoticone oui en fait c’est alors les moticon
c’est pas des moticones en caractère non c’est des
émotic 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’moticicone qui est ici
donc si je réactive les Alt et puis je terminerai
sur ça euh ok il y a voilà c’est ça et en gros tu
regardes ici le premier avec le smileer en fait
il y a 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 smile il faut il faut un alt voilà et
il y en a d’autres non et il y en a pas euh
donc on est on est raccord euh donc je pour
l’anecdote les émoticicones étaient là à l’origine
des premiers baromètres et en fait on a fait un ça
ça suscitait beaucoup de débats donc on a fait un
genre de petit test utilisateur en design avec des
des des pour voir comment les gens recevaient les
éotic donc on on a fait juger plusieurs direction
artistique et ton et et les émotico en fait divisé
pas mal mais beaucoup de gens disaient ça que ça
humanisé à 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
euh c’est pour ça que je ne vous laisse même
pas choisir le type d’emoticone vous n’avez pas
celle de votre OS vous avez cell du 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 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 euh 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 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 euh apprendre le piano sur
un écran en mode portrait c’est compliqué euh
mais par contre voilà vous vous 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 euh si vous allez sur en
mode applicatif euh je peut-être en mode web aussi
fain je confirme en mode mobile web mais en gros
euh 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
c’est petit mais ça permet de lire euh 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 SAU 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à euh donc faites attention à ça il faut pas
euh l’avantage de forcer les emotis 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 euh quel donc là oui c’est conforme hop euh
chaque pas la fonction utilisable disponible en
moyen de geste complexe il y a pas de geste
complexe donc non applicable h mais par cont
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 de d’information
normalement tuis à part la première vraiment don
quand même relativement explicite mais si c’est
applicable parce que normalement c’est l’action
de déclencher ou relever disposi de pointage
l’action de déclencher pour moi en fait làement
je mets en en non applicable parce que en fait
tous les liens en fait c’est c’est la ils sont de
c’est la bonne comment dire il a il a utilisé les
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 disposi de pointage sur un point unique
de peuvent-ell être d’annulation bah en fait moi
je mettrai non applicable parce que il y a pas
de euh de voilà de choses qui permettent des
annulations voilà on pourra mettre conforme là su
je làessus j’ai un doute donc je moi je préfère
mettre non applicable on arrive après et on a
fait une page euh 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 euh donc voilà euh
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 d’avir fini
au moins quoi ah non ça va j’ai cru que j’avait
euh j’is dire merci du coup de de tout ça donc
on voit que bah voilà on est sur 19 la partie
rapport d’audit finale est très très bien faite
d’ailleurs dans l’ara ouais c’est franchement a
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 euh après on c’est des débats
d’experts ou de d’auditeurs d’auditrices aussi
he on a eu beaucoup de débats dans le chat
notamment sur les images les émoticones et
cetera et c’est ça qui rend l’accessibilité aussi
hyper intéressant euh il y a aussi avec le SEO
aussi voilà euh 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 le le
les menus notamment souvent on a des menus burgers
qui sont là voilà donc euh il 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 on va
le mettre sur la chaîne de Warren euh pour pour
que ce soit un peu plus bah il sera là et puis il
sera sur le le baromètre il sera dans le dans le
un un article avec comme ça il y aura toute la
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 je
jeai 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 euh je
sais plus qui est la personne qui sur des textes
en span et en paix je voudrais bien voir les
exemples euh mais voilà on peut se recontacter par
LinkedIn et et voir en 10 15 minutes les choses
mais voilà euh mais voilà donc merci beaucoup pour
euh 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 experio un
exert en en échoconception enfin un ou une pardon
du coup en plus ce serait vraiment alors horrible
en terme de jugement je je vais pleurer beaucoup
mais ce serait hyper intéressant de le faire h
ouis et comme et comme le disait aussi Anne Sophie
c’est 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 les gros les
grosses agences aussi de 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
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 toutement c’était génial céta vraiment
exceptionnel c’est puis on va continuer
carrément et ben merci tout le monde merci à tous
et à toutes et euh merci cœur sur vous c’est ça
cœur sur vous je pense que on est tous et tous
concernés par le 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 waren en fait du
coup on oublie euh il y a encore plein d’autres
gens qui ont des sujets cool euh et voilà on en a
parlé mais si voilà on donne des information des
sens des choses n’hésitez pas à N contacter
évidemment on ne fait pas que euh audit 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à sopie comment être
au courant pour la suite euh LinkedIn beaucoup
ouais beaucoup beaucoup on a rien démar plus
officiel que LinkedIn pour l’instant après on
a quand même le le site puisque du coup il est il
est accessibilité numérique.com ce n’est pas rien
leading waren tu peux nous suivre tous parce
que du coup waren va publier des articles un
peu plus généraux un peu plus liés à l’entreprise
et et nous deux on fera des com des posts pardon
LinkedIn un pe plus précis ouais pour parler 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 heur de Live donc donc il faut faire les
sous-titres la transcription et cetera donc il y
a y a du taf aussi de ce côté-là donc voilà on va
on va on va travailler aussi tout ça pour que ça
soit bien bien accès aussi et oui hésitez pas à
suivre waren parce que du coup quelque part waren
est beaucoup plus général et surtout en fait parce
que du coup on oublie de le dire c’est c’est
Antoine et Mathieu qui étaaient là aujourd’hui
mais c’est waren qui nous permet de le faire et
ça bah merci à eux merci à Quentin à Romain à Seb
plein d’autres gens parce que bah tout ça c’est
c’est du temps en fait c’est beaucoup de temps de
préparation de travail et et voilà il nous permett
de faire tout ça donc c’est plutôt chouette super