リンクとボタンのアクセシビリティ完全ガイド：名前の付け方・判別性・フォーカス・クリック領域・誤操作防止で“迷わず押せるUI”を作る（WCAG 2.1 AA）
概要サマリー（先に要点）
- リンクとボタンは、Web体験の“手”ですの。押せなければ、どんな情報もサービスも届きません。
- 重要なのは ①リンク/ボタンの使い分け ②分かる名前（目的が伝わる）③色だけに頼らない判別 ④十分なクリック領域 ⑤フォーカス可視 ⑥誤操作防止（破壊的操作の守り）。
- 「こちら」「詳細」「もっと見る」などの曖昧ラベルは、スクリーンリーダーのリンク一覧、音声入力、キーボード操作で特に困りごとになりやすいです。
- この記事には、すぐ流用できる 命名テンプレ・良い例/悪い例・実装例（HTML/CSS）・5分スモークテスト を収録しています。
対象読者（具体）：UI/UXデザイナー、フロントエンドエンジニア、Web編集者、EC/予約サービス運用者、自治体/公共サイト担当、QA/テスター、デザインシステム担当
アクセシビリティレベル：WCAG 2.1 AA 準拠を目標（関連：2.4.4、2.4.7、1.4.1、1.4.3、1.4.11、2.5.3、4.1.2 ほか）
1. はじめに：リンクとボタンは“操作の言語”——ここが曖昧だと迷子になります
ページ構造やナビゲーションが整っていても、最後に行動を起こすのは「リンク」や「ボタン」です。つまり、リンクとボタンはユーザー体験の“手”。ここが分かりにくかったり、押しづらかったり、誤って押してしまったりすると、アクセシビリティは完成しませんの。
とくにスクリーンリーダー利用者は「リンク一覧」や「ボタン一覧」で目的の要素を探しますし、キーボード利用者はTab移動で要素を順にたどります。音声入力の方は「〇〇をタップ」と見えているラベルを声に出して操作します。つまり、リンク/ボタンの“名前・判別性・操作性”がそのまま、利用可能性を決めるんです。
本記事では、誰でも迷わず押せるUIをつくるために、リンクとボタンの設計・実装・運用のポイントを、実務向けに丁寧にまとめますね。
2. まず大前提：リンクとボタンの正しい使い分け（ここで半分決まります）
2.1 リンク（<a>）は「移動する」
- 別ページへ移動
- ページ内の別セクションへ移動
- ファイルを開く/ダウンロードへ誘導
- URLとして共有できるべき操作（ルーティング）
例：
- 「送料の詳細を見る」
- 「採用情報へ」
- 「PDFを開く」
2.2 ボタン（<button>）は「その場で実行する」
- 送信する
- 開閉する（アコーディオン、モーダル）
- フィルタを適用する
- 再生/停止、保存、削除などのアクション
例：
- 「保存」
- 「検索」
- 「メニューを開く」
この使い分けが崩れると、支援技術が「これは移動なの？実行なの？」を誤解しやすく、キーボード操作や状態の読み上げも不安定になりますの。見た目は同じでも、意味の要素を選ぶことが最優先です。
3. “分かる名前”の作り方：リンク/ボタンは目的が読めて初めて使える
3.1 禁止したい定番：曖昧なラベル
- 「こちら」
- 「詳細」
- 「もっと見る」
- 「確認」
- 「送信」だけ（何を送信？）
これらは視覚的文脈があると理解できますが、リンク一覧・ボタン一覧では意味が消えます。さらに、同名が大量に並ぶと音声入力やスイッチ操作でも迷いが増えますの。
3.2 命名テンプレ：動詞＋目的語（＋必要なら条件）
- 「注文の詳細を見る」
- 「配送先を変更する」
- 「領収書をダウンロードする」
- 「パスワードを再設定する」
- 「検索条件をリセットする」
“何をするか”が一目で分かるのが正解です。
3.3 例：カード一覧の「詳細」を改善する
悪い例
- 「詳細」ボタンが10個
良い例（ラベルに目的語を入れる）
- 「田中さんのプロフィールを見る」
- 「案件Aの詳細を見る」
もし見た目の都合で短くしたい場合は、見た目は短く、アクセシブルネームだけ補強する方法もあります。
<a href="/profile/tanaka" aria-label="田中さんのプロフィールを見る">詳細</a>
ただし、可視ラベルと読み上げ名が大きく違うと混乱します（WCAG 2.5.3）。可能なら、可視ラベル自体を改善するのがいちばん安全ですわ。
4. リンクは「色だけ」に頼らない：判別性とコントラストの基本
4.1 色だけでリンクだと分からない問題
色覚特性のある方、コントラストが低い環境、画面の反射、拡大表示などで、リンクがただの文字に見えることがあります。
原則として、リンクは
- 下線
- アイコン
- 太字
など、色以外の手がかりを重ねると安定しますの。
推奨例：
a {
text-decoration: underline;
text-underline-offset: 0.15em;
}
a:hover, a:focus-visible {
text-decoration-thickness: 3px;
}
4.2 コントラスト（本文・リンク・非テキスト）
- 通常文字：4.5:1 以上
- 大きい文字：3:1 以上
- 非テキスト（境界線・アイコン・フォーカスリングなど）：3:1 以上
リンク色をブランドカラーにする場合でも、本文と十分な差を取りつつ、背景ともコントラストを確保しましょう。
5. フォーカス可視：キーボード利用者の“現在地”を消さないでください
リンクやボタンが多いページほど、フォーカスリングの視認性が命ですの。フォーカスが見えないと、キーボード利用者は今どこにいるか分からず、実質操作不能になります。
推奨例：
:focus-visible{
outline: 3px solid #FF9900;
outline-offset: 3px;
}
5.1 “消す”は最悪、 “整える”が正解
outline: none; で消してしまうのは避けて、デザインに合わせて太さ・色・オフセットを整えましょう。背景が画像やグラデーションでも見える色を選ぶのがコツです。
6. クリック領域と誤操作防止：押せる面積は“余白で作る”
6.1 ターゲットサイズの目安
とくにモバイルや視線入力、手指の不自由がある方にとって、押せる面積は重要です。
目安として、ボタンは 44px相当の押せる領域を確保します。
.btn {
min-height: 44px;
padding: 0.6rem 1rem;
}
6.2 リンクは“文字だけ”にしない
本文中リンクは文字だけでも成立しますが、カード全体がリンクのようなUIでは、クリック領域が小さいとミスが増えます。
- カード全体をリンクにする場合は、フォーカスリングもカード全体に出るように
- “複数リンクが混在するカード”は、誤操作が増えるので構造を慎重に
7. 破壊的操作（削除・解約・送信）の守り：アクセシビリティは“誤操作の回復”まで
アクセシビリティは「押せる」だけでなく、「間違えても戻れる」ことが大切ですわ。破壊的操作は特に、認知負荷が高い状況や支援技術利用時に事故が起きやすいです。
7.1 削除ボタンは“近づけない”
- 「保存」と「削除」を並べる場合、距離を取り、色だけで区別しない
- ラベルを明確に（「削除」だけではなく「この住所を削除」など）
7.2 二段階確認（Confirm）を丁寧に
- 何が消えるかを明示
- 取り消し可能なら「取り消す（Undo）」を用意
- モーダル確認ならフォーカス管理（開く→閉じる→元に戻る）を確実に
7.3 無効化（disabled）は“理由”もセットで
押せないボタンをただ灰色にすると、なぜ押せないか分からず困ります。
- 「入力が未完了です」
- 「権限がありません」
など、テキストで理由を伝えると親切ですの。
8. アイコン・テキスト・ARIA：よくあるUIの安全な実装パターン
8.1 アイコンだけのボタン
<button type="button" aria-label="閉じる">
<img src="close.svg" alt="">
</button>
- 画像は装飾として
alt="" - ボタンに名前（aria-label）を付与
8.2 外部リンク・新規タブ：ユーザーの予測可能性を守る
新規タブを開くリンクは、予告があるほうが安心です。
- アイコン＋テキスト
- もしくはスクリーンリーダー向け注記
例：
<a href="…" target="_blank" rel="noopener">
採用情報（新しいタブで開きます）
</a>
※「新しいタブ」の乱用は避け、必要性があるときだけにしましょう。
8.3 CTA（主要ボタン）は“1画面1主役”が分かりやすい
ボタンが並びすぎると、どれを押せばよいか迷いが生まれます。
- 主要CTAを1つ、補助CTAを1〜2つ
- ラベルは動詞＋目的語
- 破壊的操作は視覚的にも距離を
9. 5分スモークテスト：リンクとボタンで必ず見るべき最小項目
- リンクはリンク、実行はボタンになっている
- 「こちら」「詳細」など曖昧ラベルが量産されていない
- リンクは色だけに依存せず、下線などで判別できる
- コントラストが十分（本文/リンク/フォーカス）
- キーボードでTab移動し、フォーカスが常に見える
- クリック領域が狭すぎない（特にモバイル）
- 削除/解約など破壊的操作に確認や回復手段がある
- アイコンボタンに適切な名前（aria-label）がある
これが通れば、“押せない・分からない・間違える”の大事故がかなり減りますの。
10. 対象読者にとっての価値（具体）
- スクリーンリーダー利用者：リンク一覧・ボタン一覧で目的の操作が見つかり、迷いが減ります。
- キーボード利用者：フォーカス可視と論理的な要素設計で、押し間違いが減り、操作が安定します。
- 音声入力利用者：ラベルが具体的で一致していると、声で操作しやすくなります。
- 認知特性のある方：曖昧な言葉が減り、破壊的操作に確認があると、安心して手続きを進められます。
- 高齢者・モバイル利用者：押せる面積が確保され、誤タップが減ることでストレスが下がります。
- 運用チーム：命名テンプレを作ると、更新・記事追加でも品質が揺れにくく、レビューも短くなります。
11. アクセシビリティレベルの評価（本記事の到達点）
- WCAG 2.1 AA の主要関連項目
- 2.4.4 リンクの目的（文脈内）：曖昧ラベルの解消、目的語の明示
- 2.4.7 フォーカス可視：フォーカスリングの担保
- 1.4.1 色の使用：色だけに依存しないリンク判別
- 1.4.3 コントラスト（最小） / 1.4.11 非テキストコントラスト：文字・アイコン・フォーカスの視認性
- 2.5.3 ラベル名の一致：音声入力で操作できる名前設計
- 4.1.2 名前・役割・値：ボタン/リンクの適正、アイコンボタンの命名
- リンクとボタンを整えることは、AA準拠だけでなく、完了率・誤操作率・問い合わせ数にも直接効く実務施策です。
12. まとめ：押せることは、やさしさの最小単位
- リンクは移動、ボタンは実行——意味の要素を選ぶ。
- ラベルは「動詞＋目的語」で、リンク一覧でも目的が分かるように。
- リンクは色だけに頼らず、下線などの手がかりを重ねる。
- フォーカス可視は消さず、太く見える形で整える。
- クリック領域は余白で作り、誤操作を減らす。
- 破壊的操作は確認・回復・距離で守り、安心して使える体験へ。
リンクとボタンは小さな部品ですが、ユーザーにとっては“行動の入口”そのものです。
その入口を少しだけ丁寧に整えることで、迷いが減り、安心して前に進める人が増えます。あなたのUIが、どんな人にも押しやすい場所になりますように。