HTML のリンク（<a>）とボタン（<button>）の使い分けとアクセシブル実装

リンクとボタンの正しい使い分け

HTML には別ページや別位置に「移動」させる と、「何かを実行」させる があります。この 2 つは見た目が似ていても、ユーザ・支援技術・SEO 視点では別物です。

判断	使う要素	例
別 URL（または同一ページ内アンカー）に移動		「商品詳細」「目次へ戻る」「外部サイト」
フォーム送信		「送信」「保存」
モーダル開閉・タブ切替・JS で何かを実行		「開く」「コピー」「削除」
フォーム内容のリセット		「リセット」
新規タブで開きたい		外部リンク

基本構文

商品詳細を見る



  外部サイト
  ↗




  
  

ログイン モーダルを開く

との違い

送信



  
  送信

はテキストしか入れられませんが、 はアイコン・改行・複数要素を入れられるので、現代では が主流です。

「リンクをボタン風」「ボタンをリンク風」の罠

見た目はクラスで自由に切り替えられますが、意味（セマンティクス）は要素そのもので決まります。

無料登録する


削除
開く

削除

アクセシビリティ（ARIA・キーボード操作）

最良はネイティブ要素を使うことです。 は最初から:

• Tab フォーカス可能
• Enter / Space で発火
• スクリーンリーダーが「ボタン」と読み上げ
• 無効化 (disabled) 対応

どうしても

や をボタンにしたい場合（既存デザインシステム等）:

  保存

これだけ書くより、素直に

をスタイルした方が圧倒的に楽です。

主要 CSS フレームワークでの実装

フレームワーク	典型コード
Tailwind CSS
Bootstrap 5
Material UI
shadcn/ui
Chakra UI

セキュリティ：target="_blank" の落とし穴

外部リンクを新規タブで開くとき、リンク先 JS から window.opener 経由で元ページを操作される（タブナビング攻撃）リスクがあります。必ず rel を付けます:

外部


外部

無効化（disabled）の挙動の違い

要素	無効化方法	クリック	フォーカス
	属性	無効	飛ばす
	disabled 属性は無効	常に発火	飛ばさない
無効化したい場合	href を外す or aria-disabled="true" + CSS pointer-events:none + tabindex="-1"	無効	飛ばす

UX のベストプラクティス

• 主要 CTA（Call To Action）は1 ページに 1 つだけ強調色。すべてを目立たせると優先度が伝わらない
• テキストは具体的に。「クリック」ではなく「資料をダウンロード」「無料体験を始める」
• ボタンの最小タップサイズは 44×44 px（WCAG / iOS HIG / Material 共通）
• ローディング中は disabled + 「送信中…」表示で二重送信防止
• 破壊的操作（削除等）は確認ダイアログを挟むか、警告色 + アンドゥ可能に

FAQ

Q: type を書かない

の挙動は？
A: フォーム内では submit 扱いになります。これが原因でモーダル開くつもりがフォーム送信される事故が多発。必ず type="button" を明示してください。

Q: アイコンだけのボタンに aria-label は必要？
A: 必須です。スクリーンリーダー利用者にはアイコンが見えません。

で必ず代替テキストを。

Q: と

でフォーカスリングが違う
A: ブラウザの既定スタイルが異なります。:focus-visible でデザインシステムに合わせ統一しましょう。

編集

ページ

ページを更新 ページの作成 ページを削除