L\u2019attribut En effet, il arrive qu\u2019un \u00e9l\u00e9ment n\u2019ait pas de nom accessible dans le code de la page\u00a0: c\u2019est notamment le cas d’un bouton contenant uniquement une ic\u00f4ne. L\u2019attribut Voici un exemple d’utilisation pour un bouton sans intitul\u00e9 textuel :<\/p>\n\n\n\n Les diff\u00e9rents audits de conformit\u00e9 RGAA (R\u00e9f\u00e9rentiel G\u00e9n\u00e9ral d\u2019Am\u00e9lioration de l\u2019Accessibilit\u00e9) que j\u2019ai pu mener tendent \u00e0 montrer que l’utilisation de cet attribut n\u2019est pas totalement ma\u00eetris\u00e9e\u00a0par les \u00e9quipes de d\u00e9veloppement.<\/p>\n\n\n\n J\u2019ai compil\u00e9 ici les erreurs les plus fr\u00e9quemment rencontr\u00e9es au cours de mes audits.<\/p>\n\n\n\n L\u2019erreur b\u00eate, mais pas isol\u00e9e\u00a0: la mauvaise \u00e9criture du nom de l\u2019attribut. Souvent, il s\u2019agit de l\u2019oubli du tiret entre Dans cet exemple, le bouton n’a pas de nom accessible disponible pour les technologies d’assistance \u00e0 cause de la faute dans l’\u00e9criture du nom de l’attribut :<\/p>\n\n\n\n Pour \u00e9viter l\u2019erreur :<\/p>\n\n\n\n Il n\u2019est pas rare non plus de rencontrer des liens \u00c0 retenir : si le nom de l’\u00e9l\u00e9ment est d\u00e9j\u00e0 pr\u00e9sent dans le code de la page, alors utiliser l’attribut Exemple de redondance de l’attribut :<\/p>\n\n\n\n Il m\u2019arrive souvent de rencontrer des pages constell\u00e9es d\u2019attributs Sans la pr\u00e9sence de cette s\u00e9mantique, l\u2019attribut Dans ces deux exemples, les attributs En voulant am\u00e9liorer l\u2019exp\u00e9rience des utilisateurs de lecteur d\u2019\u00e9cran, certains d\u00e9veloppeurs font passer des messages bien intentionn\u00e9s via l\u2019attribut Intention louable, mais l\u00e0 o\u00f9 le b\u00e2t blesse, c\u2019est quand ce bouton ou ce lien contient d\u00e9j\u00e0 un contenu textuel<\/strong>.<\/p>\n\n\n\n Et l\u00e0 c\u2019est le drame : ce contenu textuel est tout bonnement ignor\u00e9 par le lecteur d\u2019\u00e9cran car l\u2019attribut Autre inconv\u00e9nient, pour les utilisateurs de logiciel de reconnaissance vocale, il devient impossible de cibler l\u2019\u00e9l\u00e9ment par son intitul\u00e9 visible<\/strong>.<\/p>\n\n\n\n Impossible donc d\u2019activer le bouton ci-apr\u00e8s en dictant \u00ab\u00a0Fermer\u00a0\u00bb. Il faudrait dicter \u00ab\u00a0Retour au contenu principal\u00a0\u00bb, mais ce texte n’est pas visible \u00e0 l’\u00e9cran.<\/p>\n\n\n\n Parfois, par souci de trop bien faire, l\u2019objectif n\u2019est pas atteint. L\u2019usage combin\u00e9 des attributs L\u2019attribut Mais il faut savoir que dans le calcul du nom accessible d\u2019un \u00e9l\u00e9ment, l\u2019attribut Pour faire simple, si sur un \u00e9l\u00e9ment sont pr\u00e9sents Cela signifie que le nom restitu\u00e9 pour le bouton suivant est \u00ab Bretelle \u00bb :<\/p>\n\n\n\n Comme l\u2019attribut Sans surprise, c\u2019est bien l\u2019 Dans cet exemple, le nom accessible restitu\u00e9 est \u00ab\u00a0idBouton\u00a0\u00bb :<\/p>\n\n\n\n Les attributs Autre c\u00f4t\u00e9 d\u00e9savantageux de l\u2019attribut Exemple de code (trop) souvent rencontr\u00e9 sur une page en fran\u00e7ais :<\/p>\n\n\n\n La meilleure fa\u00e7on d\u2019utiliser Pour donner un nom accessible \u00e0 un \u00e9l\u00e9ment, il faut privil\u00e9gier cet ordre de priorit\u00e9 :<\/p>\n\n\n\n D\u2019apr\u00e8s le rapport de The WebAIM Million<\/span> (en anglais)<\/a> , 74.6 % des pages d\u2019accueil test\u00e9es utilisent ARIA. Les pages avec ARIA comportent en moyenne 34.2 % d\u2019erreurs d\u2019accessibilit\u00e9 en plus<\/strong> que celles sans ARIA. Raison de plus pour utiliser avec pr\u00e9caution cet attribut Qu\u2019est-ce que l\u2019attribut aria-label ? L\u2019attribut aria-label contient une cha\u00eene de caract\u00e8res pour fournir un nom accessible \u00e0 un \u00e9l\u00e9ment interactif. En effet, il arrive qu\u2019un \u00e9l\u00e9ment n\u2019ait pas de nom accessible dans le code de la page\u00a0: c\u2019est notamment le cas d’un bouton contenant uniquement une ic\u00f4ne. L\u2019attribut aria-label peut \u00eatre alors utilis\u00e9 pour permettre…<\/p>","protected":false},"author":13,"featured_media":2503,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[22,16],"tags":[],"class_list":["post-2501","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css-et-javascript","category-technologie-dassistance"],"acf":[],"_links":{"self":[{"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/posts\/2501","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\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/comments?post=2501"}],"version-history":[{"count":12,"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/posts\/2501\/revisions"}],"predecessor-version":[{"id":2517,"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/posts\/2501\/revisions\/2517"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/media\/2503"}],"wp:attachment":[{"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/media?parent=2501"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/categories?post=2501"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/tags?post=2501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}aria-label<\/code> contient une cha\u00eene de caract\u00e8res pour fournir un nom accessible<\/strong> \u00e0 un \u00e9l\u00e9ment interactif.<\/p>\n\n\n\naria-label<\/code> peut \u00eatre alors utilis\u00e9 pour permettre la restitution d\u2019un nom pour ce bouton par les technologies d\u2019assistance, comme les lecteurs d\u2019\u00e9cran.<\/p>\n\n\n\n<button aria-label=\"Fermer\"<\/strong> onclick=\"myDialog.close()\">\n <svg aria-hidden=\"true\" focusable=\"false\" width=\"17\" height=\"17\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z\" fill=\"#000\" \/>\n <\/svg>\n<\/button><\/code><\/pre>\n\n\n\n1 : L\u2019erreur b\u00eate<\/h2>\n\n\n\n
aria <\/code>et label<\/code>. Et l\u00e0, et bien, \u00e7a marche beaucoup moins bien (en fait, pas du tout).<\/p>\n\n\n\n<button arialabel=\"Fermer\"<\/strong> onclick=\"myDialog.close()\"><span class=\"icon\"><\/span><\/button><\/code><\/pre>\n\n\n\n\n
2 : L’exc\u00e8s de z\u00e8le<\/h2>\n\n\n\n
<a><\/code> flanqu\u00e9s d\u2019un attribut aria-label<\/code> strictement identique<\/strong> \u00e0 l\u2019intitul\u00e9 textuel pr\u00e9sent dans l\u2019\u00e9l\u00e9ment. \u00c7a ne sert \u00e0 rien et alourdit le code et sa maintenance. Cette erreur n\u2019est pas la plus grave mais r\u00e9v\u00e8le une mauvaise compr\u00e9hension du r\u00f4le et de l\u2019utilisation de l\u2019attribut. <\/p>\n\n\n\naria-label <\/code>n’est pas une bonne id\u00e9e.<\/p>\n\n\n\n<a href="#" aria-label="Accueil">Accueil<\/a><\/code><\/pre>\n\n\n\n3 : Sans s\u00e9mantique, \u00e0 quoi bon ?<\/h2>\n\n\n\n
aria-label<\/code> sur toutes sortes d\u2019\u00e9l\u00e9ments, notamment <div><\/code> et <span><\/code> sans attribut role<\/code>, et donc sans s\u00e9mantique. La s\u00e9mantique donne le sens \u00e0 une partie de code. Cette s\u00e9mantique est implicite sur des \u00e9l\u00e9ments natifs tels que <a><\/code>, <button><\/code>, <table><\/code>, <ul><\/code> : pas besoin de leur ajouter un attribut role<\/code>, contrairement aux \u00e9l\u00e9ments <div><\/code> et <span><\/code>.<\/p>\n\n\n\naria-label<\/code> est tout bonnement ignor\u00e9<\/strong> par les technologies d\u2019assistance : il n\u2019est pas restitu\u00e9. <\/p>\n\n\n\naria-label<\/code> seront ignor\u00e9s :<\/p>\n\n\n\n<span aria-label=\"Accueil\"<\/strong> class=\"icon\"><\/span>\n\n<div class=\"button\" aria-label=\"Fermer\"<\/strong>><\/div><\/code><\/pre>\n\n\n\n4 : Le mieux ennemi du bien<\/h2>\n\n\n\n
aria-label<\/code> d’un bouton ou d’un lien.<\/p>\n\n\n\naria-label<\/code> \u00e9crase cet intitul\u00e9<\/strong>.<\/p>\n\n\n\n<button aria-label=\"Retour au contenu principal\" onclick=\"myDialog.close()\">Fermer<\/button><\/code><\/pre>\n\n\n\n5 : \u00ab\u00a0Ceinture bretelles\u00a0\u00bb rat\u00e9<\/h2>\n\n\n\n
aria-label<\/code> et aria-labelledby<\/code> sur un m\u00eame \u00e9l\u00e9ment n\u2019est pas une bonne id\u00e9e.<\/p>\n\n\n\naria-labelledby<\/code> a le m\u00eame objectif que l\u2019attribut aria-label<\/code> : donner un nom accessible \u00e0 un \u00e9l\u00e9ment. Seulement, aria-labelledby<\/code> a pour valeur l\u2019id<\/code> (ou une liste d\u2019id<\/code>) d\u2019un \u00e9l\u00e9ment sur la page contenant l\u2019intitul\u00e9 en question.<\/p>\n\n\n\naria-labelledby<\/code> pr\u00e9vaut<\/strong> sur tous les autres attributs et m\u00eame sur le contenu de l\u2019\u00e9l\u00e9ment.<\/p>\n\n\n\naria-label<\/code>, aria-labelledby<\/code> et contenu textuel, seul le contenu r\u00e9f\u00e9renc\u00e9 par aria-labelledby<\/code> est restitu\u00e9 par les technologies d\u2019assistance.<\/p>\n\n\n\n<span class=\"sr-only\" id=\"idBretelle\">Bretelle<\/strong><\/span>\n<button aria-label=\"Ceinture\" aria-labelledby=\"idBretelle\" onclick=\"myDialog.close()\">Fermer<\/button><\/code><\/pre>\n\n\n\n6 : Mauvais jugement de valeur<\/h2>\n\n\n\n
aria-labelledby<\/code> vient d\u2019\u00eatre \u00e9voqu\u00e9, voici une autre confusion rencontr\u00e9e dans le code : donner un id<\/code> comme valeur \u00e0 l\u2019attribut aria-label<\/code>. <\/p>\n\n\n\nid<\/code> lui-m\u00eame qui sera restitu\u00e9 par les technologies d’assistance.<\/p>\n\n\n\n<span class="sr-only" id="idBouton">Fermer<\/span>\n<button aria-label="idBouton" onclick="myDialog.close()"><span class="icon"><\/span><\/button><\/code><\/pre>\n\n\n\n7 : Avec la (bonne) langue, c’est mieux<\/h2>\n\n\n\n
aria-label <\/code>ne sont pas visibles sur la page. Ils peuvent, \u00e0 ce titre, \u00eatre des contenus oubli\u00e9s et notamment dans la phase d\u2019internationalisation. Souvent (tr\u00e8s), je retrouve des aria-label<\/code> en anglais sur une page dont la langue par d\u00e9faut est le fran\u00e7ais. Too bad !<\/span> (dommage).<\/p>\n\n\n\naria-label<\/code>, c\u2019est qu\u2019il passe \u00e0 la trappe lors d\u2019une traduction automatique<\/strong> de la page : d\u00e9tail \u00e0 ne pas n\u00e9gliger !<\/p>\n\n\n\n<button aria-label=\"Close\"<\/strong> onclick=\"myDialog.close()\"><span class=\"icon\"><\/span><\/button><\/code><\/pre>\n\n\n\nConclusion : comment bien utiliser aria-label ?<\/h2>\n\n\n\n
aria-label<\/code> c\u2019est surtout de ne pas l\u2019utiliser<\/strong>, comme l\u2019indique la premi\u00e8re r\u00e8gle ARIA (Accessible Rich Internet Applications<\/span>) (en anglais)<\/a>.<\/p>\n\n\n\n\n
<label><\/code> avec attribut for<\/code> pour \u00e9tiqueter un champ <input><\/code>, du contenu textuel dans un \u00e9l\u00e9ment <button><\/code>, l\u2019attribut alt<\/code> pour une image <img><\/code> etc.<\/li>\n\n\n\naria-labelledby<\/code><\/strong> pointant vers l\u2019id<\/code> d\u2019un texte visible existant : la relation visuelle est ainsi transmise dans le code.<\/li>\n\n\n\naria-label<\/code> seulement si toutes les options pr\u00e9c\u00e9dentes sont impossibles<\/strong> et garder en t\u00eate que pour ce nom accessible : pas de traduction automatique, pas de possibilit\u00e9 de d\u00e9claration de changement de langue, pas d\u2019utilisation possible \u00e0 la reconnaissance vocale, pas de copie possible du texte, et il n\u2019appara\u00eetra pas sans les feuilles de styles CSS.<\/li>\n<\/ol>\n\n\n\n
WebAIM (Web Accessibility in Mind)<\/span> est une organisation \u00e0 but non lucratif, fournisseuse de solutions en mati\u00e8re d’accessibilit\u00e9 du web depuis 1999.<\/p>\n\n\n\naria-label<\/code> !<\/p>\n\n\n\nRessources<\/h3>\n\n\n\n
\n
aria-label<\/code> sur MDN<\/a><\/li>\n\n\n\naria-label<\/code> et aria-labelledby<\/code> (en anglais)<\/a><\/li>\n\n\n\naria-label<\/code> n’est pas traduit par Adrian Roselli (en anglais).<\/a><\/li>\n\n\n\n