[Résolu] Utilisation de la balise HTML <menu>

Bonjour,

Raphael a écrit :
Hello,

Attention, <menu> est un très ancien élément HTML qui est un faux-ami : il n'a jamais été conçu pour structurer des menus de navigation contrairement à ce que l'on croit.
...
EDIT : il existe l'élément <nav> pour structurer une navigation dans la page, et elle est très bien reconnue par toutes les assistances techniques.

Ok, si je décode, il faudrait faire la différence entre un menu de navigation (auquel cas on va utiliser <nav> + <ul>) et un menu de nature applicative, par exemple un menu qui contiendrait une liste de choix comme "Déplacement", "Rotation", "Mise à l'échelle" etc. permettant d'effectuer une action sur la page en cours d'affichage (auquel cas utiliser <menu> serait approprié) ?

Raphael a écrit :
De nos jours, cet élément n'apporte strictement rien par rapport à <ul>, il est même traité exactement de la même manière que <ul> :
https://developer.mozilla.org/fr/docs/Web/HTML/Element/menu

Certes, <ul> et <menu> sont techniquement traités de la même façon par les navigateurs, mais c'est aussi le cas pour <main> et <div> par exemple. La différence est uniquement sémantique, mais elle me semble exister, non ?

Amicalement,

parsimonhi a écrit :
Ok, si je décode, il faudrait faire la différence entre un menu de navigation ... et un menu de nature applicative ?

Oui, c'est exactement ça.

parsimonhi a écrit :
mais c'est aussi le cas pour &lt;main&gt; et &lt;div&gt; par exemple. La différence est uniquement sémantique, mais elle me semble exister, non ?

Oui c'est ça, avec une différence tout de même car <menu> semble légèrement moins bien reconnu par les assistances techniques : https://a11ysupport.io/tech/aria/navigation_role vs https://a11ysupport.io/tech/aria/menu_role

Bonjour,

niuxe a écrit :
Il me semble même que tu puisses faire ceci directement : <nav> et <a>.

Oui, et d'ailleurs, je le fais souvent.

Amicalement,

Bonjour,

Je tiens à attirer votre attention sur une information intéressante que j’ai trouvée dans la documentation HTML officielle : https://html.spec.whatwg.org/multipage/grouping-content.html#the-menu-element

Selon le World Wide Web Consortium (W3C), l’élément <menu> représente une barre d’outils composée de son contenu, sous la forme d’une liste non ordonnée d’éléments (représentés par des éléments <li>), chacun représentant une commande que l’utilisateur peut exécuter ou activer. L’élément <menu> est surtout une alternative sémantique à <ul> pour exprimer une liste non ordonnée de commandes (une « barre d’outils »).

Il est vrai que certains appareils peuvent être obsolètes et ne pas prendre en charge l’élément <menu> de la même manière que <ul>. Je pense cependant qu’il est important de considérer le long terme. Les appareils se mettront à jour progressivement et il est donc pertinent d’utiliser <menu> lorsque cela correspond à l’objectif de votre code.

En fin de compte, l’utilisation de <menu> au lieu de <ul> permet d’améliorer la sémantique du code et d’exprimer plus clairement l’intention de son contenu. Il ne faut pas oublier pas qu’il appartient à l’application de styliser le menu pour qu’il ressemble à un menu de barre d’outils conventionnel. Cela donne la flexibilité nécessaire pour l’adapter aux besoins spécifiques.

Je vous encourage à envisager d’utiliser l’élément <menu> pour une meilleure sémantique et une meilleure communication de l’intention de votre contenu.

Amicalement,
Pyanepsion
Modifié par Pyanepsion (15 Apr 2023 - 17:26)

Bonjour,

Sauf qu'une liste de liens de navigation ne doit pas être considérée comme une liste de commandes (relire soigneusement toutes les réponses ci-dessus) ! Ceci veut dire que quand on fait un menu pour naviguer dans un site, <menu> ne peut pas être utilisé.

Amicalement,

J'appuie parsimonhi X100.
Il faut utiliser la balise <nav>.

Bonjour,

Après un examen approfondi, il semble au contraire qu’il n’y ait pas de restriction stricte sur l’utilisation de l’élément <menu> pour une barre de navigation. L’utilisation de <menu> ne semble pas déconseillée pour les barres de navigation, mais plutôt peu courante.
https://html.spec.whatwg.org/multipage/interactive-elements.html#commands

L’élément <menu> peut apparemment être utilisé pour des listes de commandes, y compris des liens de navigation, bien que l’utilisation de l’élément <menu> ne se voit guère dans les barres de navigation. Les développeurs ont en effet ajouté l’élément <nav> pour une meilleure sémantique et une meilleure accessibilité dans les barres de navigation.

Voici un exemple de commandes avec <ul> qui pourrait fort bien répondre à la définition d’une commande, et donc à la possibilité de <menu> à la place de <ul>.

  <nav>
    <ul>
      <li><a href="accueil.html" title="Accueil" accesskey="a" tabindex="1">Accueil</a></li>
      <li><a href="apropos.html" title="À propos" accesskey="p" tabindex="2">À propos</a></li>
      <li><a href="services.html" title="Services" accesskey="s" tabindex="3">Services</a></li>
      <li><a href="contact.html" title="Contact" accesskey="c" tabindex="4">Contact</a></li>
    </ul>
  </nav>

Dans cet exemple, chaque élément <a> remplit les critères suivants :
Label : Le contenu textuel de l’élément <a> (par exemple, "Accueil").
Access Key : Une combinaison de touches définie par l’attribut accesskey (par exemple, "a" pour "Accueil").
Hidden State : Il n’y a pas d’attribut hidden, donc les éléments sont visibles.
Disabled State : Aucun élément n’est désactivé ou inerte.
Action : L’effet déclenché par la commande est la navigation vers l’URL spécifiée dans l’attribut href.

L’attribut title fournit de plus une description supplémentaire pour chaque lien, et l’attribut tabindex permet de naviguer facilement entre les éléments de la barre de navigation à l’aide du clavier.

Avec le remplacement de <ul> par <menu>, j’y vois de nombreux avantages notamment sur la sémantique.

Amicalement,
Pyanepsion
Modifié par Pyanepsion (16 Apr 2023 - 16:29)

Bonjour,

Pyanepsion a écrit :
Après un examen approfondi, il semble au contraire qu’il n’y ait pas de restriction stricte sur l’utilisation de l’élément <menu> pour une barre de navigation...

S'il n'y avait que toi et moi sur Terre, on pourrait sans doute se mettre d'accord là-dessus. J'irais même plus loin en proposant que la balise <menu> ait en option un comportement similaire à la balise <details>, ce qui simplifierait pas mal le fonctionnement des menus burger et des menus déroulants.

Mais voilà, il y a 8 milliards d'autres humains sur Terre, et parmi eux, ceux qui savent disent que <menu> ne doit pas être utilisé quand il s'agit d'une liste de liens de navigation (il y a en particulier des raisons historiques à cela). Et que dans le cas d'une liste de liens de navigation, on utilise <nav><ul>...</ul></nav>. En particulier, je te mets au défi de trouver dans une documentation du w3c un exemple où <menu> serait utilisé pour une liste de liens de navigation . Alors que les exemples avec <nav><ul>...</ul></nav> sont légions.

On notera quand même que <menu></menu> sans <nav>...</nav> autour perdrait en sémantique car il n'y a pas que des menus de navigation (or l'indication qu'on est dans un bloc de navigation est précieuse, en particulier pour les lecteurs d'écran). En conséquence, autant se contenter de <nav><ul>...</ul></menu> quand il s'agit de navigation, et garder <menu> seulement pour les autres types de menus. Utiliser <nav><menu>...</menu></nav> au lieu de <nav><ul>...</ul></menu> n'aurait guère d'intérêt sémantique et serait probablement source de lourdeur et de confusion plus que de clarification.

Amicalement,
Modifié par parsimonhi (17 Apr 2023 - 15:08)

parsimonhi a écrit :
S'il n'y avait que toi et moi sur Terre

C'est sûr.

Cela dit, si j’analyse ta réponse, tu as donné de bons arguments, mais aussi ce qui me semble des suppositions (du moins je n'ai rien trouvé pour) :

Vrai :

1. L’utilisation de l’élément <menu> pour une liste de liens de navigation n’est pas courante et <nav><ul>… </ul></nav> est la méthode recommandée par les normes du W3C.
2. <menu> peut être utilisé pour d’autres types de menus, mais il est préférable de l’utiliser avec <nav> pour ajouter de la sémantique.
3. L’utilisation de <nav><menu>… </menu></nav> n’ajoute pas de sémantique par rapport à <nav><ul>… </ul></menu>, mais seulement un terme qui nous semble plus parlant.
4. J’ajouterai : certains navigateurs gèrent mal la balise <menu>.

Suppositions :

1. L’absence d’exemples dans les normes W3C où <menu> est utilisé pour une liste de liens de navigation ne prouve pas qu’il est interdit de le faire.
2. La proposition que <menu> ait en option un comportement similaire à la balise <details> est une supposition sans appui de la part des normes W3C.
3. Les raisons historiques derrière l’utilisation préférentielle de <nav><ul>… </ul></nav> pour une liste de liens de navigation ne sont pas clairement définies et ne peuvent pas être considérées comme des faits.

En résumé :

L’utilisation est possible, mais elle n’amène finalement pas grand-chose. ll est dès lors préférable d’utiliser <nav><ul>… </ul></nav> pour des raisons de compatibilité avec les navigateurs anciens ou mal conçus qui ne gèrent pas <menu>. Affaire conclue. Dommage, car c'était tentant.