リンクは場所へ、ボタンは動作へ

ほとんどすべてのケースに当てはまるルールは次のとおりです。リンクはどこかへ移動し、ボタンはこの場所で何かを実行します。🧭

リンクは移動のためのものです。クリックすると、別の記事や新しいセクションへ移動するように、ページまたはURLが変わります。

ボタンはその場で操作を実行します。ページを離れずに、フォームを送信したり、メニューを開いたり、設定を切り替えたりします。

スクリーンリーダーは役割を声に出して知らせます。ユーザーにはリンクまたはボタンと聞こえるため、適切な要素を使うことで、操作前に正しい期待を持ってもらえます。

これは見た目だけの問題ではありません。buttonはSpaceまたはEnterで実行されますが、リンクを実行できるのはEnterだけです。キーの動作は役割に従います。

1つだけ質問してください。このコントロールは自分のいる場所を変えるのか、それとも画面上の内容を変えるのか。Navigationならリンク、操作ならボタンです。

新しいタブで開いたりブックマークしたりするのが自然なコントロールなら、それは移動のためのものです。そのため、hrefを持つ本物のリンクを使います。

スタイルを変えても意味は変わりません。buttonをリンクのように見せたり、リンクをボタンのように見せたりできますが、役割を決めるのは要素です。

スタイルを設定したdivやspanにクリックハンドラーを追加して済ませる人がいます。見た目は問題なくても、役割がなく、キーボードにも対応していません。

フォームを送信するには、type submitのbuttonを使います。これは移動ではなく操作なので、ここでリンクを使うのは誤りです。

ユーザーをお問い合わせページへ移動させるにはリンクを使います。これは純粋な移動であり、ボタンではユーザーを混乱させます。

リンクは場所へ移動し、ボタンは操作を実行します。意図に合った要素を使えば、正しい役割とキー操作になり、ユーザーも快適に利用できます。🎉