J'ai lu des informations sur l'accessibilité Web et j'ai lu que les balises d'ancrage ne devraient être utilisées que lorsque l'utilisateur sera redirigé vers une autre URL sans JavaScript. Mais les boutons devraient être utilisés chaque fois qu'un autre comportement devrait se produire, comme l'ouverture d'un modal.
Je me demande donc si c'est correct ou prévu d'avoir à la fois des boutons et des ancres dans un navigateur. Quelque chose comme ceci:
<nav> <a href="/">Home Page</a> <a href="/about">About Page</a> <button>Sign Up</button> </nav>
Dites que dans cette situation, le bouton d'inscription lance un modal ou fait un autre comportement qui ne mène pas l'utilisateur vers une URL différente. Est-il acceptable d'avoir les deux dans le nav ? Je ne suis pas préoccupé par le style, je vais les rendre cohérents, mais je me demande quelle est la manière la plus correcte de gérer quelque chose comme ça?
4 Réponses :
Oui, il est tout à fait correct d'utiliser des boutons, des ancres ou même des div à l'intérieur de la barre de navigation comme vous le souhaitez, vous pouvez le faire. Vous avez juste besoin d'être à l'aise avec l'utilisation du CSS et du style que vous dites être. Alors vous ne devriez avoir aucun problème. Cela répond-il à votre question?
Tous les éléments de flow content sont autorisé dans une balise nav , et qui inclut des boutons .
Du point de vue de l'accessibilité, utiliser à la fois des liens et des boutons est la solution sémantiquement correcte. Les liens vous amènent à une autre page (ou ailleurs sur la page en cours) et les boutons effectuent une action. Un utilisateur de lecteur d'écran comprendra lorsqu'il entendra "lien" ou "bouton" dans le même
Comme mentionné dans les commentaires précédents, oui, il est tout à fait normal d'utiliser les deux dans votre navigation.
Si vous le souhaitez vraiment, vous pouvez utiliser les éléments pour tous, mais pour les boutons, vous incluez l'attribut role = "button" qui est sémantiquement équivalent pour utiliser .
<nav> <a href="/">Home Page</a> <a href="/about">About Page</a> <a role="button">Sign Up</a> </nav>
C'est sémantiquement équivalent, mais il n'a pas le même comportement. Les boutons, lorsqu'ils sont mis au point, sont activés à l'aide des touches entrée ou espace; Cependant, les liens ciblés ne sont activés qu'à l'aide de la touche Entrée. Les liens avec un rôle de bouton nécessitent également un écouteur de pression de touche supplémentaire pour déclencher un événement de clic lorsque l'utilisateur appuie sur la touche d'espace. C'est plus simple d'utiliser un vrai bouton.
Vous devriez aussi probablement vous pencher sur les aria-role qui peuvent fournir des indices à la technologie d'assistance.