リンクのように動作するHTMLボタンを作成したいと考えています。つまり、ボタンをクリックすると、あるページにリダイレクトされるというものです。可能な限りアクセシブルなものにしたいと思います。
また、URLに余計な文字やパラメータを入れないようにしたいです。
どうすれば実現できるでしょうか?
これまでに投稿された回答を参考に、現在はこのようにしています。
<form method="get" action="/page2">
<button type="submit">Continue</button>
</form>
しかし、この方法の問題点は、SafariとInternet Explorerでは、URLの最後にクエスチョンマークの文字が追加されることです。URLの末尾に文字が追加されない解決策を探しています。
他にも2つの解決策があります。JavaScriptを使用するか、リンクをボタンのように見せるスタイリングを行うかです。
JavaScriptを使う。
<button onclick="window.location.href='/page2'">Continue</button>
しかし、これは明らかにJavaScriptを必要とし、そのためにスクリーン・リーダーにとってはアクセスしにくいものとなっています。リンクの目的は、別のページに移動することです。ですから、ボタンをリンクのように動作させようとするのは間違った解決策です。私の提案は、リンクを使用し、[ボタンのように見えるようにスタイルを設定][3]することです。
<a href="/link/to/page2">Continue</a>
[3]: https://stackoverflow.com/questions/710089/how-do-i-make-an-html-link-look-like-a-button
HTMLの方法としては、<form>
の中に記述し、action
属性で目的のターゲットURLを指定します。
<form action="http://google.com">
<input type="submit" value="Go to Google" />
</form>
必要に応じて、フォームにCSSの display: inline;
を設定して、周囲のテキストとの流れを整えます。上記の例では、<input type="submit">
の代わりに、<button type="submit">
を使用することもできます。唯一の違いは、<button>
要素が子を許可していることです。
直感的には、<button href="http://google.com">
を <a>
要素と同様に使用できると思うかもしれませんが、残念ながら、HTML 仕様 によると、この属性は存在していません。
CSSが許可されている場合、単純に<a>
を使用し、特にappearance
プロパティを使用して、ボタンのように見えるようにスタイリングします([Internet Explorerのみ、現在(2015年7月)のサポートはまだ不十分です][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;
}
あるいは、[Bootstrap][4]のような数多くのCSSライブラリの中から選ぶこともできます。
<a href="http://google.com" class="btn btn-default">Go to Google</a>
JavaScriptが許可されている場合は、window.location.href
を設定します。
<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />
[3]: http://caniuse.com/#feat=css-appearance [4]: http://getbootstrap.com/css/#buttons
これを実現する唯一の方法は(BalusCの独創的なフォームのアイデアを除いて!)、JavaScriptのonclick
イベントをボタンに追加することですが、これはアクセシビリティ上よくありません。
通常のリンクをボタンのようにスタイリングすることを考えてみましたか?この方法では、OSに特化したボタンを実現することはできませんが、それでもIMOでは最良の方法です。