Créer des liens Bootstrap utilisables avec et sans JavaScript
La documentation de Bootstrap fait souvent état de l’usage d’ancres utilisant un # dans son href.
<a href="#" onclick="Foo()">...</a>
Niveau accessibilité, si on vous demande d’avoir un site qui fonctionne sans JavaScript, le lien sera inutilisable (oui, on peut encore vous demander cela en 2019).
Je n’entends pas refaire une explication ici des différents concepts de sémantique HTML, rôle ARIA … etc …. L’objectif est uniquement de rappeler que l’on peut avoir un lien fonctionnel avec et sans JavaScript.
Pour que le lien soit utilisable, il faut prévoir deux comportements :
- Le premier avec JavaScript : ouvrira certainement une boite de dialogue.
- Le second sans JavaScript : déclenchera la navigation vers une page.
Pour un site .net MVC, cela est plutôt facile. Il suffit de prévoir deux vues :
- Une vue partielle pour l’encapsulation dans la boite de dialogue
- Une vue qui embarque la vue partielle pour permettre la navigation de l’utilisateur sans JavaScript.
Côté HTTML de l’ancre, cela n’est pas compliqué.
<a href="/Controller/Action" onclick="Foo(); return false">...</a>
Comme cela, c’est un peu plus clair et cela fonctionne avec et sans JavaScript :
- Le lien sert de bouton.
- Avec JavaScript, au clavier, il fonctionnera comme un bouton.
- Avec JavaScript, il fonctionne au click.
- Sans JavaScript, on lance une navigation.
Old school, mais utilisable.
Pour une écriture plus propre, la fonction Foo() peut directement retourner false.