適合レベル
A
※各レベルについては適合レベルとはをご覧ください
概要
リンクになっている画像には、そのリンク先が明確にわかる代替テキストを設定する。
具体的な実装方法
2.4.4 A
1. ⭕️良い例
リンクテキスト自体で目的を明確にする（レベルAAAの達成基準2.4.9を満たす最善の方法）
<a href="products-list.html">当社の製品一覧</a>直前の見出しと合わせてリンクの目的が分かる
<h2>新製品Aについて</h2>
<p>詳細な仕様と価格を掲載しています。</p>
<p><a href="productA.html">詳細はこちら</a></p>テーブルのセル内で、その行・列のヘッダーと合わせて目的が分かる
<tr>
<th scope="row">Tシャツ モデルX</th>
<td><a href="details-modelX.html">詳細を見る</a></td>
</tr>2. ❌悪い例
リンクテキストとその周辺の文脈を読んでも、リンク先が分からない
<p>もっと知りたいですか？ <a href="info.html">こちらをクリック</a></p>なぜ問題なのか
- 「こちらをクリック」というテキストと、その直前の文章だけでは、具体的に何についての情報なのかが分かりません。スクリーンリーダーでリンクだけを読み上げた場合、全く意味をなさなくなります。
改善策
- リンクテキストを「詳細情報はこちら」のように具体的にするか、リンクを含む文章全体で「〇〇についての詳細情報はこちら」のように目的が分かるように記述します。
3.プラットフォーム別の実装
この達成基準は、プログラムで解釈可能な**コンテキスト（文脈）**からリンクの目的が判断できればよいため、以下のようなHTML構造が重要になります。
- 同じ段落（
<p>）内にある - 同じリスト項目（
<li>）内にある - 同じテーブルセル（
<td>）内や、そのセルのヘッダー（<th>）と関連付けられている - WAI-ARIAの
aria-labelledbyやaria-describedbyによって、リンクと説明テキストが関連付けられている
4.特殊なケースへの対応
「続きを読む」のような曖昧なリンクテキストでも、それが含まれる段落や見出し、テーブルセルなど、構造的に関連付けられた文脈と合わせることでリンクの目的が明確になれば、この達成基準を満たします。
<article>
<h2>最新ブログ記事：アクセシビリティ向上の秘訣</h2>
<p>ウェブサイトのアクセシビリティは、今や必須の要件です。この記事では、すぐに実践できる3つのテクニックを紹介します...</p>
<a href="blog/post123.html">続きを読む</a>
</article>この例では、「続きを読む」は<h2>の見出し「最新ブログ記事：アクセシビリティ向上の秘訣」と同じ<article>要素内にあるため、文脈からリンクの目的が明確です。
確認観点
2.4.4 A
1.定量的な基準の担保
自動チェックツールでの合格
- Lighthouseやaxe DevToolsは、「リンク名が不明確」などの問題を一部検出できますが、文脈を含めたリンクの目的を正確に判定することは困難です。
チェックリストの達成度
2.定性的な基準の担保
レビュー
- リンクテキストが曖昧な箇所について、HTML構造を確認し、リンクが適切なコンテキスト（段落、リスト項目、見出しなど）内に配置されているかを目視で確認します。
専門家による監査
- スクリーンリーダーを使い、リンクだけを読み上げる機能でナビゲーションを行います。その際に、各リンクの目的が不明瞭でないか、前後の要素を読み上げることで文脈が補完され、最終的に目的を理解できるかを評価します。