{"id":2049,"date":"2024-05-16T08:25:32","date_gmt":"2024-05-16T06:25:32","guid":{"rendered":"https:\/\/ideance.net\/blog\/?p=2049"},"modified":"2024-05-16T23:27:34","modified_gmt":"2024-05-16T21:27:34","slug":"attributs-aria-rendre-un-site-accessible","status":"publish","type":"post","link":"https:\/\/ideance.net\/blog\/en\/2049\/attributs-aria-rendre-un-site-accessible\/","title":{"rendered":"Est-ce que les attributs ARIA peuvent rendre un site accessible\u00a0? &#8211; GAAD 2024"},"content":{"rendered":"<p class=\"ice-block\">Dans le cadre de la journ\u00e9e mondiale de sensibilisation \u00e0 l&rsquo;accessibilit\u00e9 de 2024 (<bdo lang=\"en\" dir=\"ltr\"><a href=\"https:\/\/accessibility.day\">Global Accessibility Awareness Day<\/a><\/bdo>), des membres de l&rsquo;\u00e9quipe d&rsquo;Ideance ont r\u00e9pondu \u00e0 une question sur l&rsquo;accessibilit\u00e9 num\u00e9rique et le m\u00e9tier de consultant et consultante en accessibilit\u00e9. <a href=\"https:\/\/ideance.net\/blog\/en\/2117\/serie-de-podcasts-autour-de-laccessibilite-numerique-pour-la-gaad\/\">Retrouvez l\u2019ensemble des podcasts sur le billet de blog d\u00e9di\u00e9<\/a>.<\/p>\r\n\r\n\r\n\r\n<p>D\u00e9couvrez la question\/r\u00e9ponse de Corinne au format audio, suivie de sa transcription textuelle.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Podcast<\/h2>\r\n\r\n\r\n\r\n<figure class=\"wp-block-audio\"><audio controls src=\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2024\/04\/Corinne-Durrmeyer_normalized.mp3\"><\/audio><\/figure>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Transcription textuelle<\/h2>\r\n\r\n\r\n\r\n<p>Bonjour, mon nom est Corinne Durrmeyer et je suis consultante en accessibilit\u00e9 num\u00e9rique chez Ideance.<\/p>\r\n\r\n\r\n\r\n<p>Je m\u2019int\u00e9resse au sujet de l\u2019accessibilit\u00e9 num\u00e9rique depuis plus de 10 ans maintenant et la question \u00e0 laquelle je vais tenter d\u2019apporter une r\u00e9ponse est&nbsp;la suivante&nbsp;: \u00ab&nbsp;Est-ce que les attributs ARIA peuvent rendre un site accessible&nbsp;?&nbsp;\u00bb<\/p>\r\n\r\n\r\n\r\n<p>Avant toute chose, il est n\u00e9cessaire de bien comprendre ce que sont les attributs ARIA.<\/p>\r\n\r\n\r\n\r\n<p>Ils sont apparus dans la sp\u00e9cification technique WAI-ARIA du W3C, pour am\u00e9liorer l\u2019accessibilit\u00e9 des pages web.<\/p>\r\n\r\n\r\n\r\n<p>Ces attributs dotent HTML d\u2019une couche s\u00e9mantique additionnelle, en permettant aux d\u00e9veloppeurs d\u2019ajouter des r\u00f4les, des propri\u00e9t\u00e9s et des \u00e9tats suppl\u00e9mentaires aux composants.<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Les r\u00f4les servent \u00e0 d\u00e9finir la nature de l\u2019\u00e9l\u00e9ment ou sa fonction. <code>role=\"progressbar\"<\/code> ou <code>role=\"search\"<\/code> permettent, par exemple, d\u2019identifier l\u2019\u00e9l\u00e9ment comme une barre de progression ou une fonctionnalit\u00e9 de recherche.<\/li>\r\n\r\n\r\n\r\n<li>Les propri\u00e9t\u00e9s permettent, quant \u00e0 elle, de d\u00e9finir les propri\u00e9t\u00e9s d\u2019un \u00e9l\u00e9ment.&nbsp; <code>aria-required=\"true\"<\/code> ou <code>aria-live=\"assertive\"<\/code> servent, par exemple, \u00e0 identifier un champ de formulaire obligatoire ou une zone destin\u00e9e \u00e0 accueillir les messages devant \u00eatre restitu\u00e9s \u00e0 l\u2019utilisateur sans d\u00e9lai.<\/li>\r\n\r\n\r\n\r\n<li>Les \u00e9tats servent, sans surprise, \u00e0 indiquer l\u2019\u00e9tat d\u2019un \u00e9l\u00e9ment. Contrairement aux propri\u00e9t\u00e9s qui sont fig\u00e9es, les \u00e9tats peuvent \u00eatre mis \u00e0 jour en JavaScript. C\u2019est par exemple le cas de <code>aria-hidden=\"true\"<\/code> ou <code>aria-selected=\"true\"<\/code> qui signifient qu\u2019un \u00e9l\u00e9ment est masqu\u00e9 ou s\u00e9lectionn\u00e9.<\/li>\r\n<\/ul>\r\n\r\n\r\n<div class=\"ice-block\">\r\n<p>Les attributs ARIA s\u2019av\u00e8rent donc particuli\u00e8rement utiles pour\u00a0:<\/p>\r\n<ul>\r\n<li>am\u00e9liorer la compr\u00e9hension globale de la page,<\/li>\r\n<li>simplifier l\u2019utilisation de certains composants complexes,<\/li>\r\n<li>et fournir aux utilisateurs un retour sur les actions qu\u2019ils ont r\u00e9alis\u00e9s ou l\u2019\u00e9tat de de la page.<\/li>\r\n<\/ul>\r\n<\/div>\r\n\r\n\r\n<p>Ils permettent donc bel et bien d\u2019am\u00e9liorer l\u2019accessibilit\u00e9 d\u2019une page.<br>Mais, pour que cela soit effectivement le cas, il y a trois bonnes pratiques \u00e0 respecter&nbsp;:<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Ne jamais utiliser ARIA lorsque l\u2019on peut s\u2019en passer<\/h3>\r\n\r\n\r\n\r\n<p>Tout d\u2019abord, il ne faut jamais utiliser ARIA lorsque l\u2019on peut s\u2019en passer. La r\u00e8gle d\u2019or est de toujours pr\u00e9f\u00e9rer les \u00e9l\u00e9ments HTML natifs \u00e0 l\u2019utilisation d\u2019attributs ARIA pour mimer des composants existants. <br>En effet, il faut savoir que les \u00e9l\u00e9ments HTML sont dot\u00e9s d\u2019une UX particuli\u00e8re. Par exemple, un bouton est activable avec la touche <kbd>Entr\u00e9e<\/kbd> aussi bien qu\u2019avec la touche <kbd>Espace<\/kbd>, contrairement \u00e0 un lien qui, lui, n\u2019est activable qu\u2019avec la touche <kbd>Entr\u00e9e<\/kbd>. <\/p>\r\n\r\n\r\n\r\n<p>Par cons\u00e9quent, un lien dot\u00e9 d\u2019un attribut <code>role=\"button\"<\/code> sera annonc\u00e9 comme un bouton, mais ne sera activable qu\u2019avec la touche <kbd>Entr\u00e9e<\/kbd>, sauf si le d\u00e9veloppeur a impl\u00e9ment\u00e9 le support de la touche <kbd>Espace<\/kbd>.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Employer ARIA \u00e0 bon escient<\/h3>\r\n\r\n\r\n\r\n<p>Les attributs ARIA \u00e9crasent la s\u00e9mantique native des \u00e9l\u00e9ments auxquels ils sont appliqu\u00e9s. L\u2019application d\u2019un attribut avec une valeur erron\u00e9e aura donc pour effet de modifier sa s\u00e9mantique et sa restitution par les technologies d\u2019assistance. <\/p>\r\n\r\n\r\n\r\n<p>En 2024, WebAIM, un institut pour la recherche, la politique et la pratique en mati\u00e8re de handicap a publi\u00e9 une <a href=\"https:\/\/webaim.org\/projects\/million\/#aria\">\u00e9tude portant sur un million de pages d\u2019accueil<\/a>. Il en ressort que les pages utilisant ARIA (\u00e0 l\u2019exception des landmarks, les r\u00f4les servant \u00e0 identifier les zones principales d\u2019une page) avait en moyenne 34.2% d\u2019erreurs en plus que celles sans attributs. <\/p>\r\n\r\n\r\n\r\n<p>Il est donc pr\u00e9f\u00e9rable de se passer d\u2019ARIA plut\u00f4t que de mal l\u2019utiliser\u2026<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Ne pas oublier de dynamiser les attributs ARIA qui doivent l\u2019\u00eatre<\/h3>\r\n\r\n\r\n\r\n<p>Le dernier point \u00e0 garder en t\u00eate est qu&rsquo;il est n\u00e9cessaire d&rsquo;impl\u00e9menter la mise \u00e0 jour des certains attributs. Par exemple, l\u2019attribut <code>aria-expanded<\/code> d\u2019un bouton permet de relier le bouton \u00e0 l\u2019\u00e9l\u00e9ment qu\u2019il contr\u00f4le. Cet attribut doit avoir <code>false<\/code> comme valeur lorsque l\u2019\u00e9l\u00e9ment est repli\u00e9, et <code>true<\/code> lorsque l\u2019\u00e9l\u00e9ment est d\u00e9velopp\u00e9. <br>L\u2019ajout d\u2019un attribut statique non mis \u00e0 jour n\u2019am\u00e9liorera donc pas l\u2019accessibilit\u00e9 du composant, bien au contraire.<\/p>\r\n\r\n\r\n<p class=\"ice-block is-green\">En conclusion, on peut donc dire que \u00ab\u00a0oui, les attributs ARIA peuvent rendre un site accessible\u00a0\u00bb, <strong>sous r\u00e9serve qu\u2019ils soient utilis\u00e9s correctement<\/strong>.<\/p>\r\n\r\n\r\n<p>\u00c0 cet effet, le W3C a mis en ligne le site <a href=\"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/\">ARIA APG<\/a> pour aider les d\u00e9veloppeurs \u00e0 int\u00e9grer la s\u00e9mantique de l&rsquo;accessibilit\u00e9 dans leurs motifs de conception.<br>R\u00e9guli\u00e8rement mis \u00e0 jour, il recense \u00e0 l\u2019heure actuelle, 30 types de motif. Pour chacun d\u2019eux, une fiche explicative d\u00e9taille les exemples de code, et les interactions clavier attendues.<\/p>\r\n\r\n\r\n\r\n<p>Voici qui r\u00e9pond \u00e0 la question \u00ab&nbsp;Est-ce que les attributs ARIA peuvent rendre un site accessible&nbsp;?&nbsp;\u00bb.<br>J\u2019esp\u00e8re que cet article vous aura int\u00e9ress\u00e9 et qu\u2019il vous aura permis d\u2019y voir plus clair.<\/p>","protected":false},"excerpt":{"rendered":"<p>Dans le cadre de la journ\u00e9e mondiale de sensibilisation \u00e0 l&rsquo;accessibilit\u00e9 de 2024 (Global Accessibility Awareness Day), des membres de l&rsquo;\u00e9quipe d&rsquo;Ideance ont r\u00e9pondu \u00e0 une question sur l&rsquo;accessibilit\u00e9 num\u00e9rique et le m\u00e9tier de consultant et consultante en accessibilit\u00e9. Retrouvez l\u2019ensemble des podcasts sur le billet de blog d\u00e9di\u00e9. D\u00e9couvrez la question\/r\u00e9ponse de Corinne au&hellip;<\/p>","protected":false},"author":7,"featured_media":1909,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[25,22,12],"tags":[],"class_list":["post-2049","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gaad","category-html-css-et-javascript","category-sensibilisation"],"acf":[],"_links":{"self":[{"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/posts\/2049","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\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/comments?post=2049"}],"version-history":[{"count":12,"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/posts\/2049\/revisions"}],"predecessor-version":[{"id":2247,"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/posts\/2049\/revisions\/2247"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/media\/1909"}],"wp:attachment":[{"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/media?parent=2049"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/categories?post=2049"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/tags?post=2049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}