ナビゲーション
リンク
解説ありLink
基本にして奥深いリンク。div の onclick ではなく a 要素を使う理由を解説。
リンクとは？
リンクは、別のページや別の場所へ移動するための部品です。 Web では <a href="..."> がその専用要素で、これを使うだけで 移動・キーボード操作・右クリックメニュー・新しいタブで開くなどがすべて自動で揃います。
なぜアクセシビリティが大事なの？
まず大前提として、リンクとボタンは役割が違います。混同するとユーザーを混乱させます。
リンク <a href> | ボタン <button> | |
|---|---|---|
| 役割 | 別の場所へ移動する | その場で操作を実行する |
| 活性化キー | Enter のみ | Enter と Space |
| URL | ある（新規タブ・ブックマーク可） | ない |
「リンク風の <span>」にすると、次の人たちが取り残されます。
- キーボード利用者。
<span>は Tab でフォーカスできず移動できない。 - スクリーンリーダー利用者。「リンク」と読み上げられず、リンク一覧にも出てこない。
- すべての人。右クリックで「新しいタブで開く」やブックマークができず、
hrefも見えない。
ライブデモ（推奨実装）
下のリンクは APG／HTML に沿った実装です。マウスを使わず、Tab でフォーカスし Enter でたどってみてください。 右クリックして「新しいタブで開く」が出ることも確認しましょう。
詳しくはARIA Authoring Practices Guide（新しいタブで開く）を参照してください。
試してみよう：Tab でフォーカス → Enter で移動。右クリックで『新しいタブで開く』が使える。Space では移動しない（リンクの正しい挙動）。
ポイント
スクリーンリーダーでフォーカスすると「ARIA Authoring Practices Guide, リンク」のように「リンク」という役割が読み上げられます。利用者はリンクだけを一覧で拾い読みすることも多く、<a> を使うことでその一覧に正しく載ります。
キーボード操作
| キー | 動作 | 必須/任意 |
|---|---|---|
| Tab | 次 / 前のリンクへフォーカス移動 | 必須 |
| Enter | リンク先へ移動する | 必須 |
補足
リンクは Enter でのみ活性化し、Space では移動しません（これが正しい挙動です）。<a href> を使えば、この動作はコードを書かずに自動的に得られます。
必要な WAI-ARIA / ロール
| 付ける場所 | 属性 / ロール | 意味 |
|---|---|---|
| リンク（推奨） | <a href="..."> | 「リンク」ロール・フォーカス・Enter 活性化がすべて自動。ARIA は基本不要。 |
| 新規タブで開く | target="_blank" + rel="noopener noreferrer" | 別タブで開く。rel でセキュリティ上の問題を防ぐ。リンク文言で「新しいタブ」と明示する。 |
| span 等で代用する場合のみ | role="link" + tabindex="0" + キー処理 | 本来不要。<a> なら何も足さなくてよいので使わないのが正解。 |
| アイコンのみのリンク | aria-label="..." | 文字が無いリンクに、行き先の分かる名前を付ける。 |
実装：推奨パターン（Good）
良い例 / 推奨
移動するなら <a href>。これだけで全部入りです。
<!-- 別の場所へ「移動」するならリンク -->
<a href="/about/">運営者について</a>
<!-- 新しいタブで開く場合は、目的を明示し rel を付ける -->
<a href="https://example.com/"
target="_blank"
rel="noopener noreferrer">
ガイドライン（新しいタブで開く）
</a>補足
「ここをクリック」「詳しくはこちら」のような行き先の分からないリンク文言は避け、 リンクのテキストだけで内容が分かるようにします（スクリーンリーダーはリンクだけを抜き出して読むことがあるため）。
アンチパターン（Bad）
下は <span> に onclick を付けただけの「リンク風」です。マウスでは飛べますが、キーボードでは触れず、右クリックや新しいタブも使えません。
詳しくはARIA Authoring Practices Guideを参照してください。
試してみよう：Tab で到達できず、右クリックの『新しいタブで開く』も出ません。スクリーンリーダーでは『リンク』と認識されず、リンク一覧にも出てきません。
<!-- ❌ アンチパターン：span を onclick で「リンク風」にしただけ -->
<span class="link" onclick="location.href='/about/'">
運営者について
</span>悪い例 / 避ける
この実装の問題点:
- キーボードでフォーカスできない —
spanは Tab の対象外。 - リンクと認識されない — スクリーンリーダーのリンク一覧に出てこない。
- 右クリック / 新しいタブ / ブックマークができない —
hrefが無いため。 - 真ん中クリックや ⌘+クリックでの新規タブも不可 — ブラウザ標準の便利機能が全滅する。
ポイント
逆に、「その場で操作を実行する」のにリンクを使うのも誤りです。移動＝<a href>、操作＝<button> と、見た目ではなく役割で選びましょう。
実装チェックリスト
- 移動の部品は
<a href="...">を使っている - リンク文言だけで行き先が分かる（「こちら」を避ける）
- 新しいタブで開くときは文言で明示し
rel="noopener noreferrer"を付ける - アイコンのみのリンクには
aria-labelを付けている - Tab でフォーカスでき、フォーカスが見える
- 「操作の実行」にはリンクではなく
<button>を使っている