Labo A11y – Style Boscop<\/title>\n <style>\n \/* --- CLASSES UTILITAIRES POUR LE TEST --- *\/\n \n \/* 1. Sr-only (Standard Accessibilit\u00e9) *\/\n .sr-only {\n border: 0 !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n height: 1px !important;\n margin: -1px !important;\n overflow: hidden !important;\n padding: 0 !important;\n position: absolute !important;\n width: 1px !important;\n white-space: nowrap !important;\n }\n\n \/* 2. Classes de masquage visuel *\/\n .vis-hidden { visibility: hidden; }\n .disp-none { display: none; }\n .opacity-zero { opacity: 0; }\n \n \/* Footer style *\/\n footer {\n margin-top: 4rem;\n padding: 2rem 0;\n border-top: 1px solid #e0e0e0;\n text-align: center;\n font-size: 0.9rem;\n color: var(--text-light);\n }\n <\/style>\n<\/head>\n<body>\n\n <header>\n <div class=\"container\">\n <a href=\"#\" class=\"logo\">\n Boscop_Test <span>| Laboratoire Accessibilit\u00e9<\/span>\n <\/a>\n <\/div>\n <\/header>\n\n <main class=\"container\">\n \n <div class=\"intro-block\">\n <h1>Comprendre le masquage<\/h1>\n <p class=\"subtitle\">Ce laboratoire permet de tester le comportement r\u00e9el des technologies d’assistance face aux diff\u00e9rentes techniques CSS et HTML de masquage.<\/p>\n <\/div>\n\n <section>\n <h2>1. L’attribut <span class=\"badge\">aria-hidden=\u00a0\u00bbtrue\u00a0\u00bb<\/span><\/h2>\n <p>Cet attribut indique aux technologies d’assistance d’ignorer l’\u00e9l\u00e9ment, m\u00eame s’il est visible.<\/p>\n \n <div class=\"test-zone\" aria-hidden=\"true\">\n <p><strong>Test Visuel :<\/strong> Vous voyez ce texte.<\/p>\n <p><strong>Test Vocal :<\/strong> Votre lecteur d’\u00e9cran doit rester muet ici.<\/p>\n <br>\n <button onclick=\"alert('Bouton cliqu\u00e9 !')\">Bouton (Pi\u00e8ge)<\/button>\n <p style=\"font-size: 0.85em; margin-top: 10px;\"><em>\u26a0\ufe0f Attention : Essayez de naviguer avec TAB. Si vous atteignez le bouton ci-dessus alors qu’il est aria-hidden, c’est une violation des r\u00e8gles WCAG.<\/em><\/p>\n <\/div>\n <\/section>\n\n <section>\n <h2>2. La classe <span class=\"badge\">.sr-only<\/span><\/h2>\n <p>La m\u00e9thode standard pour cacher du contenu visuellement tout en le laissant accessible.<\/p>\n\n <div class=\"test-zone\">\n <p>Ci-dessous se trouve un texte cach\u00e9 :<\/p>\n <p class=\"sr-only\">\u2705 BRAVO ! Si vous entendez ceci, votre lecteur d’\u00e9cran fonctionne correctement. Ce texte est invisible \u00e0 l’\u0153il nu.<\/p>\n <button>\n <span aria-hidden=\"true\">\ud83d\udd0d<\/span>\n <span class=\"sr-only\">Rechercher dans le site<\/span>\n <\/button>\n <p>Le bouton ci-dessus montre une loupe, mais vocalise \u00ab\u00a0Rechercher dans le site\u00a0\u00bb.<\/p>\n <\/div>\n <\/section>\n\n <section>\n <h2>3. Display none & Visibility hidden<\/h2>\n <p>Ces m\u00e9thodes retirent l’\u00e9l\u00e9ment pour tout le monde (visuel et vocal).<\/p>\n\n <div class=\"test-zone\">\n <div style=\"display: none;\">Je suis en display:none. Je n’existe pas.<\/div>\n <div style=\"visibility: hidden;\">Je suis en visibility:hidden. Je suis un fant\u00f4me (espace vide), mais muet.<\/div>\n <div hidden>Je suis en attribut hidden.<\/div>\n <p>Si votre lecteur d’\u00e9cran ne dit rien entre cette phrase et la suivante, c’est r\u00e9ussi.<\/p>\n <\/div>\n <\/section>\n\n <section>\n <h2>4. L’attribut <span class=\"badge\">tabindex=\u00a0\u00bb-1″<\/span><\/h2>\n <p>L’\u00e9l\u00e9ment reste visible et lisible (navigation virtuelle), mais sort de l’ordre de tabulation.<\/p>\n\n <div class=\"test-zone\">\n <p>Essayez d’atteindre le lien suivant avec la touche [TAB] :<\/p>\n <a href=\"#\" tabindex=\"-1\">Lien avec tabindex -1<\/a>\n <p>Vous devriez passer par-dessus. Par contre, avec les fl\u00e8ches directionnelles, il est lu.<\/p>\n <\/div>\n <\/section>\n\n <section>\n <h2>5. Opacit\u00e9 <span class=\"badge\">opacity: 0<\/span><\/h2>\n <p>L’\u00e9l\u00e9ment est l\u00e0, interactif, lu, mais totalement transparent.<\/p>\n\n <div class=\"test-zone\">\n <button class=\"opacity-zero\" onclick=\"alert('Je suis invisible mais cliquable')\">Je suis transparent<\/button>\n <p>\u261d\ufe0f Il y a un bouton invisible juste au-dessus. Si vous tabulez, vous verrez le focus apparaitre \u00ab\u00a0dans le vide\u00a0\u00bb (ou sur le contour si le focus ring est g\u00e9r\u00e9 par le navigateur).<\/p>\n <\/div>\n <\/section>\n\n <section>\n <h2>6. Iframe masqu\u00e9e<\/h2>\n <p>Test d’une iframe contenant du code interactif mais masqu\u00e9e via aria-hidden.<\/p>\n\n <div class=\"test-zone\" aria-hidden=\"true\">\n <iframe srcdoc=\"<button>Bouton dans l’iframe<\/button>\u00a0\u00bb style=\u00a0\u00bbheight: 120px; border: 1px dashed #999; width: 100%;\u00a0\u00bb><\/iframe>\n <\/div>\n <\/section>\n\n <\/main>\n\n <footer>\n <div class=\"container\">\n <p>\u00a9 2025 Labo de Test Accessibilit\u00e9 – Design inspir\u00e9 des valeurs du Num\u00e9rique Responsable.<\/p>\n <\/div>\n <\/footer>\n\n<\/body>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Labo A11y – Style Boscop Boscop_Test | Laboratoire Accessibilit\u00e9 Comprendre le masquage Ce laboratoire permet de tester le comportement r\u00e9el des technologies d’assistance face aux diff\u00e9rentes techniques CSS et HTML de masquage. 1. L’attribut aria-hidden=\u00a0\u00bbtrue\u00a0\u00bb Cet attribut indique aux technologies d’assistance d’ignorer l’\u00e9l\u00e9ment, m\u00eame s’il est visible. Test Visuel : Vous voyez ce texte. Test […]<\/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-35","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/pages\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=35"}],"version-history":[{"count":4,"href":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/pages\/35\/revisions"}],"predecessor-version":[{"id":39,"href":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/pages\/35\/revisions\/39"}],"wp:attachment":[{"href":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":35,"date":"2025-11-27T09:54:04","date_gmt":"2025-11-27T08:54:04","guid":{"rendered":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/?page_id=35"},"modified":"2025-11-27T09:54:04","modified_gmt":"2025-11-27T08:54:04","slug":"test-aria-hidden-et-autres-cachotteries","status":"publish","type":"page","link":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/?page_id=35","title":{"rendered":"Test aria-hidden et autres cachotteries"},"content":{"rendered":"\n\n \n \n Labo A11y – Style Boscop<\/title>\n <style>\n \/* --- CLASSES UTILITAIRES POUR LE TEST --- *\/\n \n \/* 1. Sr-only (Standard Accessibilit\u00e9) *\/\n .sr-only {\n border: 0 !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n height: 1px !important;\n margin: -1px !important;\n overflow: hidden !important;\n padding: 0 !important;\n position: absolute !important;\n width: 1px !important;\n white-space: nowrap !important;\n }\n\n \/* 2. Classes de masquage visuel *\/\n .vis-hidden { visibility: hidden; }\n .disp-none { display: none; }\n .opacity-zero { opacity: 0; }\n \n \/* Footer style *\/\n footer {\n margin-top: 4rem;\n padding: 2rem 0;\n border-top: 1px solid #e0e0e0;\n text-align: center;\n font-size: 0.9rem;\n color: var(--text-light);\n }\n <\/style>\n<\/head>\n<body>\n\n <header>\n <div class=\"container\">\n <a href=\"#\" class=\"logo\">\n Boscop_Test <span>| Laboratoire Accessibilit\u00e9<\/span>\n <\/a>\n <\/div>\n <\/header>\n\n <main class=\"container\">\n \n <div class=\"intro-block\">\n <h1>Comprendre le masquage<\/h1>\n <p class=\"subtitle\">Ce laboratoire permet de tester le comportement r\u00e9el des technologies d’assistance face aux diff\u00e9rentes techniques CSS et HTML de masquage.<\/p>\n <\/div>\n\n <section>\n <h2>1. L’attribut <span class=\"badge\">aria-hidden=\u00a0\u00bbtrue\u00a0\u00bb<\/span><\/h2>\n <p>Cet attribut indique aux technologies d’assistance d’ignorer l’\u00e9l\u00e9ment, m\u00eame s’il est visible.<\/p>\n \n <div class=\"test-zone\" aria-hidden=\"true\">\n <p><strong>Test Visuel :<\/strong> Vous voyez ce texte.<\/p>\n <p><strong>Test Vocal :<\/strong> Votre lecteur d’\u00e9cran doit rester muet ici.<\/p>\n <br>\n <button onclick=\"alert('Bouton cliqu\u00e9 !')\">Bouton (Pi\u00e8ge)<\/button>\n <p style=\"font-size: 0.85em; margin-top: 10px;\"><em>\u26a0\ufe0f Attention : Essayez de naviguer avec TAB. Si vous atteignez le bouton ci-dessus alors qu’il est aria-hidden, c’est une violation des r\u00e8gles WCAG.<\/em><\/p>\n <\/div>\n <\/section>\n\n <section>\n <h2>2. La classe <span class=\"badge\">.sr-only<\/span><\/h2>\n <p>La m\u00e9thode standard pour cacher du contenu visuellement tout en le laissant accessible.<\/p>\n\n <div class=\"test-zone\">\n <p>Ci-dessous se trouve un texte cach\u00e9 :<\/p>\n <p class=\"sr-only\">\u2705 BRAVO ! Si vous entendez ceci, votre lecteur d’\u00e9cran fonctionne correctement. Ce texte est invisible \u00e0 l’\u0153il nu.<\/p>\n <button>\n <span aria-hidden=\"true\">\ud83d\udd0d<\/span>\n <span class=\"sr-only\">Rechercher dans le site<\/span>\n <\/button>\n <p>Le bouton ci-dessus montre une loupe, mais vocalise \u00ab\u00a0Rechercher dans le site\u00a0\u00bb.<\/p>\n <\/div>\n <\/section>\n\n <section>\n <h2>3. Display none & Visibility hidden<\/h2>\n <p>Ces m\u00e9thodes retirent l’\u00e9l\u00e9ment pour tout le monde (visuel et vocal).<\/p>\n\n <div class=\"test-zone\">\n <div style=\"display: none;\">Je suis en display:none. Je n’existe pas.<\/div>\n <div style=\"visibility: hidden;\">Je suis en visibility:hidden. Je suis un fant\u00f4me (espace vide), mais muet.<\/div>\n <div hidden>Je suis en attribut hidden.<\/div>\n <p>Si votre lecteur d’\u00e9cran ne dit rien entre cette phrase et la suivante, c’est r\u00e9ussi.<\/p>\n <\/div>\n <\/section>\n\n <section>\n <h2>4. L’attribut <span class=\"badge\">tabindex=\u00a0\u00bb-1″<\/span><\/h2>\n <p>L’\u00e9l\u00e9ment reste visible et lisible (navigation virtuelle), mais sort de l’ordre de tabulation.<\/p>\n\n <div class=\"test-zone\">\n <p>Essayez d’atteindre le lien suivant avec la touche [TAB] :<\/p>\n <a href=\"#\" tabindex=\"-1\">Lien avec tabindex -1<\/a>\n <p>Vous devriez passer par-dessus. Par contre, avec les fl\u00e8ches directionnelles, il est lu.<\/p>\n <\/div>\n <\/section>\n\n <section>\n <h2>5. Opacit\u00e9 <span class=\"badge\">opacity: 0<\/span><\/h2>\n <p>L’\u00e9l\u00e9ment est l\u00e0, interactif, lu, mais totalement transparent.<\/p>\n\n <div class=\"test-zone\">\n <button class=\"opacity-zero\" onclick=\"alert('Je suis invisible mais cliquable')\">Je suis transparent<\/button>\n <p>\u261d\ufe0f Il y a un bouton invisible juste au-dessus. Si vous tabulez, vous verrez le focus apparaitre \u00ab\u00a0dans le vide\u00a0\u00bb (ou sur le contour si le focus ring est g\u00e9r\u00e9 par le navigateur).<\/p>\n <\/div>\n <\/section>\n\n <section>\n <h2>6. Iframe masqu\u00e9e<\/h2>\n <p>Test d’une iframe contenant du code interactif mais masqu\u00e9e via aria-hidden.<\/p>\n\n <div class=\"test-zone\" aria-hidden=\"true\">\n <iframe srcdoc=\"<button>Bouton dans l’iframe<\/button>\u00a0\u00bb style=\u00a0\u00bbheight: 120px; border: 1px dashed #999; width: 100%;\u00a0\u00bb><\/iframe>\n <\/div>\n <\/section>\n\n <\/main>\n\n <footer>\n <div class=\"container\">\n <p>\u00a9 2025 Labo de Test Accessibilit\u00e9 – Design inspir\u00e9 des valeurs du Num\u00e9rique Responsable.<\/p>\n <\/div>\n <\/footer>\n\n<\/body>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Labo A11y – Style Boscop Boscop_Test | Laboratoire Accessibilit\u00e9 Comprendre le masquage Ce laboratoire permet de tester le comportement r\u00e9el des technologies d’assistance face aux diff\u00e9rentes techniques CSS et HTML de masquage. 1. L’attribut aria-hidden=\u00a0\u00bbtrue\u00a0\u00bb Cet attribut indique aux technologies d’assistance d’ignorer l’\u00e9l\u00e9ment, m\u00eame s’il est visible. Test Visuel : Vous voyez ce texte. Test […]<\/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-35","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/pages\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=35"}],"version-history":[{"count":4,"href":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/pages\/35\/revisions"}],"predecessor-version":[{"id":39,"href":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/pages\/35\/revisions\/39"}],"wp:attachment":[{"href":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}