{"id":514,"date":"2023-09-15T15:12:52","date_gmt":"2023-09-15T13:12:52","guid":{"rendered":"https:\/\/ideance.net\/blog\/?p=514"},"modified":"2026-05-05T09:27:59","modified_gmt":"2026-05-05T07:27:59","slug":"evaluer-accessibilite-site-web","status":"publish","type":"post","link":"https:\/\/ideance.net\/blog\/en\/514\/evaluer-accessibilite-site-web\/","title":{"rendered":"\u00c9valuer rapidement le niveau d\u2019accessibilit\u00e9 d\u2019un site web \u2013 GAAD 2023"},"content":{"rendered":"<p>Vous souhaitez vous faire une <strong>premi\u00e8re id\u00e9e du niveau g\u00e9n\u00e9ral d\u2019accessibilit\u00e9 d\u2019un site web<\/strong> aux personnes handicap\u00e9es ? Alors ce webinaire est fait pour vous !<\/p>\n<p>En effet, un ensemble de <strong>manipulations rapides<\/strong>, de <strong>techniques simples<\/strong> et d\u2019<strong>astuces<\/strong> vous seront pr\u00e9sent\u00e9es afin que vous puissiez estimer par vous-m\u00eame la prise en compte ou non d\u2019un certain nombre de <strong>r\u00e8gles d\u2019accessibilit\u00e9<\/strong> (<abbr lang=\"en\" title=\"User Experience\">UX<\/abbr>, <abbr lang=\"en\" title=\"User Interface\">UI<\/abbr>, techniques ou encore \u00e9ditoriales).<\/p>\n<p><!--more--><\/p>\n<p class=\"ice-block is-grey\">Ce webinaire a \u00e9t\u00e9 anim\u00e9 le 17 mai 2023 sur Teams.<\/p>\n<h2>Vid\u00e9o du webinaire<\/h2>\n<p>La vid\u00e9o du webinaire ci-apr\u00e8s est sous-titr\u00e9e et traduite en <abbr title=\"Langue des Signes Fran\u00e7aise\">LSF<\/abbr>.<\/p>\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\">\n<div class=\"wp-block-embed__wrapper\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/WN4gkm5wXwQ?si=9gC71l32rGjW_f8n\" title=\"\u00c9valuer rapidement le niveau d\u2019accessibilit\u00e9 d\u2019un site web (vid\u00e9o YouTube)\" allowfullscreen=\"allowfullscreen\" style=\"border: none;\"><\/iframe>\n<\/div>\n<\/figure>\n<h2>Transcription de la vid\u00e9o<\/h2>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/01-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" \/><\/figure>\n<\/div>\n<p>S\u00e9bastien Delorme :<\/p>\n<p>\u2014 Bonjour \u00e0 toutes et \u00e0 tous.<\/p>\n<p>Je vais juste v\u00e9rifier que vous m\u2019entendez bien. Effectivement, oui, parce que je vois que l\u2019interpr\u00e8te LSF, que \u00e7a fonctionne\u2026<\/p>\n<p>Je vais juste v\u00e9rifier rapidement la v\u00e9lotypie. Effectivement, c\u2019est tout bon.<\/p>\n<h3 lang=\"en\">Global Accessibility Awareness Day<\/h3>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-521\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/02-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/02-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/02-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/02-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/02-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/02.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p>Du coup, bienvenue sur ce premier webinaire d\u2019introduction de la GAAD.<\/p>\n<p>Juste pour poser un petit peu le contexte, du coup, je vous rappelle que ces quatre webinaires seront sous-titr\u00e9s, vous aurez acc\u00e8s aux sous-titres sur le lien qui s\u2019affiche. Il est \u00e9galement interpr\u00e9t\u00e9 en langue des signes, il y a une vignette sur Teams qui met en avant les deux signaux de la matin\u00e9e.<\/p>\n<p>Il est \u00e9galement enregistr\u00e9, vous pourrez retrouver ce webinaire et les trois suivants sur notre blog quelques jours apr\u00e8s la diffusion, sous-titr\u00e9 et traduit en langue des signes.<\/p>\n<p>Je vais maintenant passer la parole \u00e0 Johan.<\/p>\n<p>Je serai le mod\u00e9rateur sur la journ\u00e9e, si vous avez la moindre question, n\u2019h\u00e9sitez pas \u00e0 la poser par \u00e9crit dans l\u2019espace questions-r\u00e9ponses dans le chat, je les r\u00e9cup\u00e8re et je les transmets \u00e0 Johan en fin de pr\u00e9sentation.<\/p>\n<p>Merci pour votre pr\u00e9sence. Je laisse la parole \u00e0 Johan.<\/p>\n<p>Johan Ramon :<\/p>\n<p>\u2014 Bonjour \u00e0 toutes et \u00e0 tous.<\/p>\n<p>Tr\u00e8s heureux de vous retrouver ce matin dans le cadre de la GAAD \u00e9dition 2023.<\/p>\n<p class=\"ice-block\">La GAAD, c\u2019est la <a href=\"https:\/\/accessibility.day\/\" lang=\"en\" hreflang=\"en\">Global Accessibility Awareness Day<\/a>, la <strong>journ\u00e9e mondiale de sensibilisation \u00e0 l\u2019accessibilit\u00e9 num\u00e9rique<\/strong>.<\/p>\n<p>Cette journ\u00e9e a lieu demain en principe, mais demain \u00e9tant f\u00e9ri\u00e9 en France, nous avons choisi de vous proposer ces quatre webinaires la veille, soit aujourd\u2019hui, <strong>pour sensibiliser le plus de personnes<\/strong>.<\/p>\n<h3>Johan Ramon<\/h3>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-522\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/03-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/03-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/03-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/03-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/03-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/03.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p>Moi, c\u2019est <a href=\"https:\/\/ideance.net\/blog\/en\/author\/johan-ramon\/\">Johan Ramon<\/a>, je suis expert et responsable accessibilit\u00e9 num\u00e9rique au sein de la soci\u00e9t\u00e9 Ideance. Je travaille dans le domaine de l\u2019accessibilit\u00e9 num\u00e9rique depuis pas loin de quinze ans maintenant, et j\u2019ai \u00e9t\u00e9 d\u00e9veloppeur front-end \/ int\u00e9grateur HTML.<\/p>\n<h3>S\u00e9bastien Delorme<\/h3>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-523\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/04-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/04-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/04-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/04-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/04-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/04.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p>Je suis accompagn\u00e9 de <a href=\"https:\/\/ideance.net\/blog\/en\/author\/sebastien-delorme\/\">S\u00e9bastien<\/a> qui est aussi expert accessibilit\u00e9 num\u00e9rique et pr\u00e9sident et fondateur d\u2019Ideance.<\/p>\n<h3>Ideance<\/h3>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-524\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/05-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/05-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/05-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/05-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/05-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/05.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p><a href=\"https:\/\/ideance.net\/blog\/en\/\">Ideance<\/a>, rapidement, c\u2019est une <strong>soci\u00e9t\u00e9 de conseil et d\u2019expertise en accessibilit\u00e9 num\u00e9rique<\/strong> o\u00f9 nos principales missions sont d\u2019accompagner des organismes publics, des entreprises priv\u00e9es mais aussi des associations \u00e0 la prise en compte de ce sujet de l\u2019accessibilit\u00e9 num\u00e9rique dans la r\u00e9alisation de leurs diff\u00e9rents supports num\u00e9riques (sites Web, documents bureautiques, etc.).<\/p>\n<p>On m\u00e8ne des audits d\u2019accessibilit\u00e9, on fait des accompagnements de projet et on anime des formations.<\/p>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-525\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/06-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/06-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/06-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/06-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/06-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/06.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p>J\u2019ai choisi de vous pr\u00e9senter ce matin un webinaire intitul\u00e9 \u00ab \u00c9valuer rapidement le niveau d\u2019accessibilit\u00e9 d\u2019un site Web \u00bb.<\/p>\n<h3>Ce webinaire devrait vous aider \u00e0&#8230;<\/h3>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-526\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/07-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/07-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/07-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/07-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/07-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/07.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p>Ce que \u00e7a va vous permettre en principe ce webinaire, c\u2019est d\u2019<strong>\u00e9valuer de mani\u00e8re autonome<\/strong>, par vous-m\u00eame, <strong>la prise en compte ou non d\u2019un certain nombre de r\u00e8gles d\u2019accessibilit\u00e9 sur un site Web<\/strong>.<\/p>\n<p>J\u2019insiste bien sur \u00ab un certain nombre \u00bb. On verra juste apr\u00e8s.<\/p>\n<p>Et vous allez pouvoir par vous-m\u00eames tester ces quelques r\u00e8gles et crit\u00e8res via un ensemble de manipulations simples, de techniques rapides et de tips que je vais vous pr\u00e9senter au fur et \u00e0 mesure de l\u2019avanc\u00e9e du webinaire.<\/p>\n<p class=\"ice-block is-green\">Quand vous aurez men\u00e9 ces tests, vous pourrez vous faire une <strong>id\u00e9e du niveau g\u00e9n\u00e9ral d\u2019accessibilit\u00e9 aux personnes handicap\u00e9es<\/strong> du site Web que vous \u00eates en train de tester.<\/p>\n<h3>En revanche, il ne vous permettra pas de&#8230;<\/h3>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-527\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/08-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/08-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/08-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/08-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/08-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/08.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p class=\"ice-block is-red\">En revanche, ce webinaire ne va pas vous permettre de v\u00e9rifier pleinement, compl\u00e8tement la prise en compte de toutes les r\u00e8gles d\u2019accessibilit\u00e9.<\/p>\n<p>C\u2019est un petit panel, un petit \u00e9chantillon de r\u00e8gles que j\u2019ai s\u00e9lectionn\u00e9es et qui sont v\u00e9rifiables par tout un chacun, peu importe son profil.<\/p>\n<p>Donc, cette pr\u00e9sentation ne sera pas exhaustive et il y a certaines r\u00e8gles qui sont un peu plus sensibles \u00e0 tester que j\u2019ai mises de c\u00f4t\u00e9, car on est dans le cadre d\u2019une d\u00e9couverte de ce sujet, donc, j\u2019ai voulu rester grand public.<\/p>\n<p>Du coup, par rebond, \u00e7a ne permettra pas de conna\u00eetre pr\u00e9cis\u00e9ment le niveau d\u2019accessibilit\u00e9 du site Web test\u00e9 et <strong>\u00e7a ne vous permettra pas non plus de conna\u00eetre son niveau de conformit\u00e9<\/strong> au <a href=\"https:\/\/accessibilite.numerique.gouv.fr\/\">R\u00e9f\u00e9rentiel G\u00e9n\u00e9ral d\u2019Am\u00e9lioration de l\u2019Accessibilit\u00e9 (RGAA)<\/a> qui liste toutes les r\u00e8gles et bonnes pratiques qui doivent \u00eatre suivies obligatoirement pour garantir la pleine accessibilit\u00e9 et conformit\u00e9 d\u2019un site Web.<\/p>\n<h3>L&rsquo;accessibilit\u00e9 web, qu\u00e9saco ?<\/h3>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-528\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/09-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/09-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/09-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/09-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/09-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/09.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p>On va rentrer dans le vif du sujet, mais avant \u00e7a, il me semblait important de vous rappeler les grands principes de l\u2019accessibilit\u00e9 Web sous la forme d\u2019une introduction de :<\/p>\n<ul>\n<li>C\u2019est quoi l\u2019accessibilit\u00e9 ?<\/li>\n<li>Qui elle concerne, concr\u00e8tement ?<\/li>\n<li>Pourquoi il est important de la respecter et de la mettre en place ?<\/li>\n<li>Et comment la respecter de mani\u00e8re efficace ?<\/li>\n<\/ul>\n<h4>L&rsquo;accessibilit\u00e9 web, c&rsquo;est quoi ?<\/h4>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-529\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/10-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/10-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/10-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/10-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/10-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/10.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p>Une d\u00e9finition rapide de ce qu\u2019est l\u2019accessibilit\u00e9, c\u2019est :<\/p>\n<p class=\"ice-block\">Faire en sorte que tous les services, tous les contenus, toutes les fonctionnalit\u00e9s que vous proposez sur un site Web soient compr\u00e9hensibles, utilisables, autrement dit <strong>accessibles aux personnes handicap\u00e9es<\/strong>, aux personnes d\u00e9ficientes.<\/p>\n<h4>L&rsquo;accessibilit\u00e9 web, pour qui ?<\/h4>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-530\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/11-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/11-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/11-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/11-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/11-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/11.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p>Mais \u00e7a concerne qui ?<\/p>\n<p>Je l\u2019ai cit\u00e9 juste avant, \u00e7a concerne principalement les personnes handicap\u00e9es.<\/p>\n<p>On a tendance \u00e0 dire que \u00e7a concerne entre <strong>15 et 20% de la population<\/strong>.<\/p>\n<p class=\"ice-block is-grey\">Et parmi les personnes handicap\u00e9es, on peut citer les personnes dites d\u00e9ficientes motrices ou encore les personnes d\u00e9ficientes auditives, les personnes d\u00e9ficientes visuelles, les personnes d\u00e9ficientes cognitives, psychiques, les personnes d\u00e9ficientes mentales ou intellectuelles.<\/p>\n<p>Parmi les <strong>personnes d\u00e9ficientes motrices<\/strong>, il y a les personnes t\u00e9trapl\u00e9giques qui ne peuvent pas utiliser leurs membres sup\u00e9rieurs ou inf\u00e9rieurs, il y a aussi les personnes infirmes motrices c\u00e9r\u00e9brales qui auront des difficult\u00e9s \u00e0 utiliser une souris classique et qui vont se tourner vers d\u2019autres dispositifs de pointage comme des souris adapt\u00e9es ou qui vont utiliser exclusivement leur clavier pour naviguer sur une interface num\u00e9rique.<\/p>\n<p>C\u00f4t\u00e9 <strong>personnes d\u00e9ficientes auditives<\/strong>, \u00e7a concerne les personnes sourdes et les personnes malentendantes qui ont un besoin particulier concernant tout ce qui va \u00eatre multim\u00e9dia, fichiers audio et vid\u00e9o.<\/p>\n<p>On peut citer parmi les <strong>personnes d\u00e9ficientes visuelles<\/strong> les personnes atteintes de c\u00e9cit\u00e9, aveugles, qui utilisent, pour certaines, des lecteurs d\u2019\u00e9crans, qui sont des outils d\u2019assistance qui restituent tout ce qui s\u2019affiche \u00e0 l\u2019\u00e9cran et toutes les interactions que l\u2019on fait avec le site Web, soit via un retour audio via synth\u00e8se vocale, soit via une plage braille.<\/p>\n<p>On peut aussi citer les personnes dites malvoyantes, par exemple atteintes de glaucome, presbytes, daltoniennes, dont le besoin particulier face \u00e0 des interfaces num\u00e9riques, c\u2019est la possibilit\u00e9 de pouvoir adapter l\u2019affichage (changer les couleurs, agrandir la taille des textes, la r\u00e9duire, modifier les interlignages\u2026), tous ces r\u00e9glages-l\u00e0 qui sont faits g\u00e9n\u00e9ralement depuis les navigateurs ou syst\u00e8mes d\u2019exploitation.<\/p>\n<p>Parmi les <strong>personnes d\u00e9ficientes cognitives<\/strong>, on peut citer les personnes avec des troubles de l\u2019apprentissage comme les personnes dyslexiques, dysorthographiques, dyspraxiques.<\/p>\n<p>Les personnes dyslexiques, ce sont des personnes qui auront des difficult\u00e9s de lecture, qui vont mettre plus de temps par exemple \u00e0 prendre connaissance des contenus.<\/p>\n<p>Pareil que pour les personnes malvoyantes, leurs besoins, c\u2019est principalement de pouvoir adapter l\u2019affichage, changer des polices de caract\u00e8re, de nouveau changement des espacements ou des interlignages.<\/p>\n<p>Enfin, un petit exemple de <strong>personnes atteintes de d\u00e9ficience mentale<\/strong>, on peut citer par exemple les personnes autistes qui auront besoin d\u2019interfaces simplifi\u00e9es qui ne soient pas trop compliqu\u00e9es \u00e0 utiliser.<\/p>\n<p>L\u2019accessibilit\u00e9 Web, \u00e7a concerne principalement ce panel, mais pas que.<\/p>\n<h4>L&rsquo;accessibilit\u00e9 web, pourquoi ?<\/h4>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-531\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/12-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/12-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/12-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/12-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/12-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/12.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p>Maintenant, pourquoi il est important d\u2019appliquer, de respecter cette prise en compte de l\u2019accessibilit\u00e9 sur le site Web, mais aussi de mani\u00e8re g\u00e9n\u00e9rale sur le num\u00e9rique ?<\/p>\n<p class=\"ice-block is-red\">C\u2019est un <strong>droit fondamental<\/strong> pour ces personnes handicap\u00e9es.<\/p>\n<p>Un site Web accessible va <strong>favoriser l\u2019inclusion<\/strong> de ces personnes dans la soci\u00e9t\u00e9, \u00e7a va leur <strong>donner de l\u2019autonomie<\/strong> pour accomplir des d\u00e9marches en ligne, pour faire de l\u2019achat en ligne, pour consulter des contenus, consulter les vid\u00e9os et j\u2019en passe.<\/p>\n<p>Et aussi, \u00e7a a l\u2019effet positif, cette mise en accessibilit\u00e9, cette garantie de l\u2019accessibilit\u00e9, d\u2019<strong>\u00e9viter les discriminations<\/strong> et de <strong>r\u00e9duire les in\u00e9galit\u00e9s<\/strong>.<\/p>\n<p>Notez aussi qu\u2019un grand nombre d\u2019entreprises priv\u00e9es (dont le chiffre d\u2019affaires est au minimum de 250 millions d\u2019euros par an), ainsi que tous les organismes publics, ont cette <strong>obligation l\u00e9gale<\/strong> de mise en accessibilit\u00e9 depuis maintenant un certain nombre d\u2019ann\u00e9es.<\/p>\n<p>Donc, il y a deux volets sur cet aspect.<\/p>\n<p>Le premier, c\u2019est ce volet \u00e9thique <abbr title=\"Responsabilit\u00e9 Soci\u00e9tale des Entreprises\">RSE<\/abbr> qui est le droit fondamental pour les personnes handicap\u00e9es, et il y a le second volet du pourquoi qui est plus sur l\u2019obligation l\u00e9gale, respecter une loi en vigueur.<\/p>\n<p>Je ne rentre pas trop dans le d\u00e9tail, ce n\u2019est pas l\u2019objet de ce webinaire, mais si vous voulez en savoir plus, il y a plein de ressources que je vous pr\u00e9senterai \u00e0 la fin de la conf\u00e9rence si j\u2019ai un peu de temps.<\/p>\n<h4>L&rsquo;accessibilit\u00e9 web, comment ?<\/h4>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-532\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/13-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/13-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/13-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/13-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/13-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/13.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p>Comment mettre en place l\u2019accessibilit\u00e9 Web et num\u00e9rique de mani\u00e8re plus g\u00e9n\u00e9rale ?<\/p>\n<p>C\u2019est <strong>suivre un certain nombre de r\u00e8gles et de bonnes pratiques<\/strong> qui peuvent \u00eatre <strong>d\u2019ordre fonctionnel<\/strong>&nbsp;: est-ce que j\u2019ai diff\u00e9rents moyens de navigation propos\u00e9s sur mon site ?<\/p>\n<p>Qui peuvent \u00eatre aussi <strong>d\u2019ordre graphique<\/strong>, li\u00e9s \u00e0 de l\u2019<abbr lang=\"en\" title=\"User Interface\">UI<\/abbr> et de l\u2019<abbr lang=\"en\" title=\"User experience\">UX<\/abbr> : est-ce que j\u2019ai des contrastes suffisants, par exemple ?<\/p>\n<p>On a aussi des r\u00e8gles et bonnes pratiques davantage li\u00e9es \u00e0 tout ce qui est <strong>technique et li\u00e9es au d\u00e9veloppement<\/strong>, savoir structurer et coder correctement ses fichiers HTML, CSS, JavaScript.<\/p>\n<p>Et enfin, des r\u00e8gles qui concernent davantage <strong>la r\u00e9daction et la publication de contenus<\/strong> pour garantir une bonne accessibilit\u00e9 du site Web tout au long de sa vie, dans la publication des articles, des contenus, des \u00e9v\u00e8nements et j\u2019en passe.<\/p>\n<p>Voil\u00e0 pour cette introduction, ce rapide rappel des grands principes de l\u2019accessibilit\u00e9 Web.<\/p>\n<h3>Tester l&rsquo;adaptation de l&rsquo;affichage<\/h3>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-533\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/14-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/14-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/14-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/14-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/14-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/14.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p>On va maintenant rentrer dans le vif du sujet avec une premi\u00e8re th\u00e9matique, une premi\u00e8re section de tests \u00e0 mener pour v\u00e9rifier s\u2019il y a une prise en compte du sujet de l\u2019accessibilit\u00e9 sur le site Web que vous envisagez de tester.<\/p>\n<p>Cette premi\u00e8re section, c\u2019est tester certaines adaptations de l\u2019affichage.<\/p>\n<h4>Le site web est-il <i lang=\"en\">responsive<\/i> ?<\/h4>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-534\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/15-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/15-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/15-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/15-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/15-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/15.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p class=\"ice-block\">Une r\u00e8gle d\u2019accessibilit\u00e9 demande \u00e0 ce que le site Web soit <strong>adaptatif<\/strong>, c\u2019est-\u00e0-dire qu\u2019il soit <i lang=\"en\">responsive<\/i>, qu\u2019il s\u2019affiche correctement <strong>lorsque la taille de l\u2019\u00e9cran est r\u00e9duite<\/strong>.<\/p>\n<p>Et la r\u00e8gle officielle, que l\u2019on retrouve dans les standards, demande que, lorsque la taille de l\u2019\u00e9cran est r\u00e9duite <strong>jusqu\u2019\u00e0 320 pixels<\/strong>, il ne faut pas qu\u2019il y ait de perte d\u2019information ni de perte de service ou de fonctionnalit\u00e9 et il ne faut pas non plus l\u2019apparition d\u2019une scrollbar horizontale.<\/p>\n<p>Cette r\u00e8gle est importante pour de nombreuses personnes en situation de handicap.<\/p>\n<p>On peut par exemple citer les personnes, j\u2019en parlais tout \u00e0 l\u2019heure, t\u00e9trapl\u00e9giques, qui sont d\u00e9ficientes motrices, qui ne peuvent pas faire usage d\u2019un clavier ni m\u00eame d\u2019une souris et qui auront tendance \u00e0 piloter leur smartphone par exemple \u00e0 la voix.<\/p>\n<p>Ces personnes n\u2019ont que cette possibilit\u00e9 de consulter le site Web sur un p\u00e9riph\u00e9rique de petite taille.<\/p>\n<p>Typiquement, elle pourrait socler leur smartphone et avoir la possibilit\u00e9 de consulter le site seulement en mode portrait sur une toute petite taille d\u2019\u00e9cran smartphone, il est donc important que toutes <strong>les informations que l\u2019on a sur la version classique soient aussi disponibles sur la version mobile<\/strong>.<\/p>\n<p>Ce besoin et l\u2019importance d\u2019avoir un site <i lang=\"en\">responsive<\/i>, \u00e7a touche aussi les personnes aveugles parce qu\u2019une personne aveugle peut tr\u00e8s bien avoir\u2026<\/p>\n<p>On peut imaginer qu\u2019elle a un \u00e9cran noir, par exemple, elle ne conna\u00eet pas la taille de son \u00e9cran, et elle peut tr\u00e8s bien \u00eatre sur un environnement desktop, sur son navigateur mais que celui-ci soit d\u2019une toute petite taille et dans ce cas-l\u00e0, il est important qu\u2019elle ait acc\u00e8s \u00e0 tous les contenus pr\u00e9sents sur la version par d\u00e9faut.<\/p>\n<p>Allons voir un exemple, un bon exemple d\u2019un site qui est parfaitement construit et <i lang=\"en\">responsive<\/i> jusqu\u2019\u00e0 320 pixels.<\/p>\n<p>Je vais sur le <a href=\"https:\/\/www.metropolegrandparis.fr\/\">site de la M\u00e9tropole du Grand Paris<\/a>, sur la page qui pr\u00e9sente la M\u00e9tropole.<\/p>\n<p>Le test \u00e0 mener pour v\u00e9rifier que le site est <i lang=\"en\">responsive<\/i> jusqu\u2019\u00e0 320 pixels sans perte de contenus, c\u2019est la manipulation <kbd>CTRL<\/kbd> + <kbd>Shift<\/kbd> + <kbd>M<\/kbd> qui permet de rentrer en mode adaptatif, et ensuite, vous pouvez r\u00e9duire la largeur de votre page Web en vous positionnant jusqu\u2019\u00e0 320 pixels, l\u2019id\u00e9al \u00e9tant de <strong>tester sur diff\u00e9rents paliers<\/strong>.<\/p>\n<p>Je me mets directement \u00e0 320 pixels.<\/p>\n<p>Il faut <strong>v\u00e9rifier qu\u2019il n\u2019y ait pas l\u2019apparition d\u2019une scrollbar horizontale<\/strong> en bas de la page Web, et que tous les contenus pr\u00e9sents sur la version par d\u00e9faut soit aussi disponibles sur cette version 320 pixels.<\/p>\n<p>Evidemment, il peut y avoir r\u00e9agencement des contenus, des fonctionnalit\u00e9s, modification de leur apparence, mais il faut qu\u2019elles soient encore fonctionnelles.<\/p>\n<p>Sur la version full, pleine, on a diff\u00e9rents menus de navigation, un moteur de recherche dans l\u2019en-t\u00eate, un fil d\u2019Ariane et j\u2019en passe.<\/p>\n<p>Ces \u00e9l\u00e9ments, on a le sentiment qu\u2019ils disparaissent en 320 pixels, mais en r\u00e9alit\u00e9, ils sont toujours disponibles mais pr\u00e9sent\u00e9s d\u2019une autre mani\u00e8re.<\/p>\n<p>Les menus sont encore disponibles sous le menu hamburger. Donc \u00e7a r\u00e9pond \u00e0 la r\u00e8gle. Les contenus sont encore l\u00e0 et il n\u2019y a pas de scrollbar horizontale.<\/p>\n<p>Je ne vais pas y passer plus de temps, si vous avez des questions, n\u2019h\u00e9sitez pas \u00e0 passer par le canal.<\/p>\n<h4>Les textes restent-ils lisibles lorsqu&rsquo;agrandis ?<\/h4>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-535\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/16-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/16-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/16-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/16-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/16-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/16.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p>Deuxi\u00e8me r\u00e8gle facile \u00e0 tester, c\u2019est la possibilit\u00e9 d\u2019agrandir la taille des textes.<\/p>\n<p class=\"ice-block\">La r\u00e8gle demande qu\u2019un site Web et ses textes puissent \u00eatre <strong>agrandis jusqu\u2019\u00e0 200%<\/strong>, et lorsque la taille des textes est agrandie, il ne faut pas qu\u2019il y ait <strong>perte d\u2019information ou de fonctionnalit\u00e9<\/strong>.<\/p>\n<p>Cette r\u00e8gle est importante pour les personnes malvoyantes qui auraient besoin d\u2019une taille de texte plus grande pour leurs pr\u00e9f\u00e9rences de consultation.<\/p>\n<p>Pour tester ce crit\u00e8re, je vais cette fois-ci changer de site. Je vais me mettre sur le <a href=\"https:\/\/ideance.net\/blog\/en\/\">site d\u2019Ideance<\/a>.<\/p>\n<p>Pour agrandir la taille des textes, soit vous passez par votre clavier en faisant <kbd>CTRL<\/kbd> plus <kbd>+<\/kbd>, et <kbd>CTRL<\/kbd> + <kbd>-<\/kbd> pour r\u00e9duire la taille des textes, et vous allez voir en haut de votre navigateur, \u00e0 droite de votre barre d\u2019url, il me semble que c\u2019est le cas sous Chrome, m\u00eame sous Edge, la taille du texte en pourcentage.<\/p>\n<p>L\u00e0, j\u2019ai fait deux fois <kbd>CTRL<\/kbd> plus <kbd>+<\/kbd>, je suis \u00e0 133%, et l\u2019id\u00e9e est d\u2019aller jusqu\u2019\u00e0 six fois <kbd>CTRL<\/kbd> plus <kbd>+<\/kbd> pour atteindre le fameux palier de 200% et, de la m\u00eame mani\u00e8re que tout \u00e0 l\u2019heure, il faut v\u00e9rifier que tous les textes sont pr\u00e9sents, lisibles et, de nouveau aussi, il peut y avoir un r\u00e9agencement des fonctionnalit\u00e9s et des contenus, un changement visuel, <strong>tant que les \u00e9l\u00e9ments sont encore pr\u00e9sents, utilisables et fonctionnels<\/strong>, c\u2019est accessible.<\/p>\n<p>L\u00e0, le menu sur la version \u00e0 100% est horizontal. Quand je bascule en mode 200%, cette fois-ci, le menu est cach\u00e9 derri\u00e8re un bouton hamburger, il est r\u00e9agenc\u00e9 mais c\u2019est pleinement accessible.<\/p>\n<p>Notez qu\u2019il y a deux types de zoom. L\u00e0, \u00e7a va \u00eatre un poil plus sensible. Deux types de zooms dans les navigateurs.<\/p>\n<p>Ils peuvent \u00eatre param\u00e9tr\u00e9s sous Firefox dans le menu \u00ab Affichage > Zoom \u00bb.<\/p>\n<p>Par d\u00e9faut, le zoom qui est activ\u00e9 dans le navigateur, c\u2019est le zoom graphique, qui a la particularit\u00e9, lorsqu\u2019il est utilis\u00e9, de tout zoomer, \u00e0 la fois les textes et les images.<\/p>\n<p>En revanche, il y a une option pour zoomer seulement les textes.<\/p>\n<p>La r\u00e8gle d\u2019accessibilit\u00e9 dit : si les textes s\u2019agrandissent bien dans l\u2019un des deux zooms, graphique ou zoom texte seulement, c\u2019est OK, \u00e7a veut dire que, si votre site s\u2019agrandit bien en zoom graphique, il n\u2019est pas forc\u00e9ment n\u00e9cessaire qu\u2019il s\u2019agrandisse en zoom texte seulement, et inversement.<\/p>\n<p>Idem, ce compl\u00e9ment est un poil plus technique donc n\u2019h\u00e9sitez pas \u00e0 demander des compl\u00e9ments dans le canal de conversation.<\/p>\n<h3>V\u00e9rifier la pr\u00e9sence et la pertinence des titres<\/h3>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-536\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/17-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/17-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/17-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/17-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/17-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/17.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p>Une autre th\u00e9matique et d\u2019autres r\u00e8gles que je voulais aborder avec vous, r\u00e8gles aussi particuli\u00e8rement importantes pour l\u2019accessibilit\u00e9, c\u2019est de <strong>v\u00e9rifier la pr\u00e9sence et la pertinence des titres<\/strong> dans les pages Web.<\/p>\n<h4>Les pages ont-elles un titre principal pertinent ?<\/h4>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-537\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/18-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/18-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/18-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/18-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/18-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/18.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p>Nous avons deux types de titres.<\/p>\n<p class=\"ice-block is-grey\">Il y a ce qu\u2019on appelle le titre principal des pages, c\u2019est ce qui s\u2019affiche dans l\u2019<strong>onglet de votre navigateur<\/strong>.<\/p>\n<p>Le titre principal, la balise <code>&lt;title&gt;<\/code> pour les plus techniques d\u2019entre vous, c\u2019est un \u00e9l\u00e9ment particuli\u00e8rement important pour les personnes qui naviguent avec des synth\u00e8ses vocales ou des plages braille parce que c\u2019est la <strong>premi\u00e8re information qui sera restitu\u00e9e au chargement de la page<\/strong>.<\/p>\n<p>Si le <code>&lt;title&gt;<\/code> est pertinent, \u00e7a permet pour ces personnes qui utilisent des lecteurs d\u2019\u00e9cran, au chargement de la page, d\u2019\u00eatre certaines qu\u2019elles sont sur la page o\u00f9 elles souhaitaient \u00eatre.<\/p>\n<p>Ce qui est attendu, en termes d\u2019accessibilit\u00e9, c\u2019est de reprendre dans ce <code>&lt;title&gt;<\/code> <strong>le nom de la page courante ainsi que le nom du site<\/strong>.<\/p>\n<p>De nouveau, je vais sur Internet pour vous pr\u00e9senter trois bons exemples.<\/p>\n<p>Je me rends sur le <a href=\"https:\/\/www.spie.com\/\">site de Spie<\/a>. Je suis sur la <a href=\"https:\/\/www.spie.com\/fr\/developpement-durable\">page \u00ab D\u00e9veloppement durable \u00bb<\/a> et je remarque que, dans mon onglet de navigateur, le titre principal reprend bien le nom de la page courante ainsi que le nom du site.<\/p>\n<p>Un autre exemple, toujours sur ce m\u00eame site : je me suis mis sur <a href=\"https:\/\/www.spie.com\/fr\/developpement-durable\/notre-politique-rse\">la page \u00ab Notre politique RSE \u00bb<\/a>. Dans le titre de la page, j\u2019ai bien \u00ab Notre politique RSE \u00bb et \u00ab Spie \u00bb.<\/p>\n<p>Et pour aller un petit peu plus loin, il y a une particularit\u00e9 pour les pages qui poss\u00e8dent des moyens de filtrer des contenus, pour les pages qui poss\u00e8dent des syst\u00e8mes de pagination.<\/p>\n<p>\u00c9tant donn\u00e9 que la r\u00e8gle sur ce titre principal demande d\u2019avoir des <strong>titres explicites, uniques et pertinents<\/strong>, une tr\u00e8s bonne pratique d\u2019accessibilit\u00e9, c\u2019est, en plus de reprendre le nom de la page courante (\u00ab R\u00e9sultat de la recherche pour \u00ab\u00a0handicap\u00a0\u00bb \u00bb), d\u2019<strong>indiquer le ou les filtres utilis\u00e9s ainsi que la page courante<\/strong> utilis\u00e9e dans le syst\u00e8me de pagination.<\/p>\n<p>Si je survole mon onglet de navigateur, je remarque que <a href=\"https:\/\/www.spie.com\/fr\/search?s=handicap&#038;sort_by=search_api_relevance&#038;sort_order=DESC&#038;t=Actualit%C3%A9s\">cette page de r\u00e9sultats de recherche<\/a> indique comme titre principal \u00ab R\u00e9sultats de recherche pour handicap \u00bb, et ce qui nous int\u00e9resse, c\u2019est \u00ab Filtr\u00e9s par actualit\u00e9s, page 1 sur 2 \u00bb, et le nom du site, \u00ab Spie \u00bb.<\/p>\n<p>C\u2019est le niveau sup\u00e9rieur d\u2019accessibilit\u00e9. C\u2019est un poil un peu plus technique. N\u2019h\u00e9sitez pas si vous avez besoin de compl\u00e9ments d\u2019info.<\/p>\n<h4>Les pages ont-elles des titres de section ?<\/h4>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-538\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/19-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/19-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/19-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/19-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/19-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/19.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p>Et les autres titres que l\u2019on a coutume d\u2019\u00e9voquer en accessibilit\u00e9 Web, c\u2019est ce qu\u2019on appelle les titres de section.<\/p>\n<p class=\"ice-block is-grey\">Les titres de section, pour les plus techniques, c\u2019est les <strong>balises <code>&lt;hn&gt;<\/code> allant de <code>&lt;h1&gt;<\/code> \u00e0 <code>&lt;h6&gt;<\/code><\/strong>.<\/p>\n<p>Quand on a une <strong>hi\u00e9rarchie de titres de section logique et compl\u00e8te<\/strong>, \u00e7a permet de comprendre comment sont organis\u00e9s et hi\u00e9rarchis\u00e9s les contenus dans la page et \u00e7a permet aussi d\u2019acc\u00e9l\u00e9rer la navigation pour ces m\u00eames personnes.<\/p>\n<p>Et, pour \u00e9valuer de mani\u00e8re g\u00e9n\u00e9rale une bonne utilisation des titres de section dans une page Web, je vous recommande fortement l\u2019utilisation d\u2019une extension, disponible \u00e0 la fois sous Firefox et aussi sous Chrome, qui s\u2019appelle \u00ab <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/headingsmap\/flbjommegcjonpdmenkdiocclhjacmbi\" lang=\"en\">HeadingsMap<\/a> \u00bb.<\/p>\n<p>Allons voir \u00e0 quoi \u00e7a ressemble. Je vous pr\u00e9sente les pages de l\u2019extension. Elle est disponible ici, vous tapez <a href=\"https:\/\/www.google.com\/search?q=HeadingsMap\"><span lang=\"en\">HeadingsMap<\/span> sur Google<\/a>, ce sera le premier lien de r\u00e9sultats de recherche. Et idem, l\u2019extension est disponible aussi sous Firefox, m\u00eame recherche. Vous trouverez \u00e7a tr\u00e8s rapidement.<\/p>\n<p>Et comment \u00e7a s\u2019utilise ?<\/p>\n<p>On va changer de site. Je vais me rendre sur le <a href=\"https:\/\/www.herault-mobility.fr\/\">site de Tourisme H\u00e9rault Mobility<\/a>.<\/p>\n<p>J\u2019avais install\u00e9 l\u2019extension au pr\u00e9alable. J\u2019ai dans ma barre d\u2019adresse un bouton et si je clique dessus, j\u2019ai dans un panneau lat\u00e9ral tous les titres de section utilis\u00e9s dans la page.<\/p>\n<p>On clique sur un titre, \u00e7a permet de le mettre en surbrillance et de m\u2019indiquer son niveau.<\/p>\n<p>L\u00e0, mon outil me dit que le texte \u00ab Bienvenue sur le site H\u00e9rault mobility \u00bb a \u00e9t\u00e9 cod\u00e9 tel un titre de niveau 1. C\u2019est tr\u00e8s bien parce qu\u2019il s\u2019agit r\u00e9ellement du premier titre de section de ma page.<\/p>\n<p>Ensuite, si je poursuis, si je clique sur le titre de niveau 2 \u00ab Conna\u00eetre le niveau d\u2019accessibilit\u00e9 \u00bb, de nouveau, il sera mis en surbrillance avec un contour rouge qui me permet de voir qu\u2019effectivement, \u00ab Conna\u00eetre le niveau d\u2019accessibilit\u00e9 \u00bb est un titre de niveau 2 parce qu\u2019il chapeaute du contenu. Idem pour \u00ab Vous d\u00e9placer \u00bb, c\u2019est aussi un titre de niveau 2.<\/p>\n<p>J\u2019ai le sentiment, au fur et \u00e0 mesure de mes tests, qu\u2019il y a des titres qui ont bien \u00e9t\u00e9 employ\u00e9s dans la page, et deux, leur hi\u00e9rarchie semble coh\u00e9rente.<\/p>\n<p>Je me fais une premi\u00e8re id\u00e9e en disant : il y a eu une prise en compte du crit\u00e8re.<\/p>\n<p>Si on va un petit peu plus bas, on attaque une nouvelle section qui sont les sites \u00e0 explorer, structur\u00e9e avec un titre de niveau 2. Ensuite, les sites en question, juste en dessous, les <i>cards<\/i>, elles, sont bien titr\u00e9es avec des titres de niveau 3.<\/p>\n<p>On a donc une hi\u00e9rarchie de titre qui a l\u2019air pleinement accessible.<\/p>\n<p class=\"ice-block\">Retenez qu\u2019une page Web doit poss\u00e9der des titres de section. Ces titres de section doivent \u00eatre <strong>hi\u00e9rarchis\u00e9s de mani\u00e8re logique et compl\u00e8te<\/strong>. Et pour vous aider \u00e0 \u00e7a, il existe une extension tr\u00e8s pratique qui s\u2019appelle \u00ab HeadingsMap \u00bb.<\/p>\n<h3>\u00c9valuer le niveau d&rsquo;accessibilit\u00e9 des formulaires<\/h3>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-539\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/20-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/20-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/20-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/20-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/20-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/20.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p>Nouvelle section et th\u00e9matique : quelques r\u00e8gles cette fois-ci qui vont porter sur les formulaires.<\/p>\n<h4>Les libell\u00e9s sont-ils proches de leur champ ?<\/h4>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-540\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/21-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/21-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/21-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/21-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/21-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/21.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p>Premi\u00e8re chose qui peut \u00eatre test\u00e9e assez facilement, je pense, c\u2019est l\u2019agencement, la mise en page des formulaires.<\/p>\n<p>Une r\u00e8gle demande que les libell\u00e9s des champs soient proches les uns des autres.<\/p>\n<p class=\"ice-block\">Un libell\u00e9 doit \u00eatre <strong>le plus proche possible<\/strong> de son champ correspondant. Il faut id\u00e9alement que <strong>quelques pixels<\/strong> les s\u00e9parent.<\/p>\n<p>On va de nouveau aller sur une page Web pour vous montrer comment v\u00e9rifier \u00e7a. Cette fois-ci, je me rends sur le <a href=\"https:\/\/brest.fr\/\">site de Brest m\u00e9tropole<\/a>, je suis sur <a href=\"https:\/\/brest.fr\/contacter-nos-services\">leur formulaire \u00ab Contacter nos services \u00bb<\/a>.<\/p>\n<p>Ce que je vais v\u00e9rifier, c\u2019est que les libell\u00e9s (nom, pr\u00e9nom, adresse, etc), toutes les \u00e9tiquettes soient visuellement proches de leur champ de saisie correspondant.<\/p>\n<p>Si je m\u2019arr\u00eate au champ \u00ab Nom \u00bb, je vois que, visuellement, il est tr\u00e8s proche de son champ correspondant.<\/p>\n<p>Si je descends en bas, j\u2019arrive sur la case \u00e0 cocher \u00ab Donn\u00e9es personnelles \u00bb, je remarque que la case est tr\u00e8s proche de l\u2019\u00e9tiquette, \u00e7a a l\u2019air d\u2019\u00eatre parfaitement accessible sur cette page au niveau de cette r\u00e8gle.<\/p>\n<p>Petite particularit\u00e9, les r\u00e8gles internationales demandent que les \u00e9tiquettes des listes d\u00e9roulantes et champs de saisie se positionnent au-dessus ou \u00e0 gauche.<\/p>\n<p>En revanche, les \u00e9tiquettes des boutons radio et des cases \u00e0 cocher doivent \u00eatre positionn\u00e9es \u00e0 droite ou en dessous. La r\u00e8gle impose ceci.<\/p>\n<p class=\"ice-block is-grey\">Et j\u2019ai oubli\u00e9 de l\u2019indiquer, cette r\u00e8gle de positionnement des \u00e9tiquettes proches de leur champ de saisie correspondant est particuli\u00e8rement importante pour les <strong>personnes malvoyantes qui utilisent des loupes d\u2019\u00e9cran<\/strong>.<\/p>\n<p>On a des personnes qui utilisent des loupes syst\u00e8mes, comme je le montre ici, qui peuvent avoir des niveaux de zoom tr\u00e8s \u00e9lev\u00e9s, jusqu\u2019\u00e0 900%.<\/p>\n<p>Et quand on a des champs de saisie trop \u00e9loign\u00e9s de leur \u00e9tiquette, \u00e7a peut entra\u00eener des confusions et erreurs de saisie, on pense renseigner un champ et on en renseigne finalement un autre.<\/p>\n<p>Cet accolage des \u00e9tiquettes \u00e0 leur champ, c\u2019est tr\u00e8s important aussi pour les <strong>personnes avec des troubles de l\u2019apprentissage<\/strong>.<\/p>\n<p>Je vais peut-\u00eatre acc\u00e9l\u00e9rer un petit peu, je vois que le temps court.<\/p>\n<h4>Les champs obligatoires sont-ils indiqu\u00e9s ?<\/h4>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-541\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/22-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/22-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/22-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/22-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/22-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/22.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p>Toujours dans les formulaires, r\u00e8gle facile \u00e0 tester aussi, c\u2019est l\u2019indication des champs obligatoires.<\/p>\n<p class=\"ice-block\">Dans un formulaire, ce qui est important, c\u2019est de <strong>distinguer les champs obligatoires des champs facultatifs<\/strong>.<\/p>\n<p>La premi\u00e8re approche, c\u2019est celle qu\u2019a utilis\u00e9e la <a href=\"https:\/\/www.fondationvalentinhauy.fr\/contact\/\">Fondation Valentin Ha\u00fcy<\/a>. Ils ont utilis\u00e9 une mention \u00ab&nbsp;N\u00e9cessaire&nbsp;\u00bb dans l\u2019\u00e9tiquette \u00e0 c\u00f4t\u00e9 de \u00ab&nbsp;Pr\u00e9nom&nbsp;\u00bb, le champ est obligatoire, ils ont mis \u00ab N\u00e9cessaire \u00bb. Ils auraient pu utiliser le <i lang=\"en\">wording<\/i> \u00ab Obligatoire \u00bb, mais \u00ab N\u00e9cessaire \u00bb fonctionne.<\/p>\n<p>L\u2019autre approche, c\u2019est de passer\u2026 Je vais cette fois-ci sur le <a href=\"https:\/\/ideance.net\/blog\/en\/\">blog d\u2019Ideance<\/a>, de <strong>passer par des ast\u00e9risques (*)<\/strong> qui sont souvent utilis\u00e9s dans les formulaires, qui sont entr\u00e9s dans les m\u0153urs.<\/p>\n<p>Mais si vous utilisez un symbole pour indiquer que le champ est obligatoire, il est n\u00e9cessaire, au tout d\u00e9but du formulaire, d\u2019<strong>indiquer une l\u00e9gende<\/strong> qui pr\u00e9cise que ce fameux ast\u00e9risque est utilis\u00e9 pour les champs obligatoires.<\/p>\n<p>On le voit tr\u00e8s souvent lors de nos audits, cette l\u00e9gende est souvent \u00e0 la fin du formulaire. La r\u00e8gle d\u2019accessibilit\u00e9 impose bien d\u2019avoir cette l\u00e9gende sur le caract\u00e8re obligatoire du champ <strong>en tout d\u00e9but de formulaire<\/strong>.<\/p>\n<h4>Les champs sont-ils reli\u00e9s \u00e0 leur libell\u00e9 ?<\/h4>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-542\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/23-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/23-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/23-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/23-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/23-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/23.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p>Poursuivons sur notre v\u00e9rification et \u00e9valuation de l\u2019accessibilit\u00e9 des formulaires avec un autre test, cette fois-ci, qui va nous demander d\u2019utiliser notre souris et de v\u00e9rifier si les champs de saisie, les cases \u00e0 cocher, les boutons radio sont <strong>bien reli\u00e9s \u00e0 leur libell\u00e9<\/strong>, \u00e0 leur \u00e9tiquette correspondante.<\/p>\n<p>Une technique simple : vous prenez votre souris, je reviens sur le <a href=\"https:\/\/brest.fr\/contacter-nos-services\">site Brest m\u00e9tropole<\/a>, et vous cliquez sur les libell\u00e9s \u00e0 la souris.<\/p>\n<p class=\"ice-block is-grey\">Le comportement attendu, c\u2019est que le focus soit donn\u00e9 au champ de saisie correspondant.<\/p>\n<p>Si je clique sur \u00ab Pr\u00e9nom \u00bb, j\u2019ai mon curseur de saisie qui s\u2019est mis automatiquement dans le champ correspondant.<\/p>\n<p>Et \u00e7a, c\u2019est une garantie que <strong>l\u2019\u00e9tiquette est bien rattach\u00e9e techniquement \u00e0 son champ<\/strong>, ce qui va nous garantir que c\u2019est accessible pour certaines technologies d\u2019assistance, dont les synth\u00e8ses vocales ou plages braille.<\/p>\n<p>Attention, il y a des faux positifs. La liste d\u00e9roulante \u00ab Civilit\u00e9 \u00bb, j\u2019ai cliqu\u00e9 dessus et \u00e7a ne m\u2019a pas donn\u00e9 le focus au champ. Mais en r\u00e9alit\u00e9, techniquement, j\u2019ai v\u00e9rifi\u00e9 au pr\u00e9alable, ces deux \u00e9l\u00e9ments sont bien reli\u00e9s.<\/p>\n<p>C\u2019est pour \u00e7a que ce test, le clic sur les libell\u00e9s pour donner le focus champ, peut engendrer des faux positifs, vous allez cliquer sur un \u00e9l\u00e9ment, \u00e7a ne donnera pas le focus, mais en r\u00e9alit\u00e9, c\u2019est bien fait.<\/p>\n<p>C\u2019est un test qui ne donnera pas tous les cas de figure mais qui donnera une id\u00e9e du niveau d\u2019accessibilit\u00e9 du formulaire.<\/p>\n<h4>Des aides \u00e0 la saisie sont-elles pr\u00e9sentes ?<\/h4>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-543\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/24-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/24-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/24-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/24-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/24-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/24.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p>Et dernier test sur la th\u00e9matique formulaire, c\u2019est de v\u00e9rifier, <strong>seulement pour les champs dont la saisie attendue est sp\u00e9cifique et particuli\u00e8re<\/strong>, comme un format de date, comme un format de mot de passe, comme des restrictions pour une pi\u00e8ce jointe qui serait \u00e0 mettre dans son formulaire, pour tout ce qui est champ <strong>susceptible d\u2019engendrer des erreurs de saisie<\/strong>, il est important de proposer au pr\u00e9alable, c\u2019est-\u00e0-dire au chargement de la page, et sans dispara\u00eetre, des <strong>messages d\u2019aide \u00e0 la saisie<\/strong>.<\/p>\n<p>Allons voir de nouveau, on va rester sur ce site\u2026 Oui, on reste sur la <a href=\"https:\/\/brest.fr\/contacter-nos-services\">page \u00ab Contacter nos services \u00bb du site de Brest M\u00e9tropole<\/a>.<\/p>\n<p>Nous avons un champ avec saisie particuli\u00e8re, c\u2019est un champ d\u2019upload de pi\u00e8ces jointes qui a des restrictions, il n\u2019accepte que des fichiers en dessous de 5 Mo et des types autoris\u00e9s qui sont seulement PDF, doc, docx, etc.<\/p>\n<p class=\"ice-block is-green\">L\u2019aide \u00e0 la saisie est propos\u00e9e <strong>au chargement de la page<\/strong>, ce qui \u00e9vite de nombreuses erreurs de saisie et aussi pas mal de frustrations.<\/p>\n<p>Autre exemple d\u2019aide \u00e0 la saisie, cette fois-ci, je me rends sur l&rsquo;espace personnel du site TGV Inoui, dans le <a href=\"https:\/\/tgvinoui.sncf\/inscription\/compte-client-sncf\">formulaire de cr\u00e9ation d\u2019identifiant<\/a>, nous avons un champ \u00ab Mot de passe \u00bb qui a des restrictions, huit caract\u00e8res minimum, avec des majuscules, des minuscules et de nouveau des restrictions.<\/p>\n<p class=\"ice-block is-green\">Cette aide \u00e0 la saisie est propos\u00e9e <strong>proche du champ de saisie<\/strong> concern\u00e9, elle est <strong>toujours apparente<\/strong> et propos\u00e9e au chargement de la page.<\/p>\n<p>Les aides \u00e0 la saisie ne doivent pas \u00eatre mises pour tous les champs, ce ne serait pas n\u00e9cessaire dans un champ \u00ab Nom \u00bb, \u00ab Pr\u00e9nom \u00bb, etc.<\/p>\n<p>Mais pour un champ \u00ab Date de naissance \u00bb, une aide \u00e0 la saisie de type \u00ab JJ\/MM\/AAAA \u00bb est pertinente.<\/p>\n<h3>\u00c9valuer le niveau d&rsquo;accessibilit\u00e9 des vid\u00e9os et des animations<\/h3>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-544\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/25-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/25-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/25-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/25-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/25-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/25.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p>Maintenant, voyons comment \u00e9valuer le niveau g\u00e9n\u00e9ral d\u2019accessibilit\u00e9 des vid\u00e9os, des animations et contenus anim\u00e9s.<\/p>\n<h4>Les vid\u00e9os ont-elles une transcription textuelle ?<\/h4>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-545\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/26-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/26-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/26-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/26-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/26-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/26.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p>La premi\u00e8re chose qu\u2019on peut faire, c\u2019est v\u00e9rifier que les vid\u00e9os, si elles sont informatives, qu&rsquo;elles poss\u00e8dent une transcription textuelle.<\/p>\n<p class=\"ice-block is-grey\">Une transcription textuelle, c\u2019est la reprise de toutes les informations v\u00e9hicul\u00e9es par la vid\u00e9o au format texte. Soit sur la m\u00eame page, soit sur une autre page du site Web.<\/p>\n<p>Quand on parle de toutes les informations v\u00e9hicul\u00e9es par la vid\u00e9o, \u00e7a va \u00eatre tout ce qui est <strong>dialogue<\/strong>, <strong>voix off<\/strong>, mais aussi les <strong>messages affich\u00e9s \u00e0 l\u2019\u00e9cran<\/strong>.<\/p>\n<p>C\u2019est particuli\u00e8rement important pour de nombreuses personnes en situation de handicap, par exemple celles qui n\u2019ont pas acc\u00e8s au player vid\u00e9o, \u00e7a peut \u00eatre aussi utile aux personnes sourdes et malentendantes dans le cas o\u00f9 la vid\u00e9o n\u2019est pas sous-titr\u00e9e, \u00e7a peut \u00eatre int\u00e9ressant aussi pour les personnes aveugles ou malvoyantes si la vid\u00e9o n\u2019est pas audiod\u00e9crite.<\/p>\n<p>Comment v\u00e9rifier \u00e7a ? C\u2019est assez facile. Vous allez sur la page o\u00f9 il y a des vid\u00e9os, c\u2019est ce qu\u2019on va faire ensemble sur le <a href=\"https:\/\/www.lassuranceretraite.fr\">site de l\u2019Assurance Retraite<\/a>. Aux alentours de la vid\u00e9o, vous v\u00e9rifiez que vous avez acc\u00e8s \u00e0 cette fameuse transcription textuelle. Ici, ils l\u2019ont propos\u00e9e via un <strong>syst\u00e8me d\u2019accord\u00e9on en dessous de la vid\u00e9o<\/strong>.<\/p>\n<p class=\"ice-block\">Et l\u2019id\u00e9e ensuite, c\u2019est de v\u00e9rifier que cette transcription textuelle reprend bien toutes les informations v\u00e9hicul\u00e9es par la vid\u00e9o.<\/p>\n<p>Ici, ils ont fait le choix de faire un bouton plier-d\u00e9plier, il y a d\u2019autres approches comme celle du <a href=\"https:\/\/aveuglesdefrance.org\/\">site des Aveugles de France<\/a> qui, eux, ont d\u00e9cid\u00e9 de proposer\u2026<\/p>\n<p><a href=\"https:\/\/aveuglesdefrance.org\/nos-combats\/education-petite-enfance\/\">La vid\u00e9o est ici<\/a>, et la transcription textuelle n\u2019est pas sur la page en elle-m\u00eame mais sur une <a href=\"https:\/\/aveuglesdefrance.org\/transcriptions-videos\/transcription-de-la-video-de-ludovic\/\">page d\u00e9di\u00e9e<\/a>. J\u2019ai cliqu\u00e9 dessus, une nouvelle page s\u2019est charg\u00e9e dans laquelle j\u2019ai la transcription de la vid\u00e9o.<\/p>\n<p>Voil\u00e0 un test qui me semble assez facile \u00e0 faire de votre c\u00f4t\u00e9.<\/p>\n<h4>Les vid\u00e9os ont-elles des sous-titres ?<\/h4>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-546\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/27-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/27-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/27-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/27-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/27-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/27.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p>Toujours sur le sujet des vid\u00e9os, test aussi uniquement visuel, c\u2019est v\u00e9rifier que les vid\u00e9os sont sous-titr\u00e9es.<\/p>\n<p>Crit\u00e8re tr\u00e8s important, r\u00e8gle tr\u00e8s importante pour les personnes d\u00e9ficientes auditives, c\u2019est-\u00e0-dire sourdes et malentendantes, et les sous-titres doivent reprendre <strong>tous les contenus audios v\u00e9hicul\u00e9s par la vid\u00e9o<\/strong> (dialogue et voix off).<\/p>\n<p class=\"ice-block\">Les sous-titres doivent \u00eatre <strong>suffisamment lisibles<\/strong>, c\u2019est-\u00e0-dire contrast\u00e9s.<\/p>\n<p>Il ne faut pas qu\u2019ils soient invisibles, c\u2019est-\u00e0-dire tr\u00e8s clairs sur fond tr\u00e8s clair par exemple. Ils n\u2019auraient plus beaucoup d\u2019int\u00e9r\u00eat.<\/p>\n<p>Et id\u00e9alement, les sous-titres devraient \u00eatre <strong>affichables et masquables sur demande<\/strong>. C\u2019est id\u00e9alement, car c\u2019est d\u00e9j\u00e0 une bonne chose de proposer des sous-titres incrust\u00e9s<\/p>\n<p>Un exemple de vid\u00e9o bien sous-titr\u00e9e : je me remets sur le <a href=\"https:\/\/www.lassuranceretraite.fr\/\">site de l\u2019assurance retraite<\/a>, ils ont fait carr\u00e9ment ceinture et bretelle avec des sous-titres incrust\u00e9s <a href=\"https:\/\/www.lassuranceretraite.fr\/portail-info\/home\/retraite\/vivre-etranger-retraite\/demarches-vie-etranger.html#paragraphe-fad48c30-9fb0-45ce-b65f-c578a7222573\">dans la vid\u00e9o, que vous voyez ici<\/a>.<\/p>\n<p><q>L\u2019assurance retraite verse chaque mois la retraite dans plus de 180 pays<\/q>, c\u2019est exactement ce que la vid\u00e9o vient de dire de mani\u00e8re audio, c\u2019est bien sous-titr\u00e9 et incrust\u00e9, et les sous-titres de YouTube sont propos\u00e9s. Il y a du sous-titrage incrust\u00e9 et externalis\u00e9.<\/p>\n<p>Voil\u00e0 ce que vous pouvez v\u00e9rifier.<\/p>\n<h4>Les animations sont-elles contr\u00f4lables ?<\/h4>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-547\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/28-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/28-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/28-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/28-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/28-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/28.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p>Derni\u00e8re th\u00e9matique : la navigation clavier. Je vais essayer d\u2019aller plus vite\u2026 Ah, si, un point sur les animations \u00e0 voir avec vous\u2026<\/p>\n<p>Il est attendu pour l\u2019accessibilit\u00e9 que, d\u00e8s lors que vous avez des contenus anim\u00e9s, \u00e7a peut \u00eatre des vid\u00e9os d\u2019arri\u00e8re-plan (comme sur le <a href=\"https:\/\/www.chronodrive.com\/\">site de Chronodrive<\/a>) ou des carrousels anim\u00e9s.<\/p>\n<p class=\"ice-block\">Il est possible de proposer des animations, mais il faut proposer un <strong>moyen de les mettre en pause<\/strong>.<\/p>\n<p>\u00c7a se mat\u00e9rialise souvent par ce type de bouton. Ici, on a un <strong>bouton de mise en pause et de relance des animations<\/strong>.<\/p>\n<p>Voil\u00e0 ce que vous pouvez v\u00e9rifier quand vous croisez des sites Web avec animation : est-ce qu\u2019il y a la possibilit\u00e9 de les mettre en pause et de les relancer via un bouton physique ?<\/p>\n<p>Je prends aussi le temps de vous pr\u00e9senter un autre exemple sur le <a href=\"https:\/\/www.agefiph.fr\/\">site de l\u2019AGEFIPH<\/a> avec un carrousel anim\u00e9, qui d\u00e9file automatiquement, avec aussi un bouton de mise en pause et de relance du mouvement. Voil\u00e0 un point que vous pouvez v\u00e9rifier.<\/p>\n<p>Ce bouton de mise en pause doit \u00eatre <strong>bien visible et bien positionn\u00e9<\/strong>, id\u00e9alement avant l\u2019animation pour qu\u2019il soit atteignable et utilisable facilement pour les personnes qui en ont besoin. Et elles sont assez nombreuses, il y a les <strong>personnes photosensibles, aveugles ou encore fortement malvoyantes<\/strong>, par exemple.<\/p>\n<h3>Tester la navigation au clavier<\/h3>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-548\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/29-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/29-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/29-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/29-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/29-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/29.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p>10h40\u2026<\/p>\n<h4>La prise de focus est-elle visible ?<\/h4>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-549\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/30-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/30-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/30-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/30-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/30-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/30.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p>Derni\u00e8re section, tester la navigation au clavier avec une premi\u00e8re chose \u00e0 tester qui est aussi abordable par tout un chacun, c\u2019est de v\u00e9rifier que la prise de focus est visible.<\/p>\n<p class=\"ice-block\">Pour tester une prise de focus, il s\u2019agit de quitter sa souris et d\u2019utiliser uniquement la <strong>touche de tabulation de son clavier<\/strong>.<\/p>\n<p>Ce qu\u2019on va faire, je vais aller sur un site Web qui g\u00e8re \u00e7a tr\u00e8s bien, on retourne sur le <a href=\"https:\/\/www.spie.com\/\">site de Spie<\/a>, je quitte ma souris et j\u2019utilise exclusivement mon clavier et la touche de tabulation et je vais <strong>parcourir tous les \u00e9l\u00e9ments interactifs<\/strong> pr\u00e9sents dans la page (liens, boutons et \u00e9l\u00e9ments de formulaire).<\/p>\n<p class=\"ice-block\">Ce qu\u2019il faut v\u00e9rifier, c\u2019est que j\u2019ai bien un <strong>indicateur visuel suffisamment visible<\/strong> qui me pr\u00e9sente, qui m\u2019indique o\u00f9 je me situe lors de ma navigation au clavier.<\/p>\n<p>L\u00e0, je suis en train d\u2019appuyer sur la touche de tabulation et je vois que j\u2019ai un contour bleu sur l\u2019\u00e9l\u00e9ment interactif sur lequel je me trouve. J\u2019ai une belle visibilit\u00e9 du focus. Et \u00e7a, c\u2019est tr\u00e8s important pour les personnes d\u00e9ficientes motrices.<\/p>\n<p>Deuxi\u00e8me exemple, cette fois-ci sur le <a href=\"https:\/\/ideance.net\/blog\/en\/\">site Ideance<\/a>. Cette fois-ci, le contour est jaune, mais il est tr\u00e8s <strong>lisible et suffisamment contrast\u00e9<\/strong>.<\/p>\n<p>C\u2019est le premier test que vous pouvez faire, qui est tr\u00e8s important pour les <strong>personnes d\u00e9ficientes motrices<\/strong> qui n\u2019utilisent pas de souris.<\/p>\n<h4>L&rsquo;ordre de tabulation est-il logique ?<\/h4>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-550\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/31-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/31-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/31-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/31-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/31-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/31.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p>On peut aussi tester l\u2019ordre de tabulation.<\/p>\n<p>C\u2019est : je tabule de la m\u00eame mani\u00e8re que je l\u2019ai fait pour v\u00e9rifier ma visibilit\u00e9 de focus, mais cette fois-ci, je v\u00e9rifie que l\u2019<strong>ordre des \u00e9l\u00e9ments<\/strong> que j\u2019atteins est <strong>logique<\/strong>, c\u2019est-\u00e0-dire de haut en bas et de gauche \u00e0 droite.<\/p>\n<p>Il faut que ma navigation se fasse en Z, finalement.<\/p>\n<p class=\"ice-block is-red\">Il ne faudrait pas que je tabule sur un premier \u00e9l\u00e9ment dans l\u2019en-t\u00eate, puis ensuite en pied de page, puis dans l\u2019en-t\u00eate\u2026 L\u00e0, on serait face \u00e0 un ordre de tabulation qui ne serait pas coh\u00e9rent.<\/p>\n<p>Il faut \u00eatre sur quelque chose de logique et lin\u00e9aire.<\/p>\n<p>On a quelques particularit\u00e9s quand on a des fen\u00eatres modales qui s\u2019affichent, mais c\u2019est un peu trop particulier pour \u00e9voquer \u00e7a aujourd\u2019hui.<\/p>\n<p>Et ce qu\u2019il faut aussi surtout v\u00e9rifier, mais c\u2019est assez rare d\u2019en croiser, c\u2019est que <strong>le focus ne soit pas pi\u00e9g\u00e9<\/strong>.<\/p>\n<p>Il peut arriver sur certains sites Web que le focus reste sur un \u00e9l\u00e9ment et qu\u2019on continue d\u2019appuyer sur la touche de tabulation et que le focus reste coinc\u00e9 sur l\u2019\u00e9l\u00e9ment en question.<\/p>\n<p>C\u2019est un d\u00e9faut <strong>extr\u00eamement bloquant<\/strong> d\u2019accessibilit\u00e9, mais c\u2019est assez rare d\u2019en croiser, et heureusement.<\/p>\n<h4>L&rsquo;interface fonctionne-t-elle au clavier seul ?<\/h4>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-551\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/32-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/32-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/32-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/32-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/32-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/32.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p>Ensuite et enfin, dernier test que je vous propose de faire, c\u2019est peut-\u00eatre le plus d\u00e9licat et qui peut prendre le plus de temps, c\u2019est de v\u00e9rifier que toutes les interactions possibles sur une page Web, sur un site Web, avec une souris, soient possibles \u00e9galement <strong>avec un clavier seul<\/strong>.<\/p>\n<p>S\u2019il est possible d\u2019activer des liens avec une souris, il faut v\u00e9rifier qu\u2019ils soient actionnables avec le clavier.<\/p>\n<p class=\"ice-block\">S\u2019il y a des menus d\u00e9roulants, des syst\u00e8mes d\u2019accord\u00e9on, des fen\u00eatres modales, des infobulles qui fonctionnent \u00e0 la souris, v\u00e9rifiez qu\u2019ils fonctionnent aussi avec le clavier.<\/p>\n<p>V\u00e9rifiez aussi qu\u2019on peut remplir la totalit\u00e9 des formulaires avec un clavier.<\/p>\n<p>Je prends un petit exemple et apr\u00e8s, je vais devoir arr\u00eater pour laisser la place aux questions\u2026<\/p>\n<p>Je vais juste prendre un exemple sur le <a href=\"https:\/\/www.fondationvalentinhauy.fr\/\">site de la fondation Valentin Ha\u00fcy<\/a>, qui poss\u00e8de un menu principal dont certaines entr\u00e9es sont d\u00e9roulantes.<\/p>\n<p>J\u2019utilise mon clavier, j\u2019ai de nouveau quitt\u00e9 ma souris. Et je vais faire \u00ab <kbd>Entr\u00e9e<\/kbd> \u00bb sur le bouton \u00ab Fondation \u00bb et je v\u00e9rifie que le sous-menu s\u2019affiche. C\u2019est le cas.<\/p>\n<p>Je rappuie sur \u00ab <kbd>Entr\u00e9e<\/kbd> \u00bb pour v\u00e9rifier que je peux masquer le menu. \u00c7a marche aussi.<\/p>\n<p>Voil\u00e0 les actions que vous pouvez faire pour v\u00e9rifier qu\u2019un site est accessible avec un clavier.<\/p>\n<h3>Pour aller plus loin dans vos \u00e9valuations<\/h3>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-552\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/33-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/33-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/33-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/33-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/33-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/33.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p>Si vous voulez aller plus loin dans vos tests, on vous recommande\u2026<\/p>\n<h4>Des ressources d&rsquo;accessibilit\u00e9 num\u00e9rique<\/h4>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-553\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/34-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/34-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/34-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/34-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/34-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/34.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p>On vous propose d\u2019aller jeter un \u0153il \u00e0 une page de <a href=\"https:\/\/ideance.net\/blog\/en\/fr\/ressources-accessibilite-numerique\/\">ressources<\/a> que l\u2019on maintient chez Ideance, qui est sectionn\u00e9e avec deux sections qui pourraient vous int\u00e9resser pour poursuivre ces tests, vos \u00e9valuations de sites Web.<\/p>\n<p>Une premi\u00e8re section qui pr\u00e9sente <a href=\"https:\/\/ideance.net\/blog\/en\/fr\/ressources-accessibilite-numerique\/#section-06\">diff\u00e9rents r\u00e9f\u00e9rentiels et diff\u00e9rentes checklists de l\u2019\u00e9valuation de l\u2019accessibilit\u00e9 num\u00e9rique<\/a>, principalement Web. Attention, c\u2019est un peu plus technique. C\u2019est orient\u00e9 <strong>sp\u00e9cialistes accessibilit\u00e9<\/strong>.<\/p>\n<p>Et une autre section qui pourrait aussi vous int\u00e9resser pour poursuivre vos tests, c\u2019est une section qui concerne des <a href=\"https:\/\/ideance.net\/blog\/en\/fr\/ressources-accessibilite-numerique\/#section-05\">outils de tests automatiques<\/a>, pareil, \u00e0 <strong>utiliser avec vigilance<\/strong> parce que \u00e7a n\u00e9cessite une installation, \u00e7a n\u00e9cessite de <strong>s\u2019approprier l\u2019outil<\/strong>, \u00e7a renvoie pas mal de <strong>faux positifs<\/strong> et de r\u00e9sultats qu\u2019il faut \u00eatre capable de d\u00e9cortiquer et de comprendre.<\/p>\n<p>Je dirais que c\u2019est un <strong>second niveau de v\u00e9rification<\/strong> d\u2019accessibilit\u00e9. Mais si le sujet vous int\u00e9resse et si vous voulez gratter un petit peu plus, n\u2019h\u00e9sitez pas \u00e0 aller jeter un \u0153il \u00e0 tout \u00e7a.<\/p>\n<h3>Merci<\/h3>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-554\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/35-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/35-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/35-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/35-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/35-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/35.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p>Merci pour l\u2019\u00e9coute, merci pour votre pr\u00e9sence.<\/p>\n<p>Et place aux questions si vous en avez.<\/p>\n<h3>Des questions ?<\/h3>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-555\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/36-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/36-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/36-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/36-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/36-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/36.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p>S\u00e9bastien Delorme :<\/p>\n<p>\u2014 Merci Johan. Il y a quelques questions pour lesquelles il y a eu des r\u00e9ponses dans le chat que je ne reprendrai pas.<\/p>\n<p>N\u2019h\u00e9sitez pas \u00e0 poser de nouvelles questions maintenant, je les reprendrai si besoin. Et je vais reprendre les questions qui n\u2019ont pas eu de r\u00e9ponse.<\/p>\n<p>Pour les plus simples, en termes de r\u00e9ponse, celles qui ont les r\u00e9ponses les plus courtes, une question de Julien qui, <strong>pour le r\u00e9tr\u00e9cissement de l\u2019\u00e9cran jusqu\u2019\u00e0 320 pixels, demande : quid des tableaux ? Est-ce qu\u2019il y a une exception \u00e0 la r\u00e8gle pour le d\u00e9filement horizontal ?<\/strong><\/p>\n<p>Johan Ramon :<\/p>\n<p>\u2014 Tout \u00e0 fait. Je vais aller dans le RGAA pour \u00eatre s\u00fbr de ne pas vous dire des b\u00eatises, qui d\u00e9taille la r\u00e8gle.<\/p>\n<p>La r\u00e8gle en question, je ne connais plus\u2026 c\u2019est le <a href=\"https:\/\/accessibilite.numerique.gouv.fr\/methode\/criteres-et-tests\/#10.11\">crit\u00e8re 10.11<\/a>\u2026 La plupart des r\u00e8gles d\u2019accessibilit\u00e9 poss\u00e8dent des cas particuliers, et justement, sur ce crit\u00e8re, sur cette r\u00e8gle de largeur de 320 pixels, on a une r\u00e8gle qui concerne les tableaux de donn\u00e9es qui, eux, peuvent poss\u00e9der une scrollbar horizontale.<\/p>\n<p>Pour les tableaux de donn\u00e9es, il faut, peu importe la taille de l\u2019\u00e9cran, que tous les contenus soient visibles. En esp\u00e9rant avoir bien r\u00e9pondu \u00e0 la question.<\/p>\n<p>S\u00e9bastien Delorme :<\/p>\n<p>\u2014 J\u2019ai une autre question, on va encha\u00eener sur les titres qui apparaissent dans le haut du navigateur. <strong>Quid d\u2019une longueur maximale des <code>&lt;title&gt;<\/code> si on a beaucoup de filtres, par exemple, sur un formulaire de recherche ?<\/strong><\/p>\n<p>Johan Ramon :<\/p>\n<p>\u2014 Bonne question aussi.<\/p>\n<p>L\u2019accessibilit\u00e9, sauf erreur de ma part, je n\u2019ai jamais vu passer de restriction sur un nombre maximum de caract\u00e8res dans une balise <code>&lt;title&gt;<\/code>, elle pourrait accueillir 300, 400, 500 mots, \u00e7a ne retoquerait rien et ce serait conforme.<\/p>\n<p class=\"ice-block\">Apr\u00e8s, c\u2019est vrai qu\u2019on va quand m\u00eame recommander d\u2019\u00eatre assez court pour que \u00e7a ne soit pas trop verbeux.<\/p>\n<p>Pour ce sujet des filtres, effectivement, on peut se retrouver sur des formulaires, des pages o\u00f9 il y a \u00e9norm\u00e9ment de facettes, de filtres utilisables et actionnables et \u00e7a pourrait \u00eatre non pertinent d\u2019int\u00e9grer tous les filtres utilis\u00e9s dans le <code>&lt;title&gt;<\/code> parce qu\u2019il deviendrait <strong>trop lourd et verbeux<\/strong>.<\/p>\n<p>On peut donc trouver un compromis qui peut \u00eatre, plut\u00f4t que de pr\u00e9ciser tous les filtres utilis\u00e9s, indiquer dans le <code>&lt;title&gt;<\/code> le <strong>nombre de filtres utilis\u00e9s<\/strong>.<\/p>\n<p>Exemple : \u00ab R\u00e9sultats de recherche pour le terme \u00ab handicap \u00bb (cinq filtres utilis\u00e9s, page 2\/3) \u00bb, plut\u00f4t que \u00ab Filtre actualit\u00e9, filtre date, filtre 2023 \u00bb etc., qui rendraient le <code>&lt;title&gt;<\/code> beaucoup trop long.<\/p>\n<p>S\u00e9bastien Delorme :<\/p>\n<p>\u2014 Je pense qu\u2019on a encore la possibilit\u00e9 de g\u00e9rer deux ou trois questions.<\/p>\n<p>J\u2019ai une question\u2026 Je ne suis pas s\u00fbr qu\u2019on ait la r\u00e9ponse tr\u00e8s pr\u00e9cise, la question est : <strong>par d\u00e9faut, les formulaires de Google sont-ils accessibles ?<\/strong> Je vais r\u00e9pondre pour Johan\u2026<\/p>\n<p>J\u2019aurais tendance \u00e0 pr\u00e9ciser que, d\u2019exp\u00e9rience, on est sur des niveaux d\u2019accessibilit\u00e9 plut\u00f4t bons mais on n\u2019est pas \u00e0 l\u2019abri de probl\u00e8mes qu\u2019on pourrait rencontrer. Mais d\u2019exp\u00e9rience, c\u2019est plut\u00f4t correct.<\/p>\n<p>Il y a un sujet qui a l\u2019air de passionner les foules parce que j\u2019ai eu plein de + 1 sur ces questions, c\u2019est la question de la repr\u00e9sentation visuelle du focus.<\/p>\n<p><strong>Du coup, est-ce que la repr\u00e9sentation visuelle du focus par d\u00e9faut des diff\u00e9rents navigateurs permet de toujours obtenir quelque chose de visible ou est-ce qu\u2019il faut revenir dessus ?<\/strong> C\u2019est une question de Julien. Il y a eu pas mal de personnes qui sont int\u00e9ress\u00e9es par la r\u00e9ponse.<\/p>\n<p>Johan Ramon :<\/p>\n<p class=\"ice-block is-green\">\u2014 Il y a eu d\u2019\u00e9normes \u00e9volutions des navigateurs, Firefox ou Chrome, sur l\u2019am\u00e9lioration de la visibilit\u00e9 du focus.<\/p>\n<p>D\u2019apr\u00e8s plusieurs tests que j\u2019ai men\u00e9s il y a quelque temps maintenant, auparavant, les navigateurs affichaient le focus qui \u00e9tait auparavant des pointill\u00e9s, au clic souris, ce qui avait tendance \u00e0 faire qu\u2019ils \u00e9taient supprim\u00e9s car <strong>estim\u00e9s disgracieux<\/strong>.<\/p>\n<p>Premi\u00e8re am\u00e9lioration que les navigateurs ont fait, c\u2019est que \u00e7a ne s\u2019affiche plus au clic souris. L\u00e0, je viens de cliquer sur \u00ab Faire un don \u00bb sur le <a href=\"https:\/\/www.fondationvalentinhauy.fr\/\">site de la fondation Valentin Ha\u00fcy<\/a>, le contour ne s\u2019est pas affich\u00e9.<\/p>\n<p class=\"ice-block is-red\">A l\u2019\u00e9poque, le contour s\u2019affichait, \u00e7a ne plaisait pas et il \u00e9tait supprim\u00e9 en CSS, ce qui causait du tort \u00e0 l\u2019accessibilit\u00e9.<\/p>\n<p>Maintenant, l\u2019outline ne s\u2019affiche plus au clic souris. Et maintenant, ce n\u2019est plus un contour mais un beau <strong>liser\u00e9 dont la couleur s\u2019adapte \u00e0 l\u2019arri\u00e8re-plan<\/strong> et \u00e7a aussi, c\u2019est une \u00e9norme \u00e9volution.<\/p>\n<p>Sur \u00ab Faire un don \u00bb, l\u2019arri\u00e8re-plan est doubl\u00e9 de deux couleurs. L\u2019outline est \u00e0 la fois avec un contour bleu et un contour blanc.<\/p>\n<p class=\"ice-block\">Le contour blanc, il est l\u00e0 pour garantir que le focus soit visible si la couleur d\u2019arri\u00e8re-plan est fonc\u00e9e, et le contour bleu est l\u00e0 pour garantir que le focus est visible si l\u2019arri\u00e8re-plan est clair.<\/p>\n<p>Notez aussi, je rentre un peu plus dans la technique\u2026 Je ne vais pas l\u2019avoir\u2026 Bon, je ne vais pas faire la manipulation, mais il est possible dans des param\u00e9trages cach\u00e9s de Firefox et de Chrome, en tant qu\u2019utilisateur, de changer la couleur et d\u2019autres aspects de l\u2019outline, donc une personne d\u00e9ficiente motrice qui ne serait pas \u00e0 l\u2019aise avec l\u2019outline par d\u00e9faut peut aller dans \u00ab about:config \u00bb de Firefox et demander qu\u2019elle soit rouge par exemple, mais je demande de ne pas surcharger l&rsquo;outline des navigateurs, mais vraiment de laisser cet outline g\u00e9r\u00e9 par le navigateur, c\u2019est la meilleure fa\u00e7on de couvrir tous les cas de figure et que votre focus soit toujours visible.<\/p>\n<p>Sur le site d\u2019Ideance, on l\u2019a fait, on a surcharg\u00e9 la visibilit\u00e9 du focus pour qu\u2019il soit jaune, mais on a fait les tests sur l\u2019enti\u00e8ret\u00e9 de notre site Web, qui est assez restreint, mais quand on surcharge un outline, on a des risques que \u00e7a passe sur certaines superpositions mais pas sur d\u2019autres.<\/p>\n<p>Donc, je vais me r\u00e9p\u00e9ter, mais \u00e0 titre personnel, je recommande de ne pas toucher l\u2019outline du navigateur et de s\u2019en contenter.<\/p>\n<p>S\u00e9bastien Delorme :<\/p>\n<p>\u2014 Je vais prendre une derni\u00e8re question, je suis d\u00e9sol\u00e9, on ne pourra pas prendre toutes les questions, il y en a quelques-unes sur lesquelles il n\u2019y aura pas eu de r\u00e9ponse mais je compl\u00e8terai en pr\u00e9cisant o\u00f9 vous pourrez trouver des r\u00e9ponses.<\/p>\n<p>Il y a une question, je vais juste prendre la r\u00e9ponse, sur les entreprises concern\u00e9es par l\u2019obligation, <strong>est-ce que c\u2019est une obligation de r\u00e9sultat, est-ce que le site doit \u00eatre 100% accessible ou est-ce qu\u2019il y a un minima ?<\/strong><\/p>\n<p>On sort un petit peu de l\u2019objet du webinaire mais on a tendance \u00e0 limiter l\u2019accessibilit\u00e9 \u00e0 la publication d\u2019une d\u00e9claration d\u2019accessibilit\u00e9, mais la loi est claire, c\u2019est une obligation de r\u00e9sultat.<\/p>\n<p>Les organismes doivent \u00eatre <strong>accessibles et conformes au RGAA<\/strong> entre autres, et ensuite, pour l\u2019instant, les sanctions sont plut\u00f4t sur la non-transparence sur ces sujets mais l\u2019obligation l\u00e9gale est bien sur l\u2019obligation de r\u00e9sultat.<\/p>\n<p>Il y avait une autre question qui \u00e9tait : <strong>est-ce qu\u2019il existe des outils pour rendre accessibles sur le pack office de Microsoft sur les posts LinkedIn ?<\/strong><\/p>\n<p>Il existe plus que des outils, en fait, c\u2019est plut\u00f4t <strong>des bonnes pratiques ou des r\u00e8gles \u00e0 respecter<\/strong> quand on va concevoir nos contenus sur ces plateformes, en esp\u00e9rant qu\u2019effectivement, elles aient la capacit\u00e9 de mettre un texte de remplacement, par exemple, ou \u00e0 nous offrir la possibilit\u00e9 de mettre un texte de remplacement par exemple\u2026<\/p>\n<p>Sur la partie pack office de Microsoft, il y a un <a href=\"https:\/\/ideance.net\/blog\/en\/578\/comment-concevoir-un-document-word-accessible-gaad-2023\/\">webinaire<\/a> qui commence \u00e0 11h qui est anim\u00e9 par <a href=\"https:\/\/ideance.net\/blog\/en\/author\/jennifer-bodet\/\">Jennifer<\/a>, je vous mets le lien dans le chat pour y acc\u00e9der directement si vous n\u2019y \u00eates pas inscrit.<\/p>\n<p>Pour LinkedIn, c\u2019est cet apr\u00e8s-midi, il y a un <a href=\"https:\/\/ideance.net\/blog\/en\/780\/les-cles-pour-creer-du-contenu-accessible-sur-les-reseaux-sociaux\/\">webinaire<\/a> sur l\u2019accessibilit\u00e9 des r\u00e9seaux sociaux, ce sujet sera probablement abord\u00e9.<\/p>\n<p>Pour Place In Canvas, c\u2019est plus sp\u00e9cifique, on pourra y r\u00e9pondre par mail, donc, si vous avez des questions, n\u2019h\u00e9sitez pas \u00e0 <a href=\"mailto:johan.ramon@ideance.fr\">envoyer un mail \u00e0 Johan<\/a>.<\/p>\n<p>L\u2019ensemble des supports, des vid\u00e9os enregistr\u00e9es ou parfois des r\u00e9sum\u00e9s ou listes de bonnes pratiques seront disponibles sur notre blog, j\u2019ai remis le lien dans le chat, c\u2019est <a href=\"https:\/\/ideance.net\/blog\/en\/\">ideance.net\/blog<\/a>.<\/p>\n<p>N\u2019h\u00e9sitez pas \u00e0 aller consulter tout \u00e7a. \u00c7a nous prendra quelques jours le temps de tout agr\u00e9ger.<\/p>\n<p class=\"ice-block is-green\">Merci pour votre participation et l\u2019int\u00e9r\u00eat que vous portez \u00e0 l\u2019accessibilit\u00e9.<\/p>\n<p>Je suis oblig\u00e9 de couper cinq minutes plus t\u00f4t afin de laisser \u00e0 nos interpr\u00e8tes le temps de souffler un peu avant de se connecter sur la session suivante, idem pour les v\u00e9lotypistes.<\/p>\n<p>Le lien pour le sous-titrage reste le m\u00eame et le lien pour le webinaire suivant, vous le retrouvez sur le blog \u00e9galement, je l\u2019ai transmis aussi. Merci encore et \u00e0 tr\u00e8s bient\u00f4t.<\/p>\n<h3>Bonne suite de GAAD \u00e0 toutes et tous<\/h3>\n<div class=\"wp-block-image with-shadow with-border-radius\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-556\" src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/37-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/37-1024x576.png 1024w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/37-300x169.png 300w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/37-768x432.png 768w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/37-18x10.png 18w, https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/06\/37.png 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<p>Johan Ramon :<\/p>\n<p>\u2014 Merci aux interpr\u00e8tes LSF et au sous-titrage et \u00e0 tout le monde pour votre pr\u00e9sence. Bonne suite de GAAD \u00e0 tout le monde.<\/p>","protected":false},"excerpt":{"rendered":"<p>Vous souhaitez vous faire une premi\u00e8re id\u00e9e du niveau g\u00e9n\u00e9ral d\u2019accessibilit\u00e9 d\u2019un site web aux personnes handicap\u00e9es ? Alors ce webinaire est fait pour vous ! En effet, un ensemble de manipulations rapides, de techniques simples et d\u2019astuces vous seront pr\u00e9sent\u00e9es afin que vous puissiez estimer par vous-m\u00eame la prise en compte ou non d\u2019un&hellip;<\/p>","protected":false},"author":4,"featured_media":636,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[20,25,12],"tags":[],"class_list":["post-514","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-audit","category-gaad","category-sensibilisation"],"acf":[],"_links":{"self":[{"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/posts\/514","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/comments?post=514"}],"version-history":[{"count":159,"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/posts\/514\/revisions"}],"predecessor-version":[{"id":5060,"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/posts\/514\/revisions\/5060"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/media\/636"}],"wp:attachment":[{"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/media?parent=514"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/categories?post=514"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/tags?post=514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}