{"id":1092,"date":"2023-08-24T10:35:36","date_gmt":"2023-08-24T08:35:36","guid":{"rendered":"https:\/\/www.lyam-books.com\/blog\/?p=1092"},"modified":"2023-08-24T10:35:36","modified_gmt":"2023-08-24T08:35:36","slug":"lattribut-aria-label","status":"publish","type":"post","link":"https:\/\/www.lyam-books.com\/blog\/?p=1092","title":{"rendered":"L&rsquo;attribut aria-label"},"content":{"rendered":"\n<p>Dans le cadre de l&rsquo;accessibilit\u00e9, l&rsquo;attribut <strong>aria-label<\/strong> permet d&rsquo;\u00e9tiqueter une balise pour donner une explication ou une information aux liseuses. Il permet notamment de donner un texte alternatif \u00e0 un \u00e9l\u00e9ments. Si l&rsquo;option est activ\u00e9e dans la liseuse, alors l&rsquo;\u00e9tiquette pourra \u00eatre lue par la voix de synth\u00e8se. <\/p>\n\n\n\n<p>L&rsquo;attribut <strong>aria-label<\/strong> peut \u00eatre utilis\u00e9 sur n&rsquo;importe quelle balise mais il faut que celle-ci ne soit pas vide&#8230;<\/p>\n\n\n\n<p><strong>Exemple 1 :<\/strong> <br><code>&lt;span class=\"mon_pictogramme\" aria-label=\"Pour les \u00e9l\u00e8ves de 6eme\" \/><\/code><br><strong>Exemple 2 :<\/strong><br><code>&lt;span class=\"mon_pictogramme\" aria-label=\"Pour les \u00e9l\u00e8ves de 6eme\">&amp;#160;&lt;\/span><\/code><\/p>\n\n\n\n<p>L&rsquo;exemple 1 affiche un pictogramme \u00ab\u00a06eme\u00a0\u00bb en CSS avec une propri\u00e9t\u00e9 de type :<br><code>.mon_pictogramme::after{content:\"6\u00e8me\"; ...}<\/code><br>Bien que conforme, l&rsquo;exemple 1 sera intercept\u00e9 par l&rsquo;outil d&rsquo;analyse DAISY car la balise est auto-ferm\u00e9e, elle n&rsquo;entoure aucun texte.<\/p>\n\n\n\n<p>Pour contourner le probl\u00e8me, il suffit de fermer la balise normalement en pla\u00e7ant une espace (ins\u00e9cable ou non).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>Astuce<\/strong>\nAttention l'attribut aria-label est un attribut qui ne sera accessible qu'aux liseuses sp\u00e9cifiques \u00e0 l'accessibilit\u00e9. \nSi vous souhaitez activer la lecture synth\u00e9tique sur votre outils de lecture en ligne, vous glissez dans le monde de l'audiobook, mais la balise aria-label ne sera pas lue, seul le texte dans les balises est lu.\nAussi posez-vous la question \u00e0 savoir s'il n'est-il pas plus pertinent de glisser du texte \"invisible\" qui sera lu par la voix de synth\u00e8se ce qui aura deux avantages :\n1) Permettre une lecture accessible,\n2) Rendre le livre audio.\n\nExemple de style CSS pour du texte \"invisible\" :\n.sr-only {\n   display:inline-block;\n   overflow: hidden!important;\n   clip: rect(1px, 1px, 1px, 1px)!important;\n   width: 1px!important;\n   height: 1px!important;\n   padding: 0!important;\n   white-space: nowrap!important;\n   border: 0!important;\n   -webkit-clip-path: inset(50%)!important;\n   clip-path: inset(50%)!important;\n   }<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Dans le cadre de l&rsquo;accessibilit\u00e9, l&rsquo;attribut aria-label permet d&rsquo;\u00e9tiqueter une balise pour donner une explication ou une information aux liseuses.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[53],"tags":[],"class_list":["post-1092","post","type-post","status-publish","format-standard","hentry","category-technique"],"_links":{"self":[{"href":"https:\/\/www.lyam-books.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1092","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lyam-books.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lyam-books.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lyam-books.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lyam-books.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1092"}],"version-history":[{"count":1,"href":"https:\/\/www.lyam-books.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1092\/revisions"}],"predecessor-version":[{"id":1093,"href":"https:\/\/www.lyam-books.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1092\/revisions\/1093"}],"wp:attachment":[{"href":"https:\/\/www.lyam-books.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1092"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lyam-books.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1092"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lyam-books.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1092"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}