リンクとボタン、見た目が同じでも役割は違う

四角い背景が付いているからボタン、というわけではありません。HTMLの要素は、見た目ではなく、押したあとに起きることから選びます。

別のページへ移動するときはリンク

店舗の予約ページへ移動するなら、hrefを持つa要素を使います。

<a class="reservation-link" href="reservation.html">
  来店予約ページへ
</a>

リンクなら、別のタブで開いたり、移動先のURLをコピーしたりできます。ブラウザが用意している操作を、そのまま使えるのが利点です。

その場の操作にはボタン

説明を開く、メニューを閉じる、フォームを送信する。こうした操作にはbutton要素を使います。フォームの送信に使わないボタンは、type="button"を指定します。

<button type="button" aria-expanded="false" aria-controls="details">
  詳しい説明を開く
</button>
<div id="details" hidden>
  <p>商品の素材とお手入れ方法です。</p>
</div>

この例は、開閉操作を実装する前のHTMLです。実際に開閉させるには、JavaScriptでhiddenとaria-expandedを一緒に更新します。

divをクリックできるようにする前に

divにクリック処理を付けるだけでは、ボタンと同じ操作性にはなりません。キーボードで移動できるか、何の操作なのかが読み上げられるかなど、追加の対応が必要になります。

標準のリンクやボタンを使える場面では、まずその要素を選びましょう。

見た目はCSSで整える

リンクにも、余白や背景色を付けられます。キーボード操作時のフォーカス表示は消さないようにします。

.reservation-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 24px;
  background: #141414;
  color: #fff;
  border-radius: 999px;
}

.reservation-link:focus-visible {
  outline: 3px solid #be330c;
  outline-offset: 4px;
}

確認してみよう

自分のサイトにあるクリックできる要素を、移動と操作に分けてみてください。次にTabキーで順に移動し、リンクはEnter、ボタンはEnterとSpaceで操作できるか確認します。

参考：MDNのa要素、MDNのbutton要素。

Semantic HTMLの無料レッスンへ