Je voudrais créer un bouton HTML qui agit comme un lien. Ainsi, lorsque vous cliquez sur le bouton, il redirige vers une page. Je voudrais qu'il soit aussi accessible que possible.
Je voudrais également qu'il n'y ait pas de caractères supplémentaires ou de paramètres dans l'URL.
Comment puis-je y parvenir ?
Sur la base des réponses postées jusqu'à présent, je suis en train de faire ceci :
<form method="get" action="/page2">
<button type="submit">Continue</button>
</form>
mais le problème est que dans [Safari][1] et [Internet Explorer][2], cela ajoute un point d'interrogation à la fin de l'URL. Je dois trouver une solution qui n'ajoute aucun caractère à la fin de l'URL.
Il existe deux autres solutions pour y parvenir : Utiliser JavaScript ou donner à un lien l'apparence d'un bouton.
Utiliser JavaScript :
<button onclick="window.location.href='/page2'">Continue</button>
Mais cela nécessite évidemment JavaScript, et pour cette raison, c'est moins accessible aux lecteurs d'écran. Le but d'un lien est d'aller sur une autre page. Essayer de faire en sorte qu'un bouton agisse comme un lien est donc une mauvaise solution. Je vous suggère d'utiliser un lien et de [le faire ressembler à un bouton][3].
<a href="/link/to/page2">Continue</a>
[1] : http://en.wikipedia.org/wiki/Safari_%28web_browser%29 [2] : http://en.wikipedia.org/wiki/Internet_Explorer [3] : https://stackoverflow.com/questions/710089/how-do-i-make-an-html-link-look-like-a-button
La méthode HTML simple consiste à l'insérer dans un <form>
où vous spécifiez l'URL cible souhaitée dans l'attribut action
.
<form action="http://google.com">
<input type="submit" value="Go to Google" />
</form>
Si nécessaire, définissez le CSS display : inline;
sur le formulaire pour qu'il reste dans le flux avec le texte environnant. Dans l'exemple ci-dessus, vous pouvez remplacer l'entrée "<input type="submit">" par un bouton "
On s'attendrait intuitivement à pouvoir utiliser l'élément <button href="http://google.com">
par analogie avec l'élément <a>
, mais malheureusement non, cet attribut n'existe pas selon la [spécification HTML][1].
Si le CSS est autorisé, utilisez simplement un <a>
que vous stylisez pour qu'il ressemble à un bouton en utilisant notamment la propriété [appearance
][2] ([seul le support d'Internet Explorer est actuellement (juillet 2015) encore faible][3]).
<a href="http://google.com" class="button">Go to Google</a>
a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
}
Ou choisissez l'une de ces nombreuses bibliothèques CSS comme [Bootstrap][4].
<a href="http://google.com" class="btn btn-default">Go to Google</a>
Si JavaScript est autorisé, définissez le paramètre window.location.href
.
<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />
[1] : https://www.w3.org/TR/html5/forms.html#the-button-element [2] : https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance [3] : http://caniuse.com/#feat=css-appearance [4] : http://getbootstrap.com/css/#buttons
La seule façon de le faire (à l'exception de l'ingénieuse idée de formulaire de BalusC !) est d'ajouter un événement JavaScript onclick
au bouton, ce qui n'est pas bon pour l'accessibilité.
Avez-vous envisagé de styliser un lien normal comme un bouton ? Vous ne pouvez pas obtenir des boutons spécifiques à l'OS de cette manière, mais c'est encore la meilleure façon de procéder.