[Résolu] Quelle balise choisir pour un hamburger menu?

Bonjour à tous,

je me demande quelle est la "meilleure" approche pour afficher un bouton servant à ouvrir un menu en version mobile.


J'hésite entre toutes ces solutions:
- a sans href
- input checkbox (stylisé en css afin de masquer son apparence)
- button
- div

Je serai tenté de dire que la div est une mauvaise solution en terme d'accessibilité, et que le a et button sont corrects (checkbox pas sur...), mais j'aimerai vraiment des avis plus éclairés sur cette question. Si un choix est plus pertinent qu'un autre.

Merci d'avance pour vos réponses !

Ça m'intéresse aussi.

Pour la checkbox je dirai que cela sert uniquement a se passer de l'usage de javascript. Javascript qui est de toute façon nécessaire pour modifier les attributs aria qu'il faut mettre si on veut un menu accessible.

Pour a, div et button, je pense que les 3 sont utilisables tant qu'on renseigne les bons attributs :
https://developer.mozilla.org/fr/docs/Accessibilit%C3%A9/ARIA/Techniques_ARIA/Utiliser_le_r%C3%B4le_button

Donc pour les balises autre que button il faut ajouter quelque chose comme ça :

<div role="button" type="button" tabindex="0">Bouton</div>

Pour les attributs aria je n'ai jamais su ce qu'il fallait mettre. J'ai vu différentes solutions avec aria-hidden ou aria-expanded mais je ne connais pas la solution exacte.

Merci pour ta réponse.
Pour la checkbox je suis d'accord, je n'en vois pas spécialement l'utilité avec du javascript.
Modifié par Raphi (02 Apr 2019 - 14:47)

Hello !

Ça m'intéresse aussi et j'attendais que quelqu'un intervienne.

Je pense que j'aurais utilisé la balise <button> vu que sémantiquement c'est un bouton. Avant j'utilisais la balise <a> mais sémantiquement ce n'est pas un lien. Je ne pense pas que j'aurais utilisé une <div> vu que cette balise est vide de sens. Et pour la checkbox, je rejoins l'avis de @Depassage.

J'aurais donc codé comme ceci:

<button type="button>Menu</button>

C'est sémantique et accessible.

@Depassage

Si j'ai bien compris,
"aria-hidden" est utilisé si on veut qu'un élément soit ignoré par le logiciel
https://cloudfour.com/thinks/see-no-evil-hidden-content-and-accessibility/

"aria-expended" prends comme valeur soit "true" ou "false" et doit être attribué selon que le contenu en question est caché ou révélé.
https://www.marcozehe.de/2010/02/10/easy-aria-tip-5-aria-expanded-and-aria-controls/

Un bon guide:
https://disic.github.io/guide-developpeur/9-utiliser-aria.html

salut

oui le bouton est approprié pour cela
https://www.accede-web.com/notices/interface-riche/menu-deroulant/

a+

aria-expanded me semble plus logique alors dans ce cas. De ce que j'ai lu aria-controls à l'air important aussi pour faire la relation entre le bouton et le menu.

https://tink.uk/using-the-aria-controls-attribute/

Pour button c'est ce qui semble le mieux effectivement mais le défaut de button c'est qu'on peut se retrouve avec des styles css dont certains spécifiques aux navigateurs qu'il faut surcharger.

Sinon le code de ce menu m'a l'air pasmal :
https://codepen.io/stowball/pen/eBKvoO

Celui-ci contient aussi un attribut aria-haspopup="true" qui semble indiqué dans le cadre d'un menu.
Modifié par Depassage (02 Apr 2019 - 17:18)

Merci à tous pour vos réponses.
Vu que la majorité des réponses sont en faveurs du bouton, je considère que c'est le meilleur choix.
Merci également pour vos ressources intéressantes ainsi que les informations concernant l'utilisation d'aria !

Bonjour,

il y a quelques styles à écraser pour styler un button mais ça reste assez succinct (ça ne l'a pas toujours été…). Au pire reprendre ce que font reboot.css pour un reset voire KNACSS pour restyler un état "par défaut".
Si on laisse l'état :focus tranquille (c'est mieux que de mal le faire comme très souvent) on enlève la principale difficulté

L'inconvénient du div même avec une gestion parfaite des role ARIA, c'est qu'il faut réinventer tout ce que fait chaque navigateur en matière de gestion du clic, du :focus (navigation clavier) et quand c'est dans un formulaire la soumission de ce formulaire, etc etc