5545 sujets

Sémantique web et HTML

Bonjour à vous tous,

J'ai consulté le site MDN Web Docs, qu'on m'a vendu comme étant la référence dans le développement web, et je suis tombé sur ce lien : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/search#validation

Cette page propose un exemple d'utilisation du champ de recherche <input type="search"> avec l'attribut "aria-label". Voici le code HTML :


<label for="site-search">Search the site:</label>
<input type="search" id="site-search" name="q"
       aria-label="Search through site content">
<button>Search</button>


Quand j'utilise cet attribut HTML dans la balise <input>, mon éditeur de code, Notepad++, ne le traite pas comme un attribut. Il se comporte comme s'il ne le connaissait pas. Pourtant, dans la page MDN on voit bien que aria-label est bleu comme pour les autres attributs. Voilà ce que j'obtiens sur mon éditeur de code et on voit que "aria-label" n'est pas de couleur rouge comme les autres attributs :

upload/1642603504-62242-capture.png

L'un de vous saurait me dire si l'éditeur de code Notepad++ bug ?

Merci pour votre aide.
Modérateur
Bonjour,

1) Les colorations syntaxiques des éditeurs de code ne sont pas toujours parfaites. Il se peut aussi qu'il y ait un problème de configuration de l'outil, ou de choix du type de document.

2) Concernant l'usage de l'attribut aria-label (puisque c'est le titre du post initial), d'une manière générale, ça ne devrait être employé que si la situation n'est pas claire. Et si le code est bien fait par ailleurs, ces situations devraient être assez rares.

Dans l'exemple de code donné, il y a déjà en 3 ou 4 endroits des informations qui permettent de comprendre que la balise <input> concernée sert pour une "recherche" (on a un <label>, on a un type="search" pour l'input, et on a un bouton avec le texte "search" juste après l'input pour démarrer la recherche). Selon moi, ça ne sert pas à grand chose de rajouter un aria-label ici. Ça a même toutes les chances de ralentir la navigation de l'internaute handicapé (puisqu'il faudra bien que son lecteur d'écran lui transmette l'information, ce qui prendra du temps).

Amicalement,