 Bonjour, peut-être bonjour depuis tout à l'heure, il y a certains qui ont fait la suite, d'accord. Alors ce qu'on va faire là maintenant, on va prendre un thème. Alors là, j'ai pris le thème qui s'appelle Lovecraft. Alors pourquoi Lovecraft ? Parce que j'ai cherché un thème simple sur lequel on peut travailler, que tout le monde puisse comprendre en fait, à part rapport officier d'un thème, comment on peut modifier, que ce ne soit pas un thème trop compliqué. Et en plus j'ai trouvé un thème qui a des problèmes d'accessibilité, qui colle vraiment avec ce que je voulais faire. Donc génial, tout va bien. Alors, si vous voulez vous connecter, si vous avez un ordi ou tout ça, l'atelier peut se faire sans jordir, il n'y a pas de problème. Je vous ai mis en fait un site, où l'on ne voit rien du tout. On n'a pas de... Comment je vais... Alors attendez, je vais faire autrement. Je vais essayer de vous écrire des choses en gros. Pour tout vous voyez. Alors, on ne peut pas voir plus en fait. Comment ? En fait, je voudrais que vous voyez cette URL. Alors, je vous explique. J'ai mis en ligne un site WordPress avec Lovecraft qui a des problèmes d'accessibilité. Donc si vous avez des ordinateurs, on peut regarder ensemble quels sont ces problèmes d'accessibilité, vous pouvez aspecter le code, etc. Mais moi je vais le faire aussi. Donc c'est comme vous voulez. Alors, le site il est... On n'a pas un, je peux écrire ? Si ? Je peux ça ? Qu'est-ce qu'on ne peut pas te faire ? Ouais. Alors c'est wp-accessible.fr slash wc... Vous voyez tous ? C'est accessible au fond. Avec des verres, cool. 2018. Voilà. Donc ça c'est le site qui est en ligne avec Lovecraft qui a des problèmes d'accessibilité. Donc on va regarder. Alors moi sur mon site en fait, et tout à l'heure je vous ai parlé d'un outil qui s'appelle Tota11y, que j'utilise énormément pour faire des tests sur les pages. Alors justement, on est sur le site en ligne. Je vais faire des tests. Je vais commencer à vous montrer un petit peu quel est le problème. J'explique là-dessus. Donc ça c'est un outil que vous pouvez installer facilement. Vous trouvez sur le web etc. et qui ça fait sur la barre. Vous voyez en bas, là, ici j'ai des petites lunettes. Et en fait je vais pouvoir tester. Alors là hier je suis des titres, les headings, savoir si ils sont corrects ou pas. Alors là on va faire la page d'accueil et une page d'articles. On ne va pas faire tout ici. Mais déjà on va essayer de voir ce qui se passe. Je peux tester les contrastes de couleur. Mais là je crois qu'il n'y a pas de problème de contraste de couleur, à part le playsolder, encore une fois qui est trop pâle. Mais ça on peut le changer. On sait assez ce que peut changer la couleur du playsolder. On a les liens. On va tester voir si les liens sont corrects. On a les labels dans les formulaires mais on n'a pas de formulaire. Et on va voir si les images ont des alternatives textuelles. On a l'absence de l'attribut alt sur les images. Et on va regarder ce qu'on appelle les landmarks. Alors les landmarks je ne sais pas si vous connaissez un site est souvent créé avec un header, une navigation, un contenu principal et un footer. Maintenant à HTML5 on a la valise header, on a la valise footer, on a la valise main et on a la valise nav. Et en fait il faut qu'on rajoute des attributs spécifiques accessuités parce qu'en fait les utilisateurs de lecteurs d'écran vont pouvoir naviguer de région en région. Au lieu d'avoir à lire le texte du début jusqu'à la fin, ils ont plein de possibilités de naviguer plus rapidement dans les pages. Donc ils vont pouvoir accéder directement au footer, accéder directement au contenu, accéder directement à la navigation parce qu'on a ramé du code, les landmarks. Donc là on va déjà commencer à voir un petit peu quels sont les problèmes. Alors si je clique sur reading, on bat, je ne sais pas si vous voyez, après du coup ça va giner. Regardez, il me donne la hiérarchie des titres. Ça commence par un titre de niveau 1, il faut toujours un titre de niveau 1 sur toutes les pages, d'accord ? Alors on préconise un seul. Ça c'est aussi une demande des utilisateurs de lecteurs d'écran, il va vraiment un seul. Deuxième c'est quoi ? Un 4, un H4. Est-ce que ça vous paraît logique ? Est-ce que ça vous gêne ? Ça vous gêne pas ? En fait on s'en fout, c'est pas un problème. C'est un problème ? Oui c'est un problème. Après un change, il va y avoir un H2, il ne faut pas avoir un H4. Alors vous imaginez que le H4, c'est conférence atelier open bar à 11 Y. Pourquoi j'ai mis un H4 là-dessus ? Tout simplement, mais un P, ça suffit largement. Ouais, donc voilà, ça suffit en fait. Il n'y a pas besoin de mettre des titres partout. Il faut utiliser des titres pour la hiérarchie du contenu. Donc ça soit intéressant, d'accord ? Donc là il va falloir que je corrige ça et mettre un titre de niveau 2. Après on a, comme je suis sur la page d'accueil, c'est une page d'index qui me présente les deux articles, ça reste cohérent. En fait j'ai du H2 pour améliorer. Ensuite j'ai encore du H2 et ensuite c'est bon. Alors, c'est là qu'il va falloir discuter. Vous avez vu que sur archive, sur catégorie, sur meta, j'ai du H3. Ça vous paraît normal ou pas ? Qu'est-ce que vous mettriez ? Parce que si je dis que c'est un H3, ça veut dire que ça dépend du H2 du dessus. Donc ça veut dire que, c'est ça que ça veut dire les titres ? Donc archive dépend de cette... Bah non, c'est pas logique. Donc voilà, quand vous vous travaillez, alors il y a une question, tout d'ailleurs quelqu'un m'a dit oui on a HTML5, on allait outline, ah oui voilà. Ça marche pas. Donc il faut vraiment travailler sur les titres de début jusqu'à la fin des pages. Ça marche pas. Donc on ne peut pas y couper. Donc là il faut que... Si vous voulez mettre des titres là-dessus, ça va être du H2. Puisqu'en fait je ne peux pas faire dépendre ça sur l'article. Ça veut dire que ça, c'est contenu dans l'article. Alors donc du coup, on va voir tout ça. Donc je vous fais un petit check avec cet outil de voir ce qu'on peut faire. Si vous avez des questions, n'hésitez pas à m'interrompre. C'est pas de souci. Les landmarks. Alors les landmarks, eh ben j'en ai pas. Parce que je vois rien. Je ne vois rien du tout. Et quand on va en fait... Alors là je vais vous faire... On va aller sur le site de services publics qui a un bon niveau d'accessibilité. Forcément, ils l'ont travaillé. Ça s'adresse à toute la population. Donc voilà. Et si je l'utilise de ma moutille. Ici, les landmarks. Voilà j'en ai pas mal. Et j'ai surtout les cinq principaux. C'est-à-dire... Alors vous voyez peut-être rien du tout. Mais je dois avoir la bannière. Je dois avoir la navigation. Je dois avoir la zone de recherche. Parce que je dois pouvoir accéder directement au moteur de recherche. Puisque je peux naviguer de région en région avec un lecteur. J'ai la main. La zone main de contenu principal. Et en dessous si je vois ça. J'ai le content info. Qui doit être en dessous. Qui représente le footer. Donc cinq zones. La référentielle demande à avoir au moins ces cinq zones de base. Donc avec total 11 Y. On a l'information. Déjà quoi d'autre. Alors c'est ce qu'on va voir. D'accord ? Donc voilà. On a regardé un petit peu quelques soucis. Regardez quand je mets ma souris sur le titre. J'ai un title qui s'affiche. D'accord ? Ça a jamais été obligatoire. On n'est pas obligé de mettre des titles sur tous les liens. Quoi ça sert à une infobule ? C'est pour rajouter de l'information. Parce que un lien est imprécié. Mais si c'est pour répéter la même chose. Ça sert à rien. Donc là on a une information supplémentaire. Mais on peut s'en passer. Là c'est pareil. Si je mets la souris. J'ai exactement dans le title le titre. Ça sert à rien. Ça ça fait partie des choses qu'on va enlever. Il faut un titre c'est pas obligatoire. Alors sur WP Normandie. Pourquoi je vais là ? C'est qu'en fait Joël qui fait partie de l'association m'a demandé d'écrire un article. Et je lui ai... Je ne comprends pas où on est là. C'est pas ça. J'ai peut-être mis le truc. Est-ce que j'ai mis ? Oui je crois que c'est mis dans le journalant. C'est triste. Oui. Alors sur le site qui est en ligne. Je vous ai mis un lien sur un article. Sur un article que j'ai écrit. Et qui regroupe tout l'école. Que l'on est censé corriger aujourd'hui. Alors on a une heure. On va pas le faire. Vous avez déjà un support de tous les codes de base que tout thème devrait avoir. Si vous allez là-dessus vous avez le lien dans l'article Améliorer l'accessibilité. Je vais y aller. Je vais voir un nouvel anglais. Je vais y aller. Et là on va voir. En fait c'est la checklist que je vous propose mais on va pas tout faire parce qu'on n'aura pas le temps. Mais là vous avez la checklist. Déjà, qu'est-ce qu'il faut faire ? Il faut valider son code. Est-ce que vous êtes d'accord avec ça ? À quoi ça sert ? Ça sert à être compris par un maximum de logiciels qui seraient rajoutés à votre site pour pouvoir lire votre site. Donc si tout le monde parle le même langage on est tous d'accord et on va pouvoir, les utilisateurs vont pouvoir accéder à votre site sans problème. Alors attention j'exagère. En fait quand on garde les référenciaux il y a une petite liste à dire. Des bales ouvertes fermées. Si c'est ouvrant fermant, il faut la fermer. Vous allez voir que là il y en a une, elle est ouverte, elle n'est pas fermée par exemple. Des balises non obsolètes. Des identifications uniques. Les idées uniques. Les choses de base, les images et les IMG doivent absolument avoir un attribut haute même s'il est vide mais il doit être présent. Et ça le validateur il vous le dit. Par exemple vous avez des implications par exemple on ne peut pas mettre de div dans un bouton par exemple. Donc ce sont des combinaisons que l'aspect n'accepte pas. Donc ça on les corrige. Voilà ce genre de choses. Après il y a des erreurs qui n'impliquent pas la structure on va dire. On voit et si il y a des choses on les laisse. Les Warnim on les laisse. Vous voyez en fait c'est de l'implication c'est des balises correctes des bons attributs, des choses qui ne sont pas obsolètes la bonne imbrication de la logique. Tout ça c'est du bon sens. Toujours du bon sens. Exhibité c'est que du bon sens. Donc ça veut dire qu'il faut que je commence à valider mon code. Alors ici je vais faire eh bien nous sommes en ligne je vais faire le test sur la page d'accueil et j'ai bien sûr mon petit outil web developer que j'ai installé là dans le tools vous avez une validation HTML. Donc ça c'est des outils intéressants à mettre en place. Alors je suis sur Firefox mais il y a une chose au Chrome. Pourquoi je suis sur Firefox ? Parce que j'utilise un lecteur d'écran NVDA qui est gratuit que vous pouvez installer sur votre ordinateur qui est facile à installer en 2 secondes NVDA. Qui est franchement facile à installer quand je fais des formations on a même qu'il installe pendant que je parle d'utilisation et j'entends le lecteur. Donc vous voyez c'est très simple. Donc c'est le lecteur d'écran. Je ne sais plus pourquoi je dis ça. Oui merci. Parce qu'en fait les lecteurs marchent avec des couplages de navigateurs et en fait NVDA marche très bien avec Firefox. Marche de mieux en mieux avec Chrome mais on sait qu'ils marchent très bien avec Firefox. Donc les utilisateurs vont choisir des couplages sur les iOS ou les choses comme ça vous avez VoiceOver native depuis toujours. Et donc c'est Safari, VoiceOver, NVDA. J'ai lancé en fait la validation sur la page d'accueil et je vais regarder. Alors vous voyez peut-être rien. Je vais vous dire. Et voilà j'ai une première erreur qui dit que dans un bouton je ne peux pas mettre de div. Donc ça je vais aller voir quand même pour le corriger. En fait on va voir que dans le bouton on va remplacer la div par une span et ça va marcher. Ensuite on va regarder j'ai une balise qui n'est pas fermée. En fait il y a une div dans le bouton qui n'est pas fermée. Donc vous voyez il faut garder tout ça. Ça c'est de base. Des erreurs qui peuvent être faites et que vous faites peut-être pas mais comme nous ne sommes pas, je dis des robots nous sommes amenés à faire des erreurs. Donc l'évalidateur important. Il y a une image sans alt. Il y a une image qui n'a pas d'attribut alt. Donc là en fait quand vous vous tombez à un lecteur d'écran, ce qu'il va indiquer c'est le nom du fichier image. Vous imaginez à écouter. Ça veut pas dire grand chose. On va entendre le nom du fichier image. Alors que si c'est une image de décoration et là actuellement c'est une image de décoration, je vais mettre une égale guillemets, guillemets, alt-vid, ce qu'on appelle un alt-vid. Et là le lecteur va faire comme si la balise EMG n'existait pas. Il va rien dire, il va la zapper. Très bien c'est de la déco. Donc je n'ai pas à rajouter du bruit pour tous ces gens là. Il faut vraiment aller à l'essentiel. Sur un logo vous n'allez pas mettre logo. Vous allez mettre le nom du site. Souvent le logo est cliquable. Donc là le logo est une image cliquable. Donc le but c'est d'aller à l'aide d'accueil. Donc l'alternative pour le coup ça ne va pas être logo, ça va être le nom du site ou je peux rajouter accueil si je veux. Vous voyez c'est... Et puis on rajoute jamais le mot image dans les alternatives. Parce qu'un lecteur d'écran dit graphique. Dès qu'il tombe sur EMG il dit graphique. Donc c'est pas la peine de vous de rajouter des choses. D'accord, vous allez à l'essentiel. Il faut vraiment aller à l'essentiel parce que le lecteur. Donc un lecteur se base sur votre HTML. Donc il vous faut un HTML pur qui respecte les spécifications du HTML et crée dans le dv3c et là vous êtes déjà avec un bon niveau d'accessibilité. Ouais, donc là voilà en fait et j'ai un ID un ID qui est dupliqué. Donc ça il faut que je le corrige dans mon thème. Alors OK. Alors on va voir ça au fur et à mesure après. Ça va ? Vous me dites un, vous m'arrêtez vous me posez des questions. Alors ça c'est comment dire ? C'est un bouton. Alors ça c'est un code qui a été fourni par le développeur de thème. Et je vais vous montrer. Je vais aller chercher. Donc là je vais me mettre en local. Je vais aller chercher le thème. Je vais vous montrer les fichiers. Alors Lovecraft Alors en fait Ici en fait le Lovecraft a redéfini le moteur de recherche par défaut en rajoutant un search form. Pour ceux qui développent les thèmes un search form ça va refaire le code de base du moteur. Donc si j'ai dit en fait le search form regardez comment c'est codé. Vous voyez ça ? Regardez déjà la div dans le bouton alors que c'est un bouton type submit c'est à dire que j'ai le champ de saisie et après j'ai un bouton pour valider mon formulaire. Regardez ce code. Il y a rien qui vous j'aime par rapport à ce voilà le validateur il me l'a dit. La div n'est pas fermée. Et dans un bouton on n'a pas le droit de mettre une div. Oui. Il m'a dit quand j'ai fait la validation il me l'a soulignée. Et le code ça passe. Donc là ce que je vais faire là j'ai le Lovecraft. J'ai fait un thème enfant d'accord ? Et maintenant je vais modifier le thème enfant d'accord ? Et au fur et à mesure on va voir que les choses ça m'éliore. Alors par contre je suis un changeur je ne sais pas je vous montre en fait ce que j'ai fait dans les thèmes j'ai créé un Lovecraft Tirit Child ça va avec le style et puis le fonction de base et à chaque fois que j'ai quelque chose à modifier dans un fichier je le mets dans mon thème et je modifie. Donc là le search form il faut que je l'ai mis dans mon thème enfant et dans mon thème enfant voilà je suis allé modifier search form et bien sûr j'ai mis un span que j'ai fermé donc d'accord la balise est bien fermée et là pour le coup j'ai plus l'erreur. Je pense que dans un bouton on ne peut pas mettre voilà ce genre de choses ouais comment tu le gères les sévères qui sont générées par du code qui est injecté par des plugins ça peut être qu'il n'y a pas la main et bien voilà donc ce que j'ai disait tout à l'heure c'est qu'on a assez nos développeurs de plugins nous ont ouvert la recode avec des hooks tout va bien sinon un patch js il faut que ça va faire parce qu'il faut pas quand il faut contacter le développeur bien sûr oui bien sûr oui et après on essaie de savoir si il va modifier je suis en train de toucher je ne sais pas attend le lecteur va réfecter la modification sur la valise alors le js en fait il va modifier le DOM voilà et le DOM est relu c'est ça qu'en fait quand on recharge la page on a un plugin qui va pas bien avec un code qui va pas bien on a un js qui modifie le DOM au chargement le lecteur arrive et a le DOM corrigé c'est ça qu'il faut faire en fait quand tu charge c'est au chargement de la page c'est le DOM final et là il n'y a pas de soucis donc voilà quand on a on peut pas alors il y a des jd développeurs sympa alors j'invite tous les développeurs de plugins à ouvrir leur code parce que même si ils ont prévu l'accessibilité l'accessibilité évolue on a peut-être des choses à vouloir améliorer il n'y a rien de figé en accessibilité comme dans d'autres matières donc laissez nous la possibilité de proposer des modifications pour améliorer c'est compliqué alors donne-moi un exemple de carte par exemple il y a certains logiciels qui sont plus ou moins accessibles par exemple c'est une carte et j'ai des points alors quand on essaye parce que le problème de ces plugins c'est la navigation aux claviers vous savez tous naviguer aux claviers il faut que j'arrive à faire la même chose qu'avec un clic quand vous êtes totalement coincés ce qu'on préconise c'est de créer une liste équivalente en texte de ce qu'il y a dans la carte et là t'as l'info et ce n'est pas totalement gênant je veux dire qu'il y a des gens qui n'ont pas de problème vont préférer avoir l'usage de cette liste ou l'usage des contenus voilà si on va pas s'acharner sur un truc on n'y arrive pas mais si j'ai l'équivalent accessible c'est bon et on se rend compte que c'est même les gens préfères avec les bonnes balises avec le sens qui va bien dès que c'est du HTML c'est beaucoup plus simple si vous avez un plugin ne vous acharnez pas si vous avez la possibilité de manière ergonomique si le site reste beau utilisé pour tout le monde si vous avez l'équivalent il n'y a aucun problème après si vous trouvez que c'est trop lourd parce que vous dites la formation est redondante faites des pliers des choses qui s'affichent à la demande du contenu qui s'affiche que je cache etc et qui sont utilisés par des gens qui en ont besoin il y a plein de solutions qui ont travaillé sans imagination et trouvent des solutions et on en trouve donc voilà donc là j'ai modifié le search form je l'ai mis dans mon thème enfant et quand je regarde le code dans mon thème enfant si je l'inspecte j'ai bien en fait pris en compte il a pris en compte mes modifiés alors vous n'allez pas voir il faudrait que je précise à fond mon bouton avec mon span puisqu'en fait il a repris le search form du thème enfant que j'ai modifié d'accord on va travailler au fur et à mesure qu'on voit des erreurs on va travailler comme ça chose importante j'ai jusqu'à quelle heure d'accord ouais super alors après j'espère que la voix va tenir euh donc euh qu'est-ce que je voulais ah ouais un autre truc super important mais super ça n'a l'air de rien il faut indiquer la langue principale de la page dans l'HTML, langue la vraie langue donc j'ai dit ça parce qu'il existe sur le web des sites qui sont en français avec un langue en d'accord ça existe moi je peux vous en montrer il n'y a pas de soucis il va arriver et il va vocaliser il va prendre l'accent anglais pour parler en français c'est inaudible on en laisse pas possible donc voilà c'est tout bête mais en fait dans vos thèmes alors là il est respecté l'offcraft est tout à fait respecté alors ça c'est dans le fichier aider alors je vais tourner comment je vais faire alors pardon il vous faut il vous faut alors le nojies la classe nojies ça sert à rien enfin voilà c'est pour le thème mais surtout c'est html avec le PHP injecté ici langue attribute et mettez pas fr mettez ce que vous avez mis dans l'aluminum parce que ça en fait c'est une fonction qui va aller vous avez fixé dans votre administration WordPress dans les réglages généraux si je vais sur euh local si je vais dans mes paramètres mais ça c'est super important parce qu'en fait on a des décalages entre si le tel fiche il est chose si après vous êtes sur des pages différentes avec des langues différentes donc ici réglages généraux c'est ici que ça se passe vous avez la langue je sais pas si vous me voyez vous avez la langue de site c'est en français le langue attribute que j'ai injecté dans le thème PHP va reprendre ce qu'il y a là donc assurez vous que vous êtes en français ici hein et ben en fait alors après ben tout dépend des plugins comment c'est géré et ben après en fait il faut que chaque page ait son langue changée donc après vis-à-vis du plugin comment c'est fait je sais pas trop ça se fait ça il n'y a pas d'un voilà d'accord ouais d'accord ben c'est la réponse à la question voilà d'accord donc plus on va chercher des choses dans l'admine moins on mettra de code direct de toute manière ça c'est la logique WordPress faut pas qu'on essaye d'administrer un maximum de contenu pour pouvoir récupérer et pour pouvoir injecter mais ça le langue quelque chose il faut qu'il soit présent et cohérent ça c'est à vérifier faire attention ensuite ce qui est important aussi c'est de proposer des titres pertinents euh des titres de pages donc là c'est pareil je vais revenir sur ça alors le titre de la page c'est ce que je vois dans mes anglais la baliste title d'accord il faut qu'elle soit cohérente ça t'a dire qu'est ce que c'est qu'une bonne baliste title ça indique le contenu de la page quand on est sur une page d'accueil ça explique le site le nom du site ou un petit slogan et quand vous rentrez dans une page et ben en fait allez j'y suis oui j'ai accessibilité numérique comment reprendre ça reprend le titre et ça rajoute le site ça en fait c'est fait automatiquement par WordPress à condition que vous ayez mis des choses qui vont bien dans les fichiers d'accord après vous pouvez le changer avec un outil de référencement style yost etc vous pouvez ou généralement changer cette génération title mais pour que tout ça ça fonctionne en fait il faut que vous ayez dans le thème dans function que vous ayez cette ligne là à thème support title tag qui part défaut en fait va vous générer un title et bien sûr dans le thème vous avez le WPED qui récupère tout qui va lancer qui va générer tout ce qui va bien vous faites déjà ça non voilà donc un title ça se travaille pour le référencement et pour accessibilité c'est la première chose qui est dite par un lecteur d'écran par exemple donc il faut que comment alors c'est un peu la même chose non peut-être pas au niveau référencement non puisqu'en fait on peut agir directement dans le contenu je prends le titre achat qui est donc contenu je le mets en premier et après je mets le nom du site quand je suis sur une page d'accueil c'est le nom du site peut-être un slogan en plus ou la description qui est générée automatiquement d'ailleurs donc ce qui est générée automatiquement par un principe alors tout souvent on voit le nom du site puis le titre c'est un nom non puisqu'en fait la chose la plus pertinente n'est pas en premier puisqu'en fait ce qui est dit c'est toujours le nom du site donc en fait ce qu'il faut c'est reprendre le titre du article c'est ça qui est au dos la page c'est ça qui est le plus pertinent et c'est la même chose en référencement parce que je dis ça marche aussi par défaut voilà alors on a vu le titre quelque chose de très important aussi là en fait j'ai rien à faire, elles ont tout fait tout va bien j'ai rien à modifier en fait là ce qu'on est en train de faire c'est un peu ce que fait l'équipe WordPress quand vous soumettez un tel vous dites j'aimerais bien avoir le label accessibility ready ce qui existe et en fait là on est en train de faire une check du tel et voir si je peux mettre le label ou pas et si j'ai des choses à modifier ou pas donc là on peut pas mettre le label on a vu donc on modifie des choses et en fait c'est à peu près la liste sur l'article qui est plus complète cette liste là qui correspond à la review du thème pour le label alors qu'est ce que le zoo ah oui un truc très important sur le site en ligne je vous ai mis tout ce qu'on va faire un truc super important c'est ça rendre possible aux hommes sur toutes les sur toutes les cas de forme le viewport pour ceux qui font du responsive alors l'offcraft pour le coup j'étais contente de choisir l'offcraft vous allez voir il fait pas ce qu'il faut donc c'est bien de tomber sur un exemple qu'il faut modifier alors je vais revenir sur le thème et là je suis toujours sur mon header et voilà à votre avis est-ce que ça c'est bien est-ce que vous voyez je vais peut-être gonfler je sais pas ça fait quoi votre avis cette chose là c'est carrément users ça veut dire qu'à un truc plein on peut pas faire ça à plein de gens qui me disent oui mais c'est responsive j'ai pas besoin comment vous pouvez dire que tout le monde va voir ce que vous avez écrit c'est pas possible vous avez toujours tombé sur quelqu'un qui va vouloir zoomer parce que c'est trop petit je sais pas mais moi j'arrête pas de tomber sur des sites qui me bloquent ça et quand j'ai un plan de métro ou un plan de quelque chose je vais zoomer et je ne vois rien je me dis il y a une image qui ne sert à rien et là c'est énervant donc on a la possibilité avec compte de revenir sur les sites mobiles mais voilà on n'est pas tous des techniciens c'est pas tous les ficelles donc un utilisateur standard il doit pouvoir zoomer avec ses doigts ça doit être possible donc pour corriger ça mais en fait c'est simple device width initial scale égal à et c'est tout le reste on enlève donc ici pour modifier Lovecraft donc je reviens dans mon thème enfant et je change Header.php je le copie et je le change et je change cette ligne là donc en fait c'est ce que j'ai fait donc je vais vous montrer Lovecraft Header et voilà ça suffit pour tous les intellecteurs vous zoomer il n'y a aucun problème vous voyez ces petits codes après voir là on en a déjà vu trois de base si c'est là ça en est bon il faut que je vérifie vous avez vu que mon validateur m'a dit qu'il y avait une image qui n'avait pas d'attributalt je vais aller voir je le corrige ce truc là parce que le lecteur s'est localisé bizarrement donc je vais revenir avec quoi ? oui avec ça je ne suis sûre pas d'accueil mon total 11y on va me le dire image alt on ne le dit on ne le dit pas on ne le dit pas il est censé me le dire et me mettre à la pointe d'exclamation avec un triangle parce que là ici le bandeau c'est une image et si j'inspecte si j'examine l'élément alors j'ai une balise IMG SRC et j'ai pas l'attributalt donc ça veut dire qu'il faut aussi que je rentre dans le header et que j'ai cherché en fait la bonne ligne d'accord et il est il est c'est sous la navigation la 26 non c'est pas le go-way je pense que c'était sous la navigation attendez on va regarder oui il n'y a qu'un problème attendez je vais revenir en local j'ai un petit souci je vais revenir en local pour le coup attendez je vais revenir au Lovecraft de base en local pour montrer l'erreur alors maintenant total 11y va il veut pas marcher c'est agréable comment ? oui c'est vrai mais là j'ai direct le truc sur la page donc c'est vachement bien j'ai pas besoin mais là ça va se faire alors c'est d'un en dessous de navigation donc je reviens alors je suis chez qui là donc il faut que je revienne sur le Lovecraft de base et je reviens dans Header alors c'est très bizarre parce qu'ils ont mis à la fois l'image en background et l'image en img mais bon ça c'est un autre problème mais voilà c'est là en fait cette ligne là elle n'a absolument pas d'attribut donc il faut rajouter comme c'est une image de déco j'ai le droit de mettre alt égal donc ici en fait il faut que je rajoute oui mais regardez il n'y a rien sur le else oui alors il faut que je rentre dans le condition pour le modifier tout à fait en fait si l'utilisateur m'a mis un alt en fait si l'image actuellement elle est dans le thème et si m'a mis une image dans une média que j'utilise comme l'en tête si m'a mis une alt il faut que je prenne ce que l'utilisateur m'a donné ce qui est normal sinon alt vide et il n'y a pas de sinon voilà c'est là le problème donc en fait je l'ai modifié comme ça sur le child et le child donc vous voyez en fait il faut aller regarder dans les thèmes ce qu'il y a il faut le modifier et adapter le code et là en fait voilà j'ai rajouté un else bah j'ai rien on m'a rien mis dans la zone l'alternative textuelle dans l'aluminium ouais je génère un alt vide d'accord donc à la fois retrouver ce qui ne va pas et puis générer le code qui va bien donc il me reste 15 minutes alors autre chose on ne fera pas tout mais en moins vous aurez tiens c'est rigolo ouais ah il est là vous avez vu elle est chouette bon il est là bon alt qui existe pas il l'a indiqué le tout à 11 je crois que je l'ai pas vu il est tard donc quelque chose de très important votre site alors je vais recharger la page c'est probablement un icône de total 11 y il y a une chose très très importante il faut que vous puissiez naviguer au clavier donc naviguer au clavier sur un site accessible ça donne ça enfin qui a pris en compte l'exigence on va le faire comme ça je trice je commence à mettre la souris dans la barre d'adresse et je tabule et regardez ce qui se passe sur service public comment je vois où j'en suis vous avez les petits points et en plus vous avez les changements de couleur parce qu'ils ont des over ils ont des focus, changements de couleur pas grand tout va bien visuellement je sais où je suis je navigue et visuellement je sais si je n'ai pas cette indication visuelle je suis incapable de dire où j'en suis vous avez peut-être voir en bas l'urale qui change si je tombe sur des liens c'est pas comme ça qu'on va pouvoir s'en sortir donc je vais faire la même chose avec l'offcraft et c'est vrai qu'on est ici donc je rechange pour être sûr alors attendez je suis j'espère être sûr oui je me suis remise sur l'offcraft donc ici regardez je suis connectée à la mine et la mine voire presse a déjà prévu des liens, ce qu'on appelle des liens d'évitement pour aller plus rapidement des zones donc je tabule je sais pas si vous voyez mais moi je vois rien alors ça bouge mais je sais pas où je suis donc là typiquement je n'ai plus du tout la visibilité de mon focus clavier donc ça veut dire que de base tous les navigateurs prennent en compte le mettre en place le outline, la propriété outline sur tous les éléments qui reçoivent le focus il n'y a pas 36 000 balises qui reçoivent le focus vous avez les hares, les boutons les inputs, textes arrière enfin pas grand chose et en fait là ça a été renlevé donc il faut le redéfinir donc là il faut que dans mon thème de base je prenne style.css que je mette dans mon child non, j'ai mon style.css dans mon enfant pardon je rajoute une outline sur les 2 points focus par exemple je vais faire ça dans mon style de mon child voilà j'ai rajouté ça je l'ai mis sur les boutons aussi à 2 points focus, outline, 1.px d'autode, alors faites ce que vous voulez là j'ai gardé les petits points de base mais vous pouvez être du solide vous pouvez changer la couleur là ça va être la couleur des liens et des boutons qui vont être prises mais je peux décider de mettre du rouge, du bleu ça se voit bien c'est que comme redéfinis ça ça va être redéfinis sur tous les navigateurs de la même manière parce que là si je fais la même chose avec Chrome je vais peut-être avoir le visuel qui va être présenté sur Firefox il n'est pas présenté chacun a sa manière de présenter les choses et en fait par exemple quand on fait des sites même en web design on le prévoit ça c'est à dire comment on va visualiser cette cette indication de navigation ça peut se prévoir dès les designs des sites que ça sera tout de suite sur les navigateurs donc là il faut que je rajoute au moins cette ligne là pour être sûr que je puisse naviguer aux claviers donc là en fait je vais vous montrer je vais retourner sur là je suis toujours, je vais changer de thème je vais aller sur mon thème enfant que je vais modifier mon thème enfant il est là je vais activer je vais recharger la page et je vais tabuler et là vous les voyez les outlines d'accord et là je vois où j'en suis et là je peux savoir sinon je navigue à la value donc ça ça fait partie de choses à rajouter ça vous alors il y en a qui aiment pas ça donc après on peut jouer sur on peut jouer sur voilà le A2.over A2.active je fais un outline none parce que ça c'est que pour le focus après vous pouvez l'enlever sur les autres usages mais il ne faut que sur le focus donc ça il n'y a que ça à faire après je peux faire ce que je veux sinon il y a autre chose à faire que l'on vous demande c'est de mettre des liens d'évitement vous avez vu quand je suis dans l'admine vous avez déjà prévu c'est moi vous avez vu là je suis dans l'admine il y a quelque chose qui vient d'apparaître ici à la tabulation qui me dit aller à la barre d'outil ça c'est de l'admine qui m'affiche ça et en fait ce qu'on a déjà prévu et en fait ce qu'il faut que vous prévoyez c'est la même chose d'aller au contenu direct parce que vous avez vu sur service public j'ai arrêté pas de tabuler quand je suis là dessus pour accéder par exemple à ce lien il va y avoir des tabulations à faire si je commence ici donc là j'étais là, j'ai invité ici je continue, je continue, je continue et ainsi de suite, ainsi de suite ah ça y est j'y arrive je vais pouvoir appuyer sur la touche un peu pour aller sur la page exactement voilà donc ce que l'on va faire c'est rajouter ces liens d'évitement ici en fait et souvent maintenant ce qu'on a on en met souvent c'est que ces liens soient cachés et qu'ils apparaissent à la navigation clavier ce que fait l'admine vous avez vu, on le voit pas de base il apparaît qu'il faut que c'est ça c'est la tendance maintenant la seule chose c'est qu'il y a des utilisateurs de zoom texte parce que eux ils vont pas arrêter voilà ça dépend, vous avez tombé sur des créations de sites vous avez des clients qui sont vraiment je sais pas, une association de malvoyants ils utilisent tous à 80% des zoom textes vous allez les mettre en visibles vous voyez, mais en général pour satisfaire le plus grand nom souvent c'est caché mais voilà il faut savoir qu'il y a certains qui ont quand même aidé si c'était lisi mais il y a des compromis donc en fait, quand je suis je vais aller sur mon editor et après je me ferai une checklist de ce qui reste à faire pour finir et là je vais vous dire un truc super intéressant si vous allez voir que WordPress a prévu alors voilà, regardez cette ligne je vais essayer de zoomer ça marche pas ça marche pas d'accord je fais ça ça fait pas la main c'est bête pourquoi c'est bête, ça marche pas est-ce que vous voyez cette ligne là celle là aller au contenu en fait c'est un lien interne à la page avec une encre j'ai posé une encre quelque part sur le contenu principal pour éviter un maximum de choses et dire voilà je veux directement accéder au contenu principal de la page le contenu principal de la page c'est le contenu éditorial on s'appele au header on s'appele au sidebar, on s'appele au footer et je vais directement dans la page donc en fait voilà et alors il y a quelque chose d'intéressant et que je vous conseille d'écrire comme ça c'est vraiment la classe screen reader texte le code WordPress génère des fois du texte en screen reader texte qui est dans le code mais qui n'est pas visible mais qui n'est pas un dispenon parce que les dispenons ne sont pas vocalisés par lecteur d'écran donc ils sont cachés de manière accessible quand vous allez sur la page de WordPress je crois que je l'ai mis dans l'article oui vous avez le code qu'il faut mettre dans screen reader texte parce qu'il va vous générer du code avec la classe mais c'est à vous dans votre feuille de style de prévoir cette classe, de la rajouter ce qui est normal parce qu'en fait c'est lié au thème donc dans le style.css vous réécrivez en fait le contenu de screen reader texte et il y a un screen reader texte.focus qui fait apparaître le texte au focus clavier dès qu'on arrive sur le lien il y a plein de solutions pour ça il y a des trucs à base de clip il faut sortir le texte de l'écran c'est un absolu avec un left ce que vous voulez voilà c'est là le texte et ici vous avez le code vous avez ça c'est un texte c'est un texte vous reprenez ça et après il faut le faire apparaître au focus en fait il faut le c'est bizarre que j'ai pas le peu voilà question pour finir de ce qu'on n'a pas vu et puis après question si ouais voilà ouais donc je sais aussi les liens d'évitement la navigation part titre donc vous avez vu que tout au début je vous ai montré qu'il y avait un problème avec un h4 qui se baladait sur le slogan qui était sous le titre il faut que je rentre dans le header et je change le h4 en P et ça suffit et là c'est bon par contre il faut que je arrive dans le sidebar en h2 donc là c'est autant de fichiers que je vais mettre dans mon thème enfin il va falloir que je change après vous verrez rendre le moteur utilisable vous vous rappelez du bouton qui contenait le spam ou le div est-ce qu'il y a du texte dans le bouton si je regarde en fait le code est-ce que à votre avis en fait j'ai le bouton un submit j'ai ma diva maintenant un spam que j'ai changé tout ça pour l'icône mais à votre avis si je désactive css est-ce que je veux voir quelque chose donc j'ai un bouton bien vide vous rappelez les liens vides je vous disais il n'y a rien dans la valise ah il n'y a rien dans le bouton je n'ai pas le texte donc comment on fait ça je vous ai indiqué la screen reader texte qui cache du texte ah mais qui est quand même dans le code bah c'est ça à chaque fois qu'il vous manque du texte dans un bouton ou dans un ah et bah vous rajoutez du texte caché donc je vais vous montrer je finis avec ça ah le le je galère c'est pas ça j'suis un peu commis dans les chichis je vais vous le faire en direct donc ici en fait ce qu'il faut que j'ajoute c'est du texte ou je parle avec la classe screen alors je vais prendre la même elle est bien celle la en plus j'ai défini elle va bien elle permet de cacher du texte et c'est vocalisé donc screen reader texte ensuite je fais ça et je dis bah lancer la recherche parce qu'en fait le but de ce bouton c'est de lancer la recherche donc je peux faire ça lancer la recherche et du coup je fais ça et en fait ici eh bien ça ne sera pas visible ça n'aura rien changé visuellement mais à la lecture je vais entendre lancer bouton lancer la recherche alors pourquoi l'arrière la belle parce que oui c'est une bonne question plein de codes sans texte avec du arrière la belle la seule chose c'est que votre site si je désactive ça je peux continuer à avoir de l'information et là j'ai rien donc c'est comme si je reviens avec un bouton vide en fait il faut absolument avoir des choses dans les balises des textes dans les balises alors en fait ce que tu dis je ne mets pas le screen reader texte et on le voit souvent et c'est pas bien je mettrai ça parce qu'en fait le but c'est d'être vocalisé par l'électeur de l'écran, arrière la belle et je mettrai lancer la recherche voilà non parce que ça suffit pas ça va être vocalisé mais si je désactive CSS ou si vous avez des utilisateurs qui changent votre CSS ça arrive si je désactive c'est une exigence des référentiels de dire je dois continuer à pouvoir utiliser, avoir l'info et là je désactive là ça change rien je vais désactiver CSS, on arrive à la belle il va pas être là visuellement oui oui alors il n'y a pas de piège mais il faut que je vous explique exactement alors non non, un suffit un suffit je n'ai pas besoin de l'arrière, on n'a pas besoin partout d'arrière c'est obligatoire non plus, comme le title c'est obligatoire là ça le suffit parce que je désactive CSS j'ai un bouton texte je vocalise du texte c'est bon et le arrière la belle je vais l'utiliser par exemple pour rajouter de l'information pour spécifier comment ? oui c'est ça après c'est bon voilà c'est bon