 Par l'accessibilité, donc le but de cette présentation, c'est pas vous donner une liste de thèmes accessibles et dire bah voilà, vous avez ce qu'il faut, je vais vous donner les moyens de faire ça par vous-même, donc de prendre des thèmes, des thèmes que vous récupérez gratuitement, payant, des thèmes que vous développez, voir comment vous pouvez tester avec un certain nombre d'outils, mais pas vous-même comme ça. Donc oui, comme l'a dit Grégoire, je fais du conseil de l'information, je fais du développement de sites WordPress sur les petites structures, mais en fait je suis surtout intégré dans les projets web pour la partie accessibilité du début jusqu'à la fin des projets et je teste, c'est pour vérifier l'accessibilité au niveau graphique, web design, mais aussi intégration, développement, rédaction de contenu. On travaille avec les références, donc on n'est pas contre le référencement, accessibilité c'est pas contre, c'est avec et en fait il y a énormément de tests en commun, vous allez voir ça se rejoint énormément et certains sites qui ont amélioré leur accessibilité ou aussi amélioré leur trafic, ça va de pair en fait, vous allez voir c'est très naturel. Donc je vais quand même vous rappeler certains usages, donc il y a des personnes qui vont sur vos sites, mais d'une certaine manière, ils ont besoin d'être techniques pour pouvoir accéder à votre contenu et à vos services. Donc vous avez peut-être entendu parler des lecteurs d'écran, des personnes non voyantes qui vont en fait utiliser un logiciel qui va vocaliser les pages, elles vont écouter les pages avec une synthèse vocale et peut-être avec une plage braille, si elles connaissent le braille, ce qui n'est pas complètement automatique. Vous avez aussi peut-être moins connu l'utilisation du contraste élevé, les gens en fait c'est très simple, on peut bien le faire sans n'importe quel ordinateur, vous passez dans un contraste élevé, vous avez ici par défaut un écran tout noir derrière et puis du blanc ou du jaune ou du bleu pour les liens, mais en fait ça à chaque personne personnalise en fait son visuel en fonction de sa vue. Il y a des personnes qui ne vont pas pouvoir lire sur un fond blanc, ça va être complètement, ça va être éblouissant, donc ils vont passer sur du noir et ont utilisé des couleurs. Des gens qui ne voient plus du tout les couleurs donc mais par contre le noir c'est bien pour ces personnes là, elles peuvent lire les informations. Pour la petite histoire, moi j'ai une client qui travaille sur WordPress en contraste élevé tout le temps donc elle est dans l'admine en contraste élevé, il y a des petites choses peut-être améliorées mais elle se débrouille. Sylvie avec qui va vous faire présentation sur bodypress, elle a un client qui est aveugle donc elle a fait un site pour cette personne là et cette personne là travaille d'administration avec son acteur d'écran, il n'y a aucun souci donc au niveau WordPress ça fonctionne. Ensuite vous avez des personnes qui ont besoin de faire d'utiliser des logiciels de grossissement donc là en fait elles vont naviguer de gauche à droite pour voir lire le contenu mais les grossissements assez énormes, les grossissements de nos navigateurs ne suffisent pas, il faut vraiment passer par autre chose. Vous avez des personnes qui ne peuvent pas utiliser la souris donc ça veut dire que vos sites vont devoir être accessibles à la navigation uniquement au clavier donc les overs unique ça suffit pas, il va falloir faire autre chose pour le focus. Au sein on en reparlera, je vais vous montrer comment vous pouvez faire. Il y a des personnes qui vont avoir un problème de tremblement, des problèmes de main un peu coincés au niveau des mouvements donc on va adapter les claviers et mettre ce qu'on appelle des guide doigts en fait ce sont des caches que l'on met sur les claviers et en fait c'est un peu ça revient à avoir des claviers à trou où comme ça vous pouvez être bloqué au niveau de chaque touche et pas avoir deux touches qui sont appuyées en même temps donc voilà. Et puis tous ces gens là font sur les smartphones donc sur les smartphones il y a l'électeur d'écran intégré sur les iPhone il y a voiceover depuis longtemps les mac ou aussi voiceover gratuitement depuis longtemps sur android vous avez tollback donc tout ça est installé et ils peuvent naviguer sur internet grâce à tout ça. Pour vous montrer un petit peu donc on ne fait pas des sites dédiés donc souvent me dire on met un site accessible c'est nul c'est moche c'est bon non non vous faites des sites et en plus vous faites ce qu'il faut pour que ces personnes là puissent accéder à vos sites comme vous c'est à dire qu'elles aient les mêmes informations que vous qu'ils aient les mêmes services qui puissent utiliser et remplir un formulaire comme vous d'accord donc normalement ça ne se voit pas beaucoup que on a rendu compatible un site accessible. Donc par exemple il y avait le cas d'une personne qui pouvait une envoyante qui pouvait pas en fait finir sa commande sur un site de service en ligne de commerce en ligne la personne me dit mais tu vas pas changer le site il est très beau je ne sais pas le changer le site mais à la fin de la commande quand il faut valider en fait elle n'arrive pas à entendre avec son lecteur d'écran quel type de carte elle doit choisir vous savez les mastercard et les cartes bleues etc ben j'entends rien il ya trois boutons il ya des liens on me dit lien lien lien mais je ne sais pas ce que c'est je ne sais pas je vais pas pouvoir si j'appuie sur je clique sur n'importe quoi ça va pas le faire en fait il ya quelque chose localement à changer on n'a pas changé tout le site vous voyez donc c'est pas voilà on transforme pas tout on fait des des arrangements quand il faut alors des fois il y a des choses plus importantes à faire mais il y a quand même beaucoup de choses assez simples à faire on va dire l'origine au niveau de si vous avez un site wordpress les défauts d'accessibilité peuvent provenir de certains nombres d'endroits alors le corps il ya des petites choses à on sait que nous enfin nous on change quelques petites choses mais on a les hooks pour le faire donc il n'y a pas de soucis on se débrouille on change pas le corps on touche surtout pas au corps mais on a des hooks et ça le fait au niveau des plugins là il ya pas mal de travail à faire on va dire mais ce que je dirais c'est que si vous avez une solution la plus modulaire possible c'est à dire si vous pouvez prendre un plugin et puis à un moment donné vous voulez ou on vous dit mon plugin pas tout à fait accessible est ce que vous n'auriez pas un autre plugin pour remplacer pour pour en fait réaliser la même fonctionnalité mais avec autre chose là là on va chercher un autre plugin c'est à dire si vous êtes le plus modulaire possible on va pouvoir arranger les choses de cette manière là il ya des modifications à faire sur le plugin si les plugins vous offre des hooks et bah là on est on est bien on n'a pas besoin de modifier le contenu des plugins ce qui est pas bien d'ailleurs donc il ya des plugins qui vous proposer ou pour pouvoir modifier le code générer vous avez les redacteurs de contenu qui vont arriver avec leur contenu qui peuvent aussi intégrer et provoquer des défauts d'accessibilité donc énormément des règles de rédaction pour pouvoir rédiger un contenu accessible mais il faut aussi que l'éditeur propose des fonctionnalités pour pouvoir rédiger un contenu accessible donc là aussi il ya des petites choses à changer il ya des petits plugins à rajouter pour pouvoir il ya aussi certaines fonctionnalités que l'on que l'on enlève au niveau des de l'éditeur parce que on a aussi on peut se retrouver avec un site un peu banquale et puis on a les thèmes et là les thèmes c'est le sujet de notre de notre conférence où voilà ben au niveau des thèmes qu'est ce qu'il ya à faire et il ya des choses à faire alors comment j'ai procédé pour faire cette conférence je me suis fait un jeu de test je suis allé en fait j'ai installé un WordPress locale sur mon son mon ordi et je suis allé chercher des thèmes gratuits je les ai chargés quand je pouvais pas sur les thèmes payants je regardais les sites de démonstration pour voir un petit peu au niveau du code j'ai passé mes tests voir un petit peu ce que ça donnait donc les les thèmes que j'ai utilisé sont à la fin sont présentés à la fin du dans les derniers slides le but c'était pas de dire telle et telles sont accessibles ou pas c'était de pouvoir illustrer en fait cette cette conférence avec des cas concrets que je n'ai pas inventé que j'ai pas sorti du chapeau alors c'est il est vrai que je suis allé chercher les défauts d'accessibilité j'ai pas pris des thèmes qui étaient accessibilité redis ce que normalement ces thèmes là sont quand même bien fait pour l'accessibilité je suis allé chercher un peu partout pour voir ce qui pouvait être amélioré vous allez voir qu'en fait il y a des défauts récurrents et alors c'est défaut on les voit sur les thèmes WordPress mais on les voit aussi sur d'autres cms enfin sur de l'intégration en général il y a des petits défauts d'intégration qui reviennent un peu sur un peu partout alors j'ai fait j'ai créé une liste de 15 points testés ces points en fait concernent le uniquement design et l'intégration des gabarits c'est-à-dire que sur les thèmes je suis pas la cherche tester j'ai considéré que ce qui était proposé par WordPress c'est-à-dire si j'ai une page contact c'est un plugin de formuleurs de contact donc je n'ai pas été testé le form le plugin de formuleurs de contact je suis resté sur le design et l'intégration des pages type ces tests sont issus du rg2a et des wkg alors qu'est ce que ce sont ces deux termes se représentent en fait des référentiels d'accessibilité on n'avante pas la roue j'y vais j'avante rien c'est basé sur des recommandations internationales wc ag du w3c et nous en local en france on a le rg2a le référentiel général d'accessibilité pour les administrations en rapport avec la loi 2005 sur le handicap physique aussi numérique il faut pas oublier parce qu'on voit souvent accès au bâtiment mais il y a oxé à internet aussi dans cette loi le rg2a vient d'être en fait refait en avril 2015 on a aussi un autre référentiel accessi web en fait les deux se sont rejoint du coup le rg2a est basé sur la dernière version d'accessibilité web donc j'ai appliqué ces tests sur les pages type et je vais vous proposer des corrections quand j'ai vu des défauts d'accessibilité alors on a des tests des outils je vous ai donné quatre outils alors des outils automatiques des outils automatiques ça veut dire je peux lancer des tests qui peuvent automatiser dans les règles dans les exigences d'accessibilité au niveau des référentiels par exemple on a testé la pertinence la pertinence pour le moment automatiquement c'est difficile peut-être que si on rajoute une couche d'IA intelligence artificielle va y arriver mais on n'y est pas encore mais ça va peut-être venir pardon donc là ce que l'on fait avec des tests automatiques alors là je vous ai donné les trois premiers ce sont des extensions firefox moi je travaille avec firefox mais pour obquest n'est que sur firefox accès tenon sont aussi sur chrome donc après il faut voir si ils existent sur d'autres navigateurs en fait de historiquement il y avait des fonctionnalités qui étaient sur firefox je suis resté sur firefox du coup alors le premier obquest desktop je ne sais pas si vous connaissez le projet obquest c'est un projet de qualité web beaucoup plus général qu'une une extension firefox pour tester l'accessibilité si vous connaissez pas les voir c'est c'est vraiment vraiment un super projet et vous avez aussi des règles des checklist pour le référencement entre autres donc vous avez une page vous êtes dans votre navigateur firefox vous lancez en fait obquest et ça vous sort en fait une liste de alors le but de ces outils c'est pas dire ça vous prévient en fait qu'il y a peut-être une erreur ou qu'il y a une erreur ou qu'il y a peut-être une erreur donc après à vous de voir si c'est non en fait tout est ok ça vous prévient en fait il y a pas mal de plus soudre des recommandations des erreurs mais aussi des recommandations vous avez axe pareil une extension firefox alors obquest c'est vraiment le rg2 c'est notre référentiel français par contre axe est tenu c'est basé sur les référentiels général avec enfin les recommandations internationales mais aussi sur le référentiel local 508 des états unis donc là faut faire attention parce que ils vont peut-être nous soulever des défauts que nous en fait on ne prend pas en compte en france et inversement mais moi je le trouve intéressant à lancer parce qu'ils me proposent des choses justement que le rg2 n'propose pas et qui sont importantes donc c'est intéressant d'avoir les deux parce que par exemple le rg2 n'a pas de la mobilité et par exemple axe me sort un problème quand vous avez interdit le zoom sur sur les mobiles donc ça c'est très intéressant tenon check en fait est associé à un plug-in wordpress access monitor de jodolson et en fait là c'est pas mal parce que je sais pas si vous connaissez le plug-in thème check mais en fait c'est un peu c'est le même principe vous chargez en fait vous avez vous êtes à l'administration vous avez un thème vous lancez en fait le plug-in vous lancez le check et du coup il vous sort sur vos pages type sur votre thème sur vos templates les erreurs que vous pouvez avoir d'administration donc c'est pas mal c'est payant c'est payant et puis y a gaelle qui est ici présent qui nous a fait un super boulot vraiment je pensais passer du temps donc ça c'est une feuille une feuille de style que l'on peut charger sur sa page et en fait visuellement ils vont montrer les problèmes avec un carré rouge un carré vert différentes couleurs en fonction si c'est une erreur si une recommandation etc donc là vous les avez visuellement et alors vous mettez la souris je n'ai pas testé si c'était au clavier non là vous mettez la souris et du coup vous avez en fait un texte qui s'affiche une recommandation et les textes sont plutôt sympa et pas du tout hermétique pour une personne qui connaitrait pas l'accessibilité en détail avec des termes un peu bizarre aujourd'hui mais là c'est beaucoup plus accessible on va dire voilà donc ça c'est on lance automatiquement les tests après moi ce qu'on va travailler maintenant c'est sûr avec des extensions beaucoup plus local on va par exemple tester les couleurs on va tester hiarchi des titres on va tester différents points avec une batterie de d'extension firefox alors ça y est on va commencer les tests j'en ai une casselle un metaview port même si vous faites du rwd n'interdisez pas le zoom si vous plaît ça donc en fait voilà vous avez deux attributs qui sont rajoutés maximum scale égal 1 et user scale et bol no ben voilà moi si je vais c'est zoomer ben j'y arrive pas et même si vous avez fait du responsif vous pouvez pas dire que vous allez satisfaire tout le monde il y a des gens qui vont encore avoir des problèmes de vue et qui vont devoir zoomer donc c'est très simple on enlève les deux les deux attributs et là on est bon on accepte le zoom donc c'est pas compliqué par contre il est vrai que si je veux faire alors comment j'ai fait j'ai utilisé extension firebug et j'ai inspecté le code de la balise aide pour aller chercher ma balise viewport par exemple sur génésie j'ai vu qu'ils avaient un hook pour changer le viewport ça c'est bien parce que du coup on n'est pas obligé de changer le template là je suis obligé d'aller chercher mon aider point php et puis de changer ça voilà en dur là j'ai un hoop c'est très bien donc si on pouvait avoir un maximum de hoops ça serait pas mal alors les régions les régions à quoi ça sert donc là en fait ce sont les utilisateurs de lecteurs d'écran qui ont pas mal de fonctionnalités pour naviguer ils n'avident pas de à ils peuvent ne pas naviguer de à à z sur votre page mais aller par exemple de région en région si vous avez inséré le code qui va bien dans votre site forcément sinon ils n'ont pas la liste des régions des régions des zones comme vous voulez en fait ce qu'il faut c'est au minimum définir cinq zones là en haut j'ai ce qu'on appelle un rôle banner en fait ça va on va intégrer des attributs aria du dvd3c aussi encore une fois on va dire voilà c'est ma zone ma bannière ma banner là où en fait j'indique le sujet du du site en gros ensuite je vais avoir un rôle navigation qui va représenter la navigation principale ensuite je vais avoir un rôle search qui représente la zone où se trouve le moteur de recherche je vais avoir une zone où il y a mon contenu principal et une zone où en fait content info c'est souvent le footer mais en fait c'est voilà qui a fait ceci quels sont les mentions légales etc et donc on a si je suis capable avec mon élector d'écran d'avoir cette liste de zone et de naviguer de zone en zone ce qui est beaucoup plus simple pour ces gens là si je veux avoir directement au contenu je vais directement au contenu donc vous avez en fait ces zones à alors là ce que je vous ai montré j'ai utilisé en fait l'extension web développeur avec le menu info affichez les rôles aria automatiquement sur votre page vous avez toutes les zones qui s'affichent avec les rôles et les noms qui vont bien donc je dois je dois au moins avoir ces cinq rôles mais ça suffit pas il faut que j'aille en fait dans le code pour voir aspecter le code et voir qu'en fait ces rôles sont associés à des balises si je suis à html 5 forcément donc le rôle banner doit être associé à la balise et d'heure le rôle sur je dois être associé au formulaire mais doit intégrer englober le formulaire le rôle navigation sur une nav le rôle main sur un main et le content info sur le footer je dois avoir en fait les deux je dois avoir l'unicité des rôles main banner content info et sur je peux avoir plusieurs rôles navigation rôles navigation principale navigation secondaire je dois avoir l'unicité de la balise main donc en fait c'est voilà il y a des tests à faire au niveau des régions des titres il tue j'ai un petit outil très sympathique aiding's map extension ferrier fox je crois vous avez peut-être la même sur chrome je suis pas sûr voilà il vous passe une page il vous dit voilà la liste de des titres alors tout ce qui est en rouge c'est qu'il y a un problème forcément si vous voyez le rouge et vous voyez peut-être un changement de couleur ici je commence par un titre de niveau 4 je dois commencer par un titre de niveau 1 donc là ça commence pas très bien on va dire j'ai un titre menu d'ailleurs il va falloir regarder la pertinence de cette hiérarchie avoir un menu en début je sais pas ça doit on doit pouvoir l'enlever facilement on va dire ça sert pas grand chose donc j'ai la liste j'ai un titre de niveau 1 word comme 2016 un titre de niveau de niveau 2 ainsi tu te dis en wordpress ainsi de un titre de niveau 2 et après le problème c'est que je passe de 2 à 4 ça c'est une rupture dans la hiérarchie je dois passer de 2 à 3 pour ça parce qu'en fait aussi les personnes qui sont sur les lecteurs d'écran sont capables de sortir toute cette table des matières en gros comme une table des matières la liste des titres et peuvent naviguer de titres en titres aller directement sur le titre 1 le titre 2 ils écoutent et en fait ils voient un peu ce qui les intéresse ils ont aussi en fait dans leur tête une vision de votre contenu de votre page voilà une petite organisation donc là il y a des choses à faire à changer vous passez ces things max sur sur les pages type et vous voyez un petit peu ce qu'il y a à faire donc c'est vraiment une hiérarchie globale de la page n'est pas qu'une hiérarchie dans le contenu que vous avez rédigé c'est vraiment une hiérarchie globale donc au moins un titre de niveau 1 alors en accessibilité on en accepte un voire plus en sceau il y en a qui disent il m'en faut qu'à bon on discute votre souci pas de rupture mon h2 su d'h4 et une hiérarchie cohérente après il faut voir si quand vous avez créé votre hiérarchie elle est cohérente est-ce que c'est un titre un sous titre est-ce que c'est bien sous titre de ce titre après c'est à vous de voir de réfléchir voir si c'est ok alors il me faut deux moyens de navigation parmi le menu plan de site moteur de recherche pourquoi parce que même si vous avez travaillé votre architecture de contenu vous avez fait vous avez vraiment travaillé ça architecture vous avez fait des tests des cartes sorties tout ce que vous voulez il y aura toujours peut-être peut-être une personne qui va pas comprendre votre structure donc il faut lui donner un autre moyen de naviguer sur votre site un moteur de recherche il ne comprend pas un plan de site donc souvent à l'étroit alors pour les thèmes que j'ai testé wordpress en fait on a le menu navigation et le moteur de recherche puisque moteur de recherche et peut être généré et généré plan de site est souvent un plugin qu'on va rajouter ou quelque chose qu'on aura créé nous-mêmes alors là j'en profite pour vous dire attention à la navigation les menus de navigation que vous mettez en place sur vos sites on a beaucoup de méga menus maintenant on a fait sur certains projets d'affaires des tests utilisateurs même si on est pas non voyant il y a des fois c'est incompréhensible donc si on vous dit moi je suis voyante je comprends pas bien votre menu de navigation les travaux il y a trop d'infos je sais pas comment faire pensez que les personnes qui sont sur élector des grands ça va être encore pire donc vous voyez au niveau ergonomie au niveau travail sur la navigation faite faite faite ce travail là il est important pour tout le monde en fait donc deux moyens alors et au même endroit et sur toutes les pages j'ai testé des sites où en fait je n'avais le moteur des thèmes ils avaient le moteur de recherche que sur les pages articles mais quand je suis sur ma page accueil si je comprends pas déjà comment ça fonctionne mais il me faut le moteur dès la page accueil vous voyez donc en fait et puis après il faut que je me repère toujours de la même manière sur mes pages même endroit sur toutes les pages alors là on a un cas très fréquent wordpress ou pas wordpress de lien c'est bien les icônes c'est vachement bien tout ça mais alors derrière on a des liens vides donc aller à la chasse au lien vide c'est à dire un lien vide c'est un lien à une balise à mais qui n'a pas d'intitulé donc votre lecteur d'écran va dire lien lien lien lien mais lien de quoi je ne sais pas donc ce qu'on va faire c'est qu'on va rajouter des choses des choses en fait derrière au niveau du code donc par exemple vous êtes sur extension web développeur vous pouvez utiliser le menu entouré événement personnalisé et entouré par exemple les a et les button alors pourquoi a et button parce que aussi les icônes par exemple ici je vous ai donné un icône pour aller en haut la page souvent on les voit maintenant ces petits icônes en plus ils flottent ils disparaissent quand on a haut ils apparaissent quand on est en bas c'est un lien vers un lien interne c'est vers une ancre pour aller en haut donc c'est bien un lien je me déplace en haut de la page un lien c'est pour aller sur notre page ou pour aller à l'intérieur d'une page à côté j'ai le super icône en burger pardon en burger lui en fait si je clique dessus c'est pour faire apparaître un menu c'est pas pour aller sur notre page ou sur l'intérieur de la page donc en fait je déclenche une action je peux faire la différence entre un a et un button à ce moment là j'utiliserai un button donc en fait je me suis dit je vais aller en fait visualiser bien ça cette fonctionnalité si j'entoure les a et les buttons sur ma page je vois des rectangles de rouge qui s'affichent pour visualiser tous mes icônes et les bottons si c'est intégré avec des bottons si par exemple vous voyez sur votre page un icône qui n'est pas entouré ça veut dire qu'il n'y a ni a ni bottom derrière peut-être un span rappelez vous il y a des gens qui naviguent uniquement au clavier par la souris si clavier si navigue au clavier ils vont utiliser la touche tab tab tab pour aller d'éléments interactifs en éléments interactifs spanne n'est pas un élément qui reçoit le focus d'accord non qu'en fait si vous ou une dive si vous intégrer en fait une icône avec une dive une span je pourrais jamais y accéder avec la navigation clavier donc là je me pose la question et je vais voir dans le code donc j'inspecte le code avec mon est mon extension firebug et en fait le voilà le premier code que vous avez vous avez un a vous avez une balise a là en fait c'est pour coder intégrer mon petit bouton qui me permet d'aller au-delà page et en fait là ben j'ai bien mon icône avec ma span classe et en fait c'est une icône qui vient de la font font où ils sommes mais j'ai mais oui les textes où il est l'intitulé du lien j'ai rien donc en fait il va falloir quand même rajouter des choses pour indiquer que ce lien permet d'aller en haut de la page comment on va faire donc un lien doit avoir un intitulé de n'importe quelle manière donc à la plusieurs manières de d'insérer un intitulé ici je vous ai donné un autre code en fait c'est le même code mais je vous ai rajouté en fait une ligne span retour en haut de la page mais je ne veux pas le voir moi je ne vois que l'icône mais en fait je vais rajouter un texte qui est vocalisé donc les personnes qui sont lecteurs d'écran vont pouvoir vocaliser vous ne voyez pas donc en fait c'est du texte qui est caché caché intelligemment caché de manière accessible pour que ce n'est pas un disple non disple non on ne va pas l'entendre donc on va utiliser une classe et ici on va utiliser la classe crénuideur texte qui est utilisé en wordpress que vous la que vous voyez en fait dans la génération de code notamment du moteur de recherche il est utilisé voilà donc je vais utiliser cette cette classe vous ne verrez rien vous ne verrez pas la différence mais alors les gens qui écoutent vont entendre la différence ce n'entrape plus un lien mais ça sera un lien retour en haut de la page alors c'est comment fait-on pour intégrer en fait un texte caché on va utiliser une classe screen reader texte et là je l'ai sorti en fait le texte qui est proposé dans mec wordpress.org accessibility voilà c'est une solution en fait s'utiliser un petit clip qui se voit pas il y a d'autres solutions qui permettent en fait de sortir le texte à l'extérieur de l'écran il y a des texte index aussi qui sont utilisés enfin il y a plein de solution mais surtout pas de display none ni de visibilité idane où là vous pensez que vous cachez vous pensez qu'il va être vocalisé et il ne l'est pas donc tu travailles pour rien alors pareil si par exemple vos icônes sont intégrés avec des images premier code j'ai inspecté le code avec firebug et en fait je me suis rendu compte que ce n'était pas une fonticone qui était utilisée mais une image l'image bah souvent l'alternative on la met à vide en fait ce qu'on appelle un lien image c'est un lien qui contient une une qu'une image l'intitulé de lien devient l'alternatif textuel ici bah j'ai pas j'ai pas d'intitulé puisque mon alt est vide donc là qu'est ce que je vais faire et bah en fait c'est très simple je vais renseigner l'alternative textuelle avec l'intitulé du lien qui ne se verra pas mais moi je l'entendrais retour en route page voilà on a bien un lien qui a été renseigné voilà donc là c'est bon j'ai mes icônes j'ai tout ce qu'il faut et au moins j'entends j'entends la signification de chaque lien les titres identiques au lien alors beaucoup là je vais utiliser l'extension web développeur menu info affiché les attributs titel parce que parce que parce que il y a plein d'attributs titel d'accord au secours ouais je vais essayer d'aller plus vite il y a plein d'attributs titel en fait identique au lien et ça bah ça sert à rien donc aller à la pêche au titel identique au lien et vous les enlevez parce que ça sert à rien ça pollue en fait les liens liant la suite vous voulez les améliorer en fait un lecteur des crans il va récupérer une liste de liens liant la suite liant la suite liant la suite pareil je peux utiliser web développeur menu info affiché attributs titel souvent en fait ils sont spécifiés avec un attribut titel là j'en ai pas je me dis je vais quand même aller voir ce qui se passe au niveau du code et en fait au niveau du code bah j'ai vraiment que lire la suite au niveau de l'intitulé du lien donc là encore une fois j'ai plusieurs solutions je rajoute un texte caché pour compléter en fait l'intitulé du lien bonjour tout le monde lire la suite caché écoutez et puis vous avez aussi d'autres solutions je vais rajouter l'attribut titel je reprend en fait bonjour tout le monde lire la suite ou alors un attribut arrière la belle qui remplace en fait le titel cette solution est plus accessible parce qu'en fait il y a des lecteurs des crans qui vont soit lire l'intitulé soit lire le le titel soit lire les deux pour répéter les choses donc ça en fait la deuxième solution est plus accessible parce que n'y aura que arrière la belle qui va être lui ouverture de nouvelle fenêtre alors ça c'est pareil je n'interdis pas l'ouverture de la fenêtre mais faut prévenir l'utilisateur qu'on a changé de contexte parce qu'une personne qui est sur un lecteur des crans on change là on change il se retrouve dans une autre eau glé une autre page il sait de faire bac terminer donc on lui dit on lui dit de ses alors là c'est pareil on va la on va la pêche web développeur info affiché des infos des liens rechargé ta gueule blanche et là j'en ai trouvé au niveau du footer donc la ce qu'est ce qu'il faut faire et bien il faut l'indiquer que l'on a ouvert on va ouvrir une nouvelle fenêtre donc on peut l'indiquer au niveau du titel wordpress c'est l'intitulé du lien je prends dans le titel wordpress nouvelle fenêtre voilà donc là à la fois j'ai la petite infobule pour nous pourquoi pas et puis en plus c'est vocalisé ensuite alors là aussi très important visibilité du focus clavier je suis à la navigation clavier je tabule j'utilise à tout stop tout stop tout stop je navigue d'éléments interactifs en élément interactif si vous me supprimez le outland je suis perdu je ne vois rien je ne sais même pas où je suis donc vraiment alors ça c'est souvent enlevé parce que c'est pas beau parce que vous n'aimez pas parce que quand on met la souris bon des tas de raisons mais moi je peux plus naviguer au clavier donc il faut faire quelque chose faut aller à la pêche par exemple au focus outline non parce que j'ai besoin de ces pointillés j'ai ou autre chose mais montrez moi où je suis parce que sinon j'ai beau tabuler et je ne vois rien je sais pas où je suis donc ça veut dire si je tabule au clavier et que je veux déclencher activer un lien ben comme je sais pas où je suis je sais pas quoi faire j'appuie peut-être que ça va marcher voilà et aussi et prenez l'habitude de quand vous utilisez du 2 points au verre faire aussi du 2 points focus parce que les personnes aussi qui navigue au clavier on doit aussi à ce genre de feedback pourquoi pas donc c'est un réflexe de power de point focus dans les css mener une navigation vous devez aussi pouvoir le manipuler uniquement au clavier et ça souvent dans les thèmes je teste je vais voir tiens il ya un menu déroulant est ce que si j'arrive avec ma touche tap tap tap je rentre dans mon menu non sous menu et puis je continue etc pour pouvoir en fait déclencher un lien il faut le faire faut le tester parce que je dois pouvoir naviguer faire tout ce que vous faites à la souris les liens d'évitement c'est pareil quand vous êtes à la navigation au clavier vous voyez que vous s'utilisez tap tap tap et si vous avez un méga menu pour accéder au contenu je vais me taper tous les liens du méga menu pour arriver au contenu donc on a une réaccessibilité qui consiste et d'ailleurs vous le voyez dans les thèmes il ya pas mal de thèmes qu'il propose le thème par défaut de voir presque le propose vous avez un skip tout content c'est un lien interne qui permet d'aller dans une zone de contenu la zone de contenu vous l'avez précisé avec un idée contenu ou alors avec une encre comme vous voulez donc je tabule et j'essaie de voir si ce lien le premier lien sur lequel je tombe et si je l'ai ben c'est bien donc je vais intégrer ce que si je les pages l'intègre donc c'est un lien c'est un lien interne on fait dire à la page et j'ai en fait je vais attaquer le main la balise main avec un idée content et un rôle main ça doit être le premier élément interactif alors vous pouvez rajouter des allers au menu ou aller au compte ou à la recherche si si en fait ils sont loin du début de la tabulation non moins aller au contenu attention à traduction vous avez vu c'était pas traduit là donc je suis bien sûr un thème c'est tout est traduit mon skip tout content n'est pas traduit attention parce que si je j'ai un mélange si ma page est en français et si tout d'un coup on me rajoute un texte en anglais il faut que je préviens de l'utilisateur en fait là c'est une erreur c'est pas volontaire il faut qu'il soit traduit ce skip tout content bien sûr vous avez vu que le lien ici il apparaît quand je suis à la navigation au clavier que à la navigation au clavier donc il est caché et puis quand j'arrive quand je au focus il apparaît donc techniquement comment on fait cette chose là ben vous reprenez script reader texte puisqu'en fait c'est un lien caché que vous avez caché et au focus vous le faites apparaître donc ça c'est pareil c'est un code que j'ai récupéré aussi de mec wordpress alors les formuleurs de recherche c'est pareil par défaut la génération de wordpress vous génère un bon formulaire de recherche avec tout ce qui va bien et puis ça vous plaît pas donc vous le changer alors par défaut en fait quand j'affiche les attributs title je dois avoir affiché recherché car il y a un attribut title qui a été inséré souvent on le supprime cet attribut title parce qu'il plaît pas et puis on se trouve avec un code où on a changé un petit peu le contenu on a un label etc un input mais alors il faut absolument qu'il y ait un lien entre l'étiquette input et je devais je vais devoir rajouter en fait des attributs forts et idées pour faire la relation entre l'étiquette input parce qu'en lecture des crans je vais entendre zone d'édition zone d'édition zone d'édition mais comment je vais remplir mon formuleur je ne sais pas mon classe un moyen de faire de lien entre le label et là je vais avoir recherché zone d'édition donc je vais passer je vous laisserai regarder les choses par vous même sur les slides certaines certaines autres solutions les couleurs vous avez en fait une extension de bruit kag contraste checker que vous pouvez installer et là en fait sur des pages où on va vous indiquer qu'il y a si un problème de contraste de couleur ou pas là ici en fait sur j'ai du bleu vert sur du gris clair donc en fait il y a un algorithme automatique qui vous dit ben voilà la couleur du texte et la couleur du fond ben là ça passe pas vous avez des petits rouges qui des écrocs qui s'affichent donc il y a un petit problème de contraste donc l'algorithme de contraste prenne en compte aussi les personnes qui sont d'altonienne 8% de la population masculine en france moins de 1% pour les femmes c'est pas négligeable vous avez un super outil en ligne tana guru contraste finder vous donnez le code du texte vous donnez le code de la couleur de fond il vous dit ok ça passe pas mais moi je vais vous donner des solutions en fonction je vais essayer de vous rapprocher de vos couleurs et de vous proposer des solutions qui sont valables qui respectent le contraste et après vous jugerez si ça vous va ou pas alors je suis très sur des sur des projets où au départ les graphistes était récalcitrant sur tous ces problèmes de contraste et puis s'ils sont mis en fait sur un projet ils ont ils ont vraiment trouvé des couleurs avec un contraste respecté le résultat est super et sur les test utilisateurs les gens ont vraiment aimé le design donc comme quoi c'est possible il n'y a pas de soucis il y a visite dans un contenu alors là je parle pas des liens qui sont dans les menus je parle des liens qui sont noyées dans votre contenu de page il faut qu'ils soient visibles on va dire alors si on se dit est ce que je mets un souligner je mets pas de souligner etc nous en fait on doit pouvoir tester le contraste entre la couleur qui est à côté et le lien donc on prend en fait la couleur verte on dit on compare en fait avec la couleur grise qui est juste à côté et je dois avoir un ratio 3 si j'ai pas ratio 3 c'est qu'en fait le lien ne se ressort pas assez par rapport au reste du contenu d'accord donc en fait ce qu'on fait alors là je mets un garde par rapport à tous les gens qui sont en contraste élevés la couleur elle va disparaître ça va être remplacé par un autre couleur et la personne qui ne voit plus les couleurs va vraiment plus voir votre lien noyé dans le contenu donc qu'est ce qu'elle va faire à la prendre sa souris puis elle va aller chercher alors là j'ai ma cliente là qui travaille je l'ai carrément perdu je vais pas souligner les liens elle me dit je dois aller je sais que quelque part j'ai un lien et je la regardais avec sa souris à mon anée fait ah j'ai le pointeur à la toilière comme ça donc dans ces cas là ça peut être intéressant de souligner on va dire que les liens dans le contenu noyé dans le contenu qui soit quand même souligner voilà mais le contrat le le le en fait le test qu'on a c'est un contraste de couleur donc si le contraste est suffisant mais il y a encore une fois c'est toujours un compromis entre ce que nous demande les référentiels et la vraie vie qu'est ce que qu'est ce que les utilisateurs font de tout ça on se rend compte que des fois il y a des adaptations à faire alors je vais finir avec ça vous avez quelques autres tests en fait que vous pouvez faire inspecter le code css et vous allez voir alors pas de test justifié les gestes justifiés à gauche et à droite vous insère des espaces irréguliers entre les mots les personnes qui sont dyslexiques pour avoir des problèmes de lecture on l'a accentué un peu leurs problèmes à ta ligne à suffisant entre les lignes les lignes collées pour nous c'est palisible espacement suffisant entre les paragraphs donc là on a alors le référentiel demande quand même un espacement je trouve un peu élevé mais au moins il faut qu'on voit qu'il y a des paragraphs parce que si tout est collé bah au niveau de la lecture même pour nous il n'y a pas de soucis bah on voit pas on voit pas bien largeur des textes raisonnables alors il y a donc dans les références on demande 80 caractères sur une ligne ça paraît peu en fin de compte plus en plus de 6 6 mètres et d'ailleurs tomah nous on a nous a montré en fait un design où le contenu était centré il n'y avait plus du tout de choses à droite des boutons qui perturbait bah en fait avec ça on peut on peut aller autour de 100 caractères et en fait avoir des lignes qui sont correctes et même pour nous avoir des grandes lignes je sais pas mais c'est pas très confortable on va dire pas du alors pas d'une unité px au fait des e m ou des rem pas du px px c'est pas considéré par eu comme une unité relative donc on ne peut pas avec nos navigateurs augmenter la taille des textes uniquement ça ne s'augmente pas donc voilà on arrête avec l'unité px et puis pour finir la balise html doit avoir langue égale le code de votre de la langue principale de votre site de vos pages c'est important parce que l'électeur d'écran qui arrive va dire bah voilà je suis en français je parle français j'ai un accent français si vous utilisez par exemple ça j'ai déjà vu sur des thèmes un thème qui vient de suede par exemple qui est créé en français vous imaginez le lecteur qui est capable de créer d'avoir un accent un accent suédois va vous parler en français avec un accent suédois je prends de l'anglais je j'ai une page en français je lui dis en bah je vais prendre l'accent anglais pour parler français faut être cohérent donc si je lui dis je suis en français il parle en français si à un moment donné je change de langue je lui dis et changera d'accent contenu de la balise title doit être pertinent mais ça revient avec le sceau il n'y a pas de soucis c'est la première chose qui est lue par l'électeur d'écran donc il faut que je sache quelle est le contenu de la page je dois valider mon code lancer le validateur w3c pour voir s'il n'y avait pas des grosses erreurs des balises qui n'ont pas fermé des balises qui doivent pas être contenues les uns dans les unes dans les autres attention à la traduction vous avez vu à mon clip skip tout content qui n'était pas traduit donc là il faut faire des efforts de traduction sur les thèmes des solutions mais comment on va faire pour modifier vos thèmes si c'est un thème sur mesure ben je peux par exemple si j'ai des choses à modifier et que je sais que je vais avoir toujours ces choses là à modifier je peux faire des mules plug-in autour et puis mes solutions d'accessibilité comme ça je me fais un jeu de mules plug-in et que j'aurai toujours à disposition ensuite les tailles existant gratuit acheté ben à vous de voir est-ce que vous pouvez faire un thème enfant parce que parce que je le vois là je le vois le thème enfant est-ce que je peux faire un thème enfant ce que c'est valable ou alors vraiment j'ai beaucoup de modifications à faire je suis un copie du thème voilà faut savoir doser voilà bon je vais m'arrêter parce que je vois le stop là après je vous ai laissé ouais ouais ouais ouais ben c'est bon là j'ai je vous ai donné en fait des liens il y a des choses intéressantes à les voir sur internet alors avec gaël on a participé à un séminaire on a été invité par brine et donc plus les gens qui font accessi web pour justement faire un comparatif au grail a fait une une conférence une autre conférence mais après on était quatre à en fait étudier ben quatre cms et voir comment il répondait à l'accessibilité donc moi j'ai répondu au wordpress on a vu jumlah avec drupa et on avait spipe donc là en fait vous allez voir je j'ai créé un petit site qui reprend en fait on avait une batterie de test pareil même méthode batterie de test et on voit comment les cms répondent aux problèmes d'accessibilité et là ben vous verrez vous pouvez commenter poser des questions c'est ciblez rédaction de contenu pour les rédacteurs donc ce que vous avez dit les différents défauts d'accessibilité peuvent être un peu partout ça cible la rédaction de contenu vous avez des notices accédés web d'attalants si vous voulez vraiment aborder l'accessibilité de manière plus pédagogique en vain moins technique c'est génial franchement rg2a c'est une référence de français et puis ben wordpress là il y a de l'information à récupérer voilà j'ai fini justement au niveau des thèmes wordpress que vous avez pu tester les thèmes du commerce vous n'avez pas dit s'il y avait vraiment beaucoup de problèmes alors ben voilà tous les problèmes que je vous ai montré là je les ai trouvés donc beaucoup liens vides alors les liens vides c'est voilà ça c'est la grande mode on fait des liens vides partout et quel est le surcoût à prévoir au niveau d'une société pour pouvoir rendre ça accessible ben tout dépend des défauts existants s'il y en a quelques ans vous avez vu là c'est pas c'est pas il n'y a pas grand-jefin il y a des choses simples à faire au niveau des thèmes au niveau du design là où ça commence à se compliquer sur les plugins où là il y aurait du travail à faire mais en fait ce qui se passe il y a plusieurs solutions moi quand je travaille sur les projets en fait on démarre début du projet et on forme les équipes on parle d'accessibilité tout le monde par accessibilité après si c'est un site existant à modifier c'est autre chose c'est comme par exemple vous avez un bâtiment vous devez mettre un ascenseur c'est un bâtiment osmane ça va être compliqué si vous créez un bâtiment dès le départ vous voulez vous voulez avoir un ascenseur vous pouvez être au niveau accessibilité ça va être simple plus simple donc ça dépend fait du code existant j'ai pas de règles à donner alors du coup on fait un audit on prend des sites on les audite on dit voilà vous avez tâlé telle chose à effectuer après on fait des budgets voir ce que l'on alors accessibilité amélioration progressive on améliore on y va et c'est pas de t'atteindre la lune dès le départ c'est pas possible donc on y va progressivement il y a plein de solutions ce qu'il faut c'est commencer une seule question mais après tu seras l'expert barre ça pacifique si vous voulez poser plus de questions bonjour bonjour là au fond on a abordé bon pas mal tout ce qui va être le site en général mais on n'a pas du tout vu les formuleurs non surtout ce qu'est validation de formuleurs généralement on a un encadrer rouge assez sympa qui n'est pas visite par les d'altoniens donc qu'est ce que vous vous recommanderiez d'ajouter un encadrer rouge pour les erreurs les erreurs par exemple oui voilà alors un petit icône alerte un point d'intesse d'exclamation en plus ce serait pas mal à côté est ce que vous recommandez de mettre quand même la petite popine qu'on voit des fois en haut indiquant la liste des champs qui peuvent être erroné ou des choses comme ça il y a plein de solutions alors sans les mets en haut sans les mets sous les champs après techniquement on peut relier champs et erreur local vocalement il y a plein il y a plusieurs solutions en fait oui mais oui le rouge petit icône en plus c'est pas mal en fait souvent je me suis retrouvée embêtée parce que par rapport à la maquette graphique je savais pas si je devais utiliser une balise main ou un rôle main et en fait il a récemment je lui ai un problème parce que le h1 était bon bref et donc je voulais savoir s'il fallait que je favorise les balises acheter mes 5 ou est-ce qu'il fallait mieux que je valait pas les rôles arrière en fait ça va te faire vous avez vu main role à main ouais ouais mais là j'ai été j'étais vraiment je pouvais pas faire en fait comme ça donc c'est une div role main par exemple alors oui du coup c'est ce que je préfère et je préfère et rôle main dive role main ouais ouais ouais oui quand on n'est pas html 5 on peut se débrouiller puisque ben la main n'existait pas ben le référencé lg2a demande de le couplage entre la balise et le rôle après super merci beaucoup clair merci