{"id":3659,"date":"2026-07-17T09:32:28","date_gmt":"2026-07-17T09:32:28","guid":{"rendered":"https:\/\/dev.poisson-soluble.com\/?p=3659"},"modified":"2026-07-17T09:41:44","modified_gmt":"2026-07-17T09:41:44","slug":"accessibilite-numerique-et-si-cocher-des-cases-vous-faisait-rater-la-cible","status":"publish","type":"post","link":"https:\/\/dev.poisson-soluble.com\/en\/accessibilite-numerique-et-si-cocher-des-cases-vous-faisait-rater-la-cible\/","title":{"rendered":"Accessibilit\u00e9 num\u00e9rique : et si cocher des cases vous faisait rater la cible ?"},"content":{"rendered":"<div data-elementor-type=\"wp-post\" data-elementor-id=\"3659\" class=\"elementor elementor-3659\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-431004b e-flex e-con-boxed e-con e-parent\" data-id=\"431004b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4f31831 maillageInterne elementor-widget elementor-widget-text-editor\" data-id=\"4f31831\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>D\u2019apr\u00e8s une intervention effectu\u00e9e par Vanessa STRUB et Gabriel PILLET au Forum des utilisateurs de PHP \u00e0 Lyon et suivie par nos d\u00e9veloppeurs David et St\u00e9phane, l&rsquo;accessibilit\u00e9 sur le web m\u00e9rite d&rsquo;\u00eatre profond\u00e9ment r\u00e9interrog\u00e9e. Voici ce qu&rsquo;il faut en retenir.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3585408 e-con-full e-flex e-con e-child\" data-id=\"3585408\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6e8e9b7 elementor-widget elementor-widget-heading\" data-id=\"6e8e9b7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">C\u2019est le grand paradoxe du web moderne.<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fac4035 maillageInterne elementor-widget__width-inherit elementor-widget elementor-widget-text-editor\" data-id=\"fac4035\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>D&rsquo;un c\u00f4t\u00e9, les r\u00e9glementations se durcissent (RGAA, directives europ\u00e9ennes) et obligent les entreprises \u00e0 se pencher sur l&rsquo;accessibilit\u00e9 de leurs plateformes num\u00e9riques. De l&rsquo;autre, on assiste \u00e0 une course \u00e0 la conformit\u00e9 administrative o\u00f9 l&rsquo;objectif principal est devenu d&rsquo;obtenir un \u00ab\u00a0tampon\u00a0\u00bb ou un pourcentage sur un rapport d&rsquo;audit.<br \/>Le probl\u00e8me ? \u00c0 force de concevoir l&rsquo;accessibilit\u00e9 comme une simple check-list r\u00e9glementaire, on oublie l&rsquo;essentiel : les humains qui naviguent derri\u00e8re l&rsquo;\u00e9cran . Une page peut \u00eatre techniquement \u00ab\u00a0valide\u00a0\u00bb sur un outil de scan automatique, mais s&rsquo;av\u00e9rer un enfer d&rsquo;usage pour un v\u00e9ritable utilisateur.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c9019b8 elementor-widget__width-inherit elementor-widget elementor-widget-heading\" data-id=\"c9019b8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Le handicap en chiffres : d\u00e9truire le mythe de la \"minorit\u00e9\"<span style=\"color:#ed6c84\">.<\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-763b715 maillageInterne elementor-widget__width-inherit elementor-widget elementor-widget-text-editor\" data-id=\"763b715\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Lorsque l&rsquo;on parle d&rsquo;accessibilit\u00e9 (ou A11y), l&rsquo;excuse la plus fr\u00e9quente des entreprises est souvent : \u00ab Mais nous, on n&rsquo;a pas d&rsquo;utilisateurs handicap\u00e9s ! \u00bb. C&rsquo;est une double erreur : d&rsquo;une part, un site non accessible emp\u00eache pr\u00e9cis\u00e9ment ces personnes de venir ; d&rsquo;autre part, les statistiques montrent que la r\u00e9alit\u00e9 est bien diff\u00e9rente de l&rsquo;image que l&rsquo;on s&rsquo;en fait:<\/p><ul><li><strong>12 millions de Fran\u00e7ais<\/strong> sont touch\u00e9s par un handicap, soit environ 17,5 % de la population.<\/li><li><strong>80 % des handicaps sont invisibles.<\/strong> On ne parle pas seulement de c\u00e9cit\u00e9 ou de fauteuil roulant, mais de maladies chroniques invalidantes (diab\u00e8te, \u00e9pilepsie), de troubles cognitifs (dyslexie, TDAH) ou psychiques.<\/li><li><strong>85 % des handicaps surviennent au cours de la vie.<\/strong> Seuls 15 % sont pr\u00e9sents d\u00e8s la naissance.<\/li><li><strong>1 personne sur 2<\/strong> sera confront\u00e9e \u00e0 une situation de handicap (temporaire ou permanente) au cours de son existence (une fracture du bras qui emp\u00eache d&rsquo;utiliser la souris, une fatigue visuelle, un environnement bruyant).<br \/>L&rsquo;accessibilit\u00e9 n&rsquo;est donc pas une fonctionnalit\u00e9 de niche pour quelques crit\u00e8res d&rsquo;audit : c&rsquo;est un enjeu qui concerne tout le monde.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f09ea0c elementor-widget__width-inherit elementor-widget elementor-widget-heading\" data-id=\"f09ea0c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Du code \u00e0 l'usage : le r\u00f4le crucial de la s\u00e9mantique et d\u2019ARIA<span style=\"color:#ed6c84\">.<\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ed5082e elementor-widget elementor-widget-heading\" data-id=\"ed5082e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Pour les \u00e9quipes de d\u00e9veloppement, l'accessibilit\u00e9 commence par le respect des fondamentaux du web<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a2be9f3 maillageInterne elementor-widget__width-inherit elementor-widget elementor-widget-text-editor\" data-id=\"a2be9f3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Le navigateur g\u00e9n\u00e8re ce qu&rsquo;on appelle un arbre d&rsquo;accessibilit\u00e9 destin\u00e9 aux technologies d&rsquo;assistance (comme les lecteurs d&rsquo;\u00e9cran). Si le code HTML n&rsquo;est pas s\u00e9mantique, la machine ne peut rien deviner.<br \/>L&rsquo;exemple le plus classique est le fameux bouton &laquo;&nbsp;burger&nbsp;&raquo; des menus mobiles. Cod&eacute; avec une simple balise &lt;div&gt; ou une image, il fonctionne &agrave; la souris mais reste totalement invisible pour un utilisateur naviguent au clavier ou via une synth&egrave;se vocale.<\/p><p><br \/>C\u2019est ici qu\u2019interviennent la s\u00e9mantique native et les sp\u00e9cifications <strong>ARIA (Accessible Rich Internet Applications)<\/strong>:<\/p><ul><li><strong>La s\u00e9mantique d\u2019abord :<\/strong> On utilise de vrais \u00e9l\u00e9ments HTML (&lt;button&gt;, &lt;nav&gt;, &lt;main&gt;) qui portent nativement leur r\u00f4le et leur comportement au clavier (gestion de la touche Entr\u00e9e\/Espace).<\/li><li><strong>ARIA en renfort :<\/strong> ARIA ne remplace pas le HTML, il le compl\u00e8te lorsque le design exige des composants dynamiques complexes (modales, accord\u00e9ons, onglets). Des attributs comme aria-expanded=\u00a0\u00bbtrue\/false\u00a0\u00bb permettent d&rsquo;indiquer au lecteur d&rsquo;\u00e9cran si un menu est ouvert ou ferm\u00e9. L&rsquo;attribut aria-label donne un nom clair \u00e0 un bouton qui ne contient qu&rsquo;une ic\u00f4ne graphique.<\/li><\/ul><p><em>La r\u00e8gle d&rsquo;or des devs : le meilleur ARIA est celui dont on n&rsquo;a pas besoin, car on a utilis\u00e9 le bon tag HTML natif<\/em><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-14681a6 maillageInterne elementor-widget__width-inherit elementor-widget elementor-widget-text-editor\" data-id=\"14681a6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Le constat est sans appel : les positions naturelles classiques sont pouss\u00e9es sous la ligne de flottaison. C&rsquo;est la preuve par l&rsquo;image que le trafic de demain ne se captera plus en essayant de tromper un algorithme, mais en devenant la source de confiance de l&rsquo;IA.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9723202 elementor-widget__width-inherit elementor-widget elementor-widget-heading\" data-id=\"9723202\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">La bo\u00eete \u00e0 outils : comment tester l'accessibilit\u00e9 \u00e0 votre niveau <span style=\"color:#ed6c84\">?<\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2ea2482 maillageInterne elementor-widget__width-inherit elementor-widget elementor-widget-text-editor\" data-id=\"2ea2482\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Un audit de conformit\u00e9 RGAA intervient souvent trop tard, en fin de projet, quand corriger les erreurs co\u00fbte trois fois plus cher. Pour \u00e9viter d&rsquo;attendre l&rsquo;iceberg, l&rsquo;assurance qualit\u00e9 (QA) et le test d&rsquo;accessibilit\u00e9 doivent s&rsquo;int\u00e9grer au fil des sprints.<br \/>Voici les outils indispensables utilis\u00e9s par nos d\u00e9veloppeurs chez Poisson Soluble:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8e57353 elementor-widget elementor-widget-heading\" data-id=\"8e57353\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">1. Votre propre clavier (Gratuit et infaillible)\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f075be8 maillageInterne elementor-widget__width-inherit elementor-widget elementor-widget-text-editor\" data-id=\"f075be8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>C&rsquo;est le test le plus simple et le plus puissant. L\u00e2chez votre souris. Pouvez-vous naviguer sur l&rsquo;ensemble de votre site uniquement avec la touche Tab (pour avancer), Maj+Tab (pour reculer), Espace \/ Entr\u00e9e (pour cliquer) et \u00c9chap (pour fermer une modale) ? Est-ce que le focus (la bordure de s\u00e9lection) est bien visible \u00e0 l&rsquo;\u00e9cran ? Si la r\u00e9ponse est non, le site n&rsquo;est pas accessible.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1da4640 elementor-widget elementor-widget-heading\" data-id=\"1da4640\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">2. Les extensions de navigateur pour un premier check automatique<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-952e28f maillageInterne elementor-widget__width-inherit elementor-widget elementor-widget-text-editor\" data-id=\"952e28f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Pour rep\u00e9rer les erreurs grossi\u00e8res de code ou de design d\u00e8s l&rsquo;int\u00e9gration:<\/p><ul><li><strong>WAVE (Web Accessibility Evaluation Tool) :<\/strong> Id&eacute;al pour visualiser en un clic la structure des titres (&lt;h1&gt;, &lt;h2&gt;), les oublis de textes alternatifs sur les images et les erreurs s&eacute;mantiques.<\/li><li><strong>Axe DevTools :<\/strong> Une extension incontournable pour les d\u00e9veloppeurs qui scanne le DOM et liste les non-conformit\u00e9s directement dans la console d&rsquo;inspection.<\/li><li><strong>HeadingsMap :<\/strong> Permet de v\u00e9rifier d&rsquo;un coup d&rsquo;\u0153il si l&rsquo;arborescence de vos titres est logique et sans rupture (essentiel pour les personnes qui naviguent de titre en titre).<\/li><li><strong>WCAG Contrast Checker :<\/strong> Pour valider que le ratio de contraste entre la couleur du texte et l&rsquo;arri\u00e8re-plan respecte les exigences d&rsquo;accessibilit\u00e9.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a3bdc27 elementor-widget elementor-widget-heading\" data-id=\"a3bdc27\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">3. Les lecteurs d'\u00e9cran (Pour tester l'accessibilit\u00e9 r\u00e9elle)\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a069311 maillageInterne elementor-widget__width-inherit elementor-widget elementor-widget-text-editor\" data-id=\"a069311\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Rien ne remplace le fait de tester avec le v\u00e9ritable outil de l&rsquo;utilisateur.<\/p><ul><li><strong>Sur PC :<\/strong> Utilisez NVDA, un lecteur d&rsquo;\u00e9cran open source et gratuit qui lit le code dans l&rsquo;ordre du DOM.<\/li><li><strong>Sur votre smartphone :<\/strong> Vous avez tous un outil de test dans la poche. Activez VoiceOver (iOS) ou TalkBack (Android) dans vos param\u00e8tres d&rsquo;accessibilit\u00e9 (ou via un triple-clic sur le bouton lat\u00e9ral). Fermez les yeux (ou activez l&rsquo;option \u00ab\u00a0rideau noir\u00a0\u00bb) et tentez de naviguer : vous entendrez imm\u00e9diatement l\u00e0 o\u00f9 l&rsquo;exp\u00e9rience utilisateur se brise.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c47eb7e e-con-full e-flex e-con e-child\" data-id=\"c47eb7e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0df5a92 elementor-absolute elementor-widget elementor-widget-html\" data-id=\"0df5a92\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"circle\"><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-58d1713 elementor-widget__width-initial elementor-widget elementor-widget-heading\" data-id=\"58d1713\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Ce qu'il faut retenir : l'accessibilit\u00e9 est de l'empathie, pas de la paperasse<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ea17279 elementor-widget elementor-widget-heading\" data-id=\"ea17279\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Consid\u00e9rer l\u2019accessibilit\u00e9 num\u00e9rique sous le seul angle de la contrainte l\u00e9gale est une erreur de cible.<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b4d3a77 maillageInterne elementor-widget__width-inherit elementor-widget elementor-widget-text-editor\" data-id=\"b4d3a77\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>C&rsquo;est un puissant levier d&rsquo;innovation, d&rsquo;am\u00e9lioration SEO (les robots d&rsquo;indexation naviguent exactement comme des lecteurs d&rsquo;\u00e9cran) et de responsabilit\u00e9 soci\u00e9tale (RSE).<br \/>La bienveillance et l&#8217;empathie sont les meilleurs outils d\u2019une \u00e9quipe produit. Ne visez pas un score abstrait sur un tableur au d\u00e9triment de l&rsquo;usage. Visez un web plus juste, plus propre et plus humain.<br \/>Chez Poisson Soluble, nous int\u00e9grons ces tests et cette rigueur s\u00e9mantique d\u00e8s les premi\u00e8res lignes de code de vos applications.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9bfdade btn animated-slow elementor-invisible elementor-widget elementor-widget-button\" data-id=\"9bfdade\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:550}\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/dev.poisson-soluble.com\/en\/actualites\/\" id=\"btnPourvous\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Retour aux actualit\u00e9s<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>D\u2019apr\u00e8s une intervention effectu\u00e9e par Vanessa STRUB et Gabriel PILLET au Forum des utilisateurs de PHP \u00e0 Lyon et suivie par nos d\u00e9veloppeurs David et St\u00e9phane, l&rsquo;accessibilit\u00e9 sur le web m\u00e9rite d&rsquo;\u00eatre profond\u00e9ment r\u00e9interrog\u00e9e. Voici ce qu&rsquo;il faut en retenir. C\u2019est le grand paradoxe du web moderne. D&rsquo;un c\u00f4t\u00e9, les r\u00e9glementations se durcissent (RGAA, directives [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3660,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[22],"tags":[],"class_list":["post-3659","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-formation"],"acf":[],"_links":{"self":[{"href":"https:\/\/dev.poisson-soluble.com\/en\/wp-json\/wp\/v2\/posts\/3659","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.poisson-soluble.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev.poisson-soluble.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev.poisson-soluble.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.poisson-soluble.com\/en\/wp-json\/wp\/v2\/comments?post=3659"}],"version-history":[{"count":4,"href":"https:\/\/dev.poisson-soluble.com\/en\/wp-json\/wp\/v2\/posts\/3659\/revisions"}],"predecessor-version":[{"id":3665,"href":"https:\/\/dev.poisson-soluble.com\/en\/wp-json\/wp\/v2\/posts\/3659\/revisions\/3665"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dev.poisson-soluble.com\/en\/wp-json\/wp\/v2\/media\/3660"}],"wp:attachment":[{"href":"https:\/\/dev.poisson-soluble.com\/en\/wp-json\/wp\/v2\/media?parent=3659"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.poisson-soluble.com\/en\/wp-json\/wp\/v2\/categories?post=3659"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.poisson-soluble.com\/en\/wp-json\/wp\/v2\/tags?post=3659"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}