Web制作において「ボタン」と「リンク」は似ているようで役割が異なり、アクセシビリティ対応の観点から正しく使い分けることが重要です。見た目を同じようにデザインできても、意味を誤るとスクリーンリーダー利用者やキーボード操作ユーザーにとって混乱の原因となります。ここではボタンとリンクの違いと、正しいマークアップ方法を解説します。
ボタンとリンクの役割の違い
- リンク（<a>）：ページ遷移や別ページへの移動を行うための要素
- ボタン（<button>）：フォーム送信やモーダル表示、メニュー開閉など、ページ内の操作を行う要素
「見た目がボタンでもページ遷移するならリンク」、「見た目がリンクでもページ内の動作を制御するならボタン」と考えると分かりやすいです。
リンクの正しいマークアップ
リンクは必ずhref属性を持つ必要があります。これがないとスクリーンリーダーで正しくリンクとして認識されません。
<a href="/contact">お問い合わせページへ</a>
リンクにJavaScriptのonclickだけを仕込むのはNGです。意図が遷移であれば必ずhrefを指定します。
ボタンの正しいマークアップ
ボタンはtype属性を適切に指定します。省略するとデフォルトでtype=”submit”になるため、フォーム外で使う場合は明示的にtype=”button”としましょう。
<button type="button" aria-controls="menu" aria-expanded="false">
メニューを開く
</button>
aria属性を組み合わせることで、スクリーンリーダー利用者にも状態を分かりやすく伝えられます。
よくある誤用と問題点
- リンクをボタン風にスタイルしてページ内処理に使う → 意味的に誤り、キーボード操作で期待通りに動作しないことがある
- ボタンでページ遷移をさせる → リンクとして認識されないため、ブックマークや右クリックメニューなどの利便性が損なわれる
アクセシビリティ対応のポイント
- 意味に合った要素を選ぶ（移動＝a、操作＝button）
- キーボード操作で利用できるようにする（Tab移動、EnterやSpaceキーで操作）
- ARIA属性で状態を伝える（例：aria-expanded, aria-pressedなど）
まとめ
リンクは移動、ボタンは操作という役割を明確に区別することがアクセシビリティ対応の基本です。正しい要素選択と属性指定により、見た目だけでなく意味的にも正しいマークアップが実現でき、すべてのユーザーにとって使いやすいWeb体験につながります。
