{"id":45,"date":"2023-11-05T14:24:56","date_gmt":"2023-11-05T13:24:56","guid":{"rendered":"https:\/\/chezchris.fr\/accessibilite\/?page_id=45"},"modified":"2023-11-05T14:24:56","modified_gmt":"2023-11-05T13:24:56","slug":"tester","status":"publish","type":"page","link":"https:\/\/chezchris.fr\/accessibilite\/tester\/","title":{"rendered":"Tester"},"content":{"rendered":"\n<p>Certains outils logiciels permettent de v\u00e9rifier plus ou moins automatiquement certains crit\u00e8res d&rsquo;accessibilit\u00e9. Il faut noter que seulement 20&nbsp;% environ des tests de conformit\u00e9 sont automatisables. Certains outils d\u2019aide \u00e0 la v\u00e9rification sont r\u00e9pertori\u00e9s \u00e0 cette adresse : La plupart de ces outils sont recens\u00e9s \u00e0 cette adresse&nbsp;: <a href=\"https:\/\/accessibilite.numerique.gouv.fr\/ressources\/methodologie-de-test\/\">https:\/\/accessibilite.numerique.gouv.fr\/ressources\/methodologie-de-test\/<\/a><\/p>\n\n\n\n<p>Autres ressources :<\/p>\n\n\n\n<p>Une initiative tr\u00e8s int\u00e9ressante d&rsquo;entreprises priv\u00e9es avec notamment des notices bien faites : <a href=\"https:\/\/www.accede-web.com\/\">https:\/\/www.accede-web.com\/<\/a><\/p>\n\n\n\n<p>Outil en ligne d&rsquo;aide \u00e0 la d\u00e9tection de probl\u00e8mes d&rsquo;accessibilit\u00e9 : <a href=\"https:\/\/wave.webaim.org\/\">https:\/\/wave.webaim.org\/<\/a><\/p>\n\n\n\n<p>La barre d&rsquo;outils \u00ab\u00a0web developer\u00a0\u00bb : <a href=\"https:\/\/chrispederick.com\/work\/web-developer\/\">https:\/\/chrispederick.com\/work\/web-developer\/<\/a><\/p>\n\n\n\n<p>Analyseur de contraste en ligne : <a href=\"https:\/\/contrast-finder.tanaguru.com\/form.html\">https:\/\/contrast-finder.tanaguru.com\/form.html<\/a><\/p>\n\n\n\n<p>Le logiciel <a href=\"https:\/\/www.tpgi.com\/color-contrast-checker\/\">https:\/\/www.tpgi.com\/color-contrast-checker\/<\/a> et <a href=\"https:\/\/www.tpgi.com\/free-accessibility-testing-tools\/\">https:\/\/www.tpgi.com\/free-accessibility-testing-tools\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Navigation avec le clavier<\/h2>\n\n\n\n<p>L&rsquo; \u00ab\u00a0outline\u00a0\u00bb est le liser\u00e9 visible autour des \u00e9l\u00e9ments d&rsquo;une page HTML recevant le focus comme un lien ou un \u00e9l\u00e9ment de formulaire. Ce liser\u00e9 est tr\u00e8s important pour les internautes qui naviguent avec le clavier : le liser\u00e9 leur signale visuellement quel est l&rsquo;\u00e9l\u00e9ment actif.<\/p>\n\n\n\n<p>La touche \u00ab\u00a0Entr\u00e9e\u00a0\u00bb remplace le clic (pour suivre un lien par exemple) et la touche \u00ab\u00a0tabulation\u00a0\u00bb permet de donner le focus \u00e0 l&rsquo;\u00e9l\u00e9ment suivant (ou pr\u00e9c\u00e9dent en utilisant la combinaison \u00ab\u00a0Maj\u00a0\u00bb + \u00ab\u00a0Tab\u00a0\u00bb).<\/p>\n\n\n\n<p>Un premier test consiste \u00e0 v\u00e9rifier que ce rep\u00e8re est bien visible (crit\u00e8re 10.7 du RGAA). Un souci esth\u00e9tique pousse souvent les d\u00e9veloppeurs ou webmestres \u00e0 ins\u00e9rer dans la feuille de style la d\u00e9claration \u00ab\u00a0outline-style : none\u00a0\u00bb ou \u00ab\u00a0outline-width : 0\u00a0\u00bb, ce qui a pour effet de rendre invisible le liser\u00e9 entourant l&rsquo;\u00e9l\u00e9ment ayant le focus.<\/p>\n\n\n\n<p>Un second test consiste \u00e0 v\u00e9rifier que tous les \u00e9l\u00e9ments de type \u00ab\u00a0lien\u00a0\u00bb ou \u00ab\u00a0\u00e9l\u00e9ment de formulaire\u00a0\u00bb re\u00e7oivent le focus en parcourant l&rsquo;ensemble de la page \u00e0 l&rsquo;aide de la touche \u00ab\u00a0Tab\u00a0\u00bb.<\/p>\n\n\n\n<p>Il faut v\u00e9rifier \u00e9galement que tous ces \u00e9l\u00e9ments re\u00e7oivent le focus dans un ordre logique et coh\u00e9rent et que parmi ces \u00e9l\u00e9ments, ceux qui sont susceptibles d&rsquo;\u00eatre \u00ab\u00a0activ\u00e9s\u00a0\u00bb, comme un lien ou un bouton de validation par exemple, peuvent effectivement l&rsquo;\u00eatre avec la touche \u00ab\u00a0Entr\u00e9e\u00a0\u00bb. Pour un bouton radio ou une case \u00e0 cocher, la touche appropri\u00e9e est la barre d&rsquo;espace alors que ce sont les touches de direction qui, normalement, permettent de choisir un(e) autre bouton ou case.<\/p>\n\n\n\n<p>Soyez vigilant sur :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Les menus d\u00e9roulants. La prise de focus doit \u00eatre \u00e9quivalente au survol de la souris , c&rsquo;est \u00e0 dire d\u00e9rouler le menu pour pouvoir acc\u00e9der au items de sous-menu (crit\u00e8re 7.3 du RGAA).<\/li>\n\n\n\n<li>Les carrousels ou autres \u00e9l\u00e9ments multim\u00e9dia doivent \u00eatre contr\u00f4lables au clavier (crit\u00e8re 4.20 du RGAA). Il faut v\u00e9rifier \u00e9galement que ces \u00e9l\u00e9ments peuvent \u00eatre quitt\u00e9s avec le clavier (crit\u00e8re 12.14 du RGAA).<\/li>\n\n\n\n<li>Les fen\u00eatre modales. Le focus doit rester au sein de cette fen\u00eatre jusqu&rsquo;\u00e0 ce que cette fen\u00eatre soit ferm\u00e9e. Le focus doit alors \u00eatre repositionn\u00e9 sur l&rsquo;\u00e9l\u00e9ment qui a permis l&rsquo;ouverture de la fen\u00eatre modale.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Les images<\/h2>\n\n\n\n<p>Chaque image doit avoir une alternative textuelle (crit\u00e8re 1.1 du RGAA) qui sera restitu\u00e9e par les technologies d&rsquo;assistance comme un lecteur d&rsquo;\u00e9cran par exemple. Ce texte sera \u00e9galement pris en compte par les moteurs de r\u00e9f\u00e9rencement.<\/p>\n\n\n\n<p>Il faut v\u00e9rifier la pr\u00e9sence de l&rsquo;attribut \u00ab\u00a0alt\u00a0\u00bb. En cas d&rsquo;absence, un lecteur d&rsquo;\u00e9cran restituera le contenu de l&rsquo;attribut \u00ab\u00a0src\u00a0\u00bb qui sera g\u00e9n\u00e9ralement non pertinent.<\/p>\n\n\n\n<p>Si l&rsquo;image est purement d\u00e9corative, l&rsquo;attribut \u00ab\u00a0alt\u00a0\u00bb devra \u00eatre vide, alt=\u00a0\u00bb\u00a0\u00bb (cri\u00e8te 1.2 du RGAA).<\/p>\n\n\n\n<p>Si l&rsquo;image est un contenu, l&rsquo;attribut \u00ab\u00a0alt\u00a0\u00bb devra contenir une description pertinente de l&rsquo;image (crit\u00e8re 1.3 du RGAA).<\/p>\n\n\n\n<p>La Web Developer Toolbar de FireFox poss\u00e8de certaines options permettant de simplifier les v\u00e9rifications ci-dessus.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Le titre de page<\/h2>\n\n\n\n<p>Le titre d&rsquo;une page doit se trouver dans la balise \u00ab\u00a0title\u00a0\u00bb et \u00eatre pertinent (crit\u00e8res 8.5 et 8.6 du RGAA).<\/p>\n\n\n\n<p>Deux pages diff\u00e9rentes d&rsquo;un site doivent avoir deux titres diff\u00e9rents, y compris pour les contenus \u00ab\u00a0pagin\u00e9s\u00a0\u00bb (exemple : succession de pages d&rsquo;un processus d&rsquo;achat, d&rsquo;un tutoriel&#8230;).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Les titres<\/h2>\n\n\n\n<p>Chaque page doit \u00eatre structur\u00e9e \u00e0 l&rsquo;aide de titres : balises \u00ab\u00a0h1\u00a0\u00bb \u00e0 \u00ab\u00a0h6\u00a0\u00bb (crit\u00e8re 9.1 du RGAA). Cette structuration doit \u00eatre coh\u00e9rente (crit\u00e8re 9.2 du RGAA) : pas de titre \u00ab\u00a0h2\u00a0\u00bb sans titre \u00ab\u00a0h1\u00a0\u00bb par exemple.<\/p>\n\n\n\n<p>La Web Developer Toolbar de FireFox poss\u00e8de \u00e9galement des options facilitant le contr\u00f4le, en particulier le menu \u00ab\u00a0infos \/ Plan du document\u00a0\u00bb.<\/p>\n\n\n\n<p>Avec HTML5, la structuration en titre a \u00e9volu\u00e9 et pr\u00e9voie une hi\u00e9rarchie de titre autonome pour diff\u00e9rentes sections d&rsquo;une m\u00eame page. Mais pour l&rsquo;instant, les technologies d&rsquo;assistance ne peuvent pas prendre en compte ce changement. Il est donc vivement recommand\u00e9 d&rsquo;utiliser les diff\u00e9rents niveaux de titres avec une vue globale de la page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Tous les crit\u00e8res du RGAA<\/h2>\n\n\n\n<p>La page <a href=\"https:\/\/accessibilite.numerique.gouv.fr\/methode\/criteres-et-tests\/\">https:\/\/accessibilite.numerique.gouv.fr\/methode\/criteres-et-tests\/<\/a> d\u00e9taille, pour chaque crit\u00e8re, la m\u00e9thodologie \u00e0 employer (cliquer sur le signe + \u00e0 droite d\u2019un crit\u00e8re pour obtenir le d\u00e9tail du test \u00e0 r\u00e9aliser).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Certains outils logiciels permettent de v\u00e9rifier plus ou moins automatiquement certains crit\u00e8res d&rsquo;accessibilit\u00e9. Il faut noter que seulement 20&nbsp;% environ des tests de conformit\u00e9 sont automatisables. Certains outils d\u2019aide \u00e0 la v\u00e9rification sont r\u00e9pertori\u00e9s \u00e0 cette adresse : La plupart de ces outils sont recens\u00e9s \u00e0 cette adresse&nbsp;: https:\/\/accessibilite.numerique.gouv.fr\/ressources\/methodologie-de-test\/ Autres ressources : Une initiative tr\u00e8s [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-45","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/chezchris.fr\/accessibilite\/wp-json\/wp\/v2\/pages\/45","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chezchris.fr\/accessibilite\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/chezchris.fr\/accessibilite\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/chezchris.fr\/accessibilite\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chezchris.fr\/accessibilite\/wp-json\/wp\/v2\/comments?post=45"}],"version-history":[{"count":1,"href":"https:\/\/chezchris.fr\/accessibilite\/wp-json\/wp\/v2\/pages\/45\/revisions"}],"predecessor-version":[{"id":46,"href":"https:\/\/chezchris.fr\/accessibilite\/wp-json\/wp\/v2\/pages\/45\/revisions\/46"}],"wp:attachment":[{"href":"https:\/\/chezchris.fr\/accessibilite\/wp-json\/wp\/v2\/media?parent=45"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}