![\"Visuel](\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/12\/Screenshot-2023-12-21-at-15-43-50-Ideance-Conseil-formation-audit-et-expertise-accessibilite-en-numerique.png\")
<\/figure>\r\n<\/div>\r\n\r\n\r\nM\u00eame question pour ce composant interactif \u00ab Lire la transcription textuelle de la vid\u00e9o \u00bb ?<\/p>\r\n\r\n\r\n
![\"Visuel](\"https:\/\/ideance.net\/blog\/wp-content\/uploads\/2023\/12\/Screenshot-2023-12-21-at-15-45-38-Vaccination-contre-la-grippe-saisonniere-en-pratique.png\")
<\/figure>\r\n<\/div>\r\n\r\n\r\nPour pouvoir r\u00e9pondre correctement \u00e0 ces questions et faire le bon choix lors du d\u00e9veloppement de ces \u00e9l\u00e9ments, ce qu\u2019il nous manque, c\u2019est la fonction de ces \u00e9l\u00e9ments interactifs.<\/p>\r\n\r\n\r\n\r\n
Les interactions attendues entre un lien et un bouton sont diff\u00e9rentes.<\/p>\r\n\r\n\r\n\r\n
Leurs mauvais d\u00e9veloppements g\u00e9n\u00e8rent un impact direct pour les personnes naviguant avec une technologie d\u2019assistance, comme un lecteur d\u2019\u00e9cran (synth\u00e8se vocale et\/ou plage braille).<\/p>\r\n\r\n\r\n\r\n
La s\u00e9mantique en HTML, qu’est-ce que c’est ?<\/h2>\r\n\r\n\r\n\r\n
Avant d\u2019aller plus loin et pour une meilleure compr\u00e9hension de la suite de l\u2019article, il me para\u00eet important de r\u00e9capituler bri\u00e8vement ce qu\u2019est la s\u00e9mantique des balises HTML.<\/p>\r\n\r\n\r\n\r\n
Une balise HTML s\u00e9mantique est une balise permettant de donner un r\u00f4le \/ du sens aux contenus qu\u2019elle structure.<\/p>\r\n\r\n\r\n\r\n
Cette s\u00e9mantique est notamment utilis\u00e9e par les outils d\u2019assistance, comme les lecteurs d\u2019\u00e9cran, pour d\u00e9crire correctement les composants.<\/p>\r\n\r\n\r\n\r\n
Par exemple, une balise Une balise On utilise donc une balise HTML pour sa s\u00e9mantique et non pour sa forme (le CSS servira \u00e0 donner la forme que l\u2019on veut donner au composant).<\/p>\r\n\r\n\r\n\r\n Dans le cas des liens et des boutons, afin de choisir la balise la plus appropri\u00e9e, il faut donc au pr\u00e9alable conna\u00eetre la fonction du composant et non se fier \u00e0 sa forme.<\/p>\r\n\r\n\r\n\r\n La question la plus importante est\u00a0: \u00ab\u00a0Que se passe-t-il lorsque la personne active ce composant ?\u00a0\u00bb.<\/p>\r\n\r\n\r\n\r\n Si, \u00e0 l\u2019activation du composant, la personne est men\u00e9e sur une autre page du site, un autre endroit sur la page, un autre site ou encore un document (tel qu\u2019un fichier PDF) alors structurer ce composant avec une balise Ce composant interactif (pr\u00e9sent sur la page d\u2019accueil du site Ideance<\/a>) m\u00e8ne sur une autre page du site.<\/p>\r\n\r\n\r\n\r\n Il s\u2019agit donc d\u2019un lien.<\/p>\r\n\r\n\r\n\r\n Un bouton de soumission de formulaire doit \u00eatre structur\u00e9 avec une balise Pour obtenir par exemple concr\u00e8tement\u00a0:<\/p>\r\n\r\n\r\n\r\n Un bouton activant un script doit \u00eatre structur\u00e9 avec une balise Ce composant interactif (pr\u00e9sent sur le site Ameli.fr<\/a>) permet de faire appara\u00eetre la transcription textuelle d\u2019une vid\u00e9o via un syst\u00e8me de d\u00e9plier\/plier.<\/p>\r\n\r\n\r\n\r\n Ce qui donne concr\u00e8tement\u00a0:<\/p>\r\n\r\n\r\n\r\n Bien qu\u2019il soit possible de faire d\u2019un \u00e9l\u00e9ment non interactif ( Ces boutons reconstruits en ARIA sont souvent sujets \u00e0 plusieurs probl\u00e8mes d\u2019accessibilit\u00e9 pouvant g\u00eaner ou entraver leur utilisation entre autres avec un lecteur d\u2019\u00e9cran et au clavier.<\/p>\r\n\r\n\r\n\r\n Julie Moynat explique tr\u00e8s bien les limites de l\u2019utilisation de ces boutons ARIA dans son article Cr\u00e9er des boutons accessibles et dignes de ce nom en HTML<\/a>.<\/p>\r\n\r\n\r\n\r\n Comme vu juste au-dessus, nous d\u00e9conseillons l\u2019utilisation de l\u2019attribut M\u00eame si contrairement \u00e0 l\u2019exemple pr\u00e9c\u00e9dent, la balise Comme dit l\u2019adage, l\u2019habit ne fait pas le moine.<\/p>\r\n\r\n\r\n\r\n Pour bien choisir entre le d\u00e9veloppement d\u2019un lien ou d\u2019un bouton, ne vous fiez pas \u00e0 son visuel mais demandez-vous plut\u00f4t quelle est l\u2019interaction attendue de ce composant.<\/p>\r\n\r\n\r\n\r\n Et si possible, de mani\u00e8re plus g\u00e9n\u00e9rale, privil\u00e9giez un maximum l\u2019utilisation des balises HTML natives\u00a0\ud83d\ude09.<\/p>\r\n\r\n\r\n\r\n Un probl\u00e8me d\u2019accessibilit\u00e9 que l\u2019on rencontre sur de nombreux sites est la confusion dans l\u2019utilisation entre lien et bouton. Cette confusion peut principalement venir du fait que l\u2019aspect visuel, seul, ne permet pas de d\u00e9terminer s\u2019il s\u2019agit de l\u2019un ou l\u2019autre de ces composants interactifs. Par exemple, d\u2019apr\u00e8s vous, le composant ci-dessous est-il un lien…<\/p>\n","protected":false},"author":8,"featured_media":1769,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[22],"tags":[],"class_list":["post-1747","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css-et-javascript"],"acf":[],"_links":{"self":[{"href":"https:\/\/ideance.net\/blog\/wp-json\/wp\/v2\/posts\/1747","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ideance.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ideance.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ideance.net\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/ideance.net\/blog\/wp-json\/wp\/v2\/comments?post=1747"}],"version-history":[{"count":15,"href":"https:\/\/ideance.net\/blog\/wp-json\/wp\/v2\/posts\/1747\/revisions"}],"predecessor-version":[{"id":1795,"href":"https:\/\/ideance.net\/blog\/wp-json\/wp\/v2\/posts\/1747\/revisions\/1795"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ideance.net\/blog\/wp-json\/wp\/v2\/media\/1769"}],"wp:attachment":[{"href":"https:\/\/ideance.net\/blog\/wp-json\/wp\/v2\/media?parent=1747"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ideance.net\/blog\/wp-json\/wp\/v2\/categories?post=1747"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ideance.net\/blog\/wp-json\/wp\/v2\/tags?post=1747"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<nav><\/code> donne \u00e0 la liste de liens qu’elle structure le role de navigation.<\/p>\r\n\r\n\r\n\r\n<h1><\/code>, quand \u00e0 elle, donnera au texte qu’elle structure le role de titre de premier niveau.<\/p>\r\n\r\n\r\n\r\nComment choisir entre un lien et un bouton ?<\/h2>\r\n\r\n\r\n\r\n
Le composant est-il utilis\u00e9 pour naviguer vers une ressource ? Si oui, c\u2019est un lien\u00a0!<\/h3>\r\n\r\n\r\n\r\n
<a href=\"[URL]\"><\/code>.<\/p>\r\n\r\n\r\n\r\nDans l\u2019exemple en introduction\u00a0:<\/h4>\r\n\r\n\r\n
<\/figure>\r\n<\/div>\r\n\r\n\r\nLe composant d\u00e9clenche-t-il une action ou un \u00e9v\u00e8nement ? Si oui, c\u2019est un bouton\u00a0!<\/h3>\r\n\r\n\r\n\r\n
Le bouton contr\u00f4le-t-il la soumission d\u2019un formulaire ?<\/h4>\r\n\r\n\r\n\r\n
<button><\/code> ou <input><\/code> et utiliser l\u2019attribut type=\"submit\"<\/code>.<\/p>\r\n\r\n\r\n\r\n<button type=\"submit\">Envoyer mon message<\/button><\/code><\/pre>\r\n\r\n\r\n\r\nLe bouton permet-il d\u2019actionner un script ?<\/h4>\r\n\r\n\r\n\r\n
<button><\/code> ou <input><\/code> et utiliser l\u2019attribut type=\"button\"<\/code>.<\/p>\r\n\r\n\r\n\r\nDans l\u2019exemple en introduction\u00a0:<\/h5>\r\n\r\n\r\n
<\/figure>\r\n<\/div>\r\n\r\n\r\n<button type=\"button\" aria-expanded=\"false\">Lire la transcription textuelle de la vid\u00e9o<\/button><\/code><\/pre>\r\n\r\n\r\n\r\n<div><\/code> et <span><\/code> ne sont pas des boutons\u00a0!<\/h4>\r\n\r\n\r\n\r\n<div><\/code> ou <span><\/code>) un bouton via l\u2019utilisation de ARIA (et l\u2019attribut role=\"button\"<\/code>) nous ne recommandons pas d\u2019utiliser cette m\u00e9thode.<\/p>\r\n\r\n\r\n\r\nEt qu’en est-il de
<a role=\"button\"><\/code> ?<\/h4>\r\n\r\n\r\n\r\nrole=\"button\"<\/code>.<\/p>\r\n\r\n\r\n\r\n<a><\/code> est un \u00e9l\u00e9ment interactif, les interactions clavier ne sont pas les m\u00eames entre un lien et un bouton (et m\u00eame avec du JavaScript, il pourrait s\u2019av\u00e9rer tr\u00e8s complexe de reproduire \u00e0 l\u2019identique toutes les interactions d\u2019une v\u00e9ritable balise <button><\/code>).<\/p>\r\n\r\n\r\n\r\nConclusion<\/h2>\r\n\r\n\r\n\r\n
Ressources<\/h2>\r\n\r\n\r\n\r\n
\r\n