WCAG 2.2 ガイドライン「2.4.4 リンクの目的（文脈内）」Level A について
はじめに
WCAG 2.2の「2.4.4 リンクの目的（文脈内）」では、リンクの目的がリンクテキスト単体、またはリンクテキストとその文脈の組み合わせから理解できることを求めています。この基準は、特にスクリーンリーダーを使用するユーザーやキーボード操作ユーザーが、リンク先を正確に理解できるようにするためのものです。
1. 基準の概要
要件
- リンクの目的をリンクテキスト単体で明示するか、リンクテキストとその文脈（プログラム的に判定可能なもの）で明示する。
- リンク先が曖昧な場合を除き、目的がはっきりとわかるリンクを提供する。
2. 実装方法
a. リンクテキストにリンクの目的を明示する
適切なリンクテキストの例
HTML
<a href="/contact">お問い合わせフォームはこちら</a>
- このリンクでは、リンクテキストだけでリンク先の目的が明確です。
不適切なリンクテキストの例
<a href="/contact">こちら</a>
- 「こちら」だけではリンク先の目的が不明瞭です。
b. リンク文脈で目的を補足する
リンクテキスト単体では不足する場合、周囲の文脈を活用してリンクの目的を示します。
文脈を利用した例
HTML
<p>製品の詳細は <a href="/product">こちらをご覧ください</a>。</p>
- 「製品の詳細は」の文脈により、リンク先の目的が補足されます。
c. ARIA属性を使用してリンクの目的を補足
aria-labelやaria-labelledbyを使い、視覚的に表示されない情報を補足します。
例: aria-labelの使用
HTML
<a href="/download" aria-label="最新のカタログをダウンロード">ダウンロード</a>
- 視覚的には「ダウンロード」のみが表示されますが、スクリーンリーダーは詳細な説明を読み上げます。
例: aria-labelledbyの使用
HTML
<p id="catalogDesc">最新のカタログをダウンロード</p>
<a href="/download" aria-labelledby="catalogDesc">こちら</a>
- 「こちら」というリンクテキストが、
aria-labelledbyで文脈を補足しています。
d. タイトル属性で追加情報を提供
title属性を使って、リンク先の補足情報を提供します。
例: タイトル属性の使用
HTML
<a href="/help" title="ヘルプページへのリンク">ヘルプ</a>
3. よくある失敗例とその改善策
a. リンクテキストが曖昧
失敗例
<a href="/details">もっと見る</a>
問題点
- 「もっと見る」だけではリンク先が何を示しているかわかりません。
改善策
<a href="/details">製品の詳細をもっと見る</a>
b. 文脈がプログラム的に判定できない
失敗例
<p>詳細は以下をご覧ください。</p>
<a href="/info">こちら</a>
問題点
- 「こちら」というリンクテキストが文脈を離れると意味を失います。
改善策
- 明示的なリンクテキストを使用するか、
aria-labelで補足します。
<a href="/info" aria-label="製品情報の詳細">こちら</a>
4. アクセシビリティのメリット
a. スクリーンリーダーユーザーへの配慮
- リンク先が明確であれば、スクリーンリーダーユーザーがページ内を効率的にナビゲートできます。
b. 誤操作の防止
- 明確なリンクテキストは、ユーザーが誤ったリンクをクリックするリスクを軽減します。
c. ユーザー体験の向上
- 一般ユーザーにもリンクの目的が分かりやすくなり、信頼性の高いコンテンツを提供できます。
5. テスト方法
a. 手動テスト
- 各リンクテキストを確認し、単体または文脈でリンクの目的が明確かを確認。
- スクリーンリーダーを使用して、リンクテキストが適切に読み上げられるか確認。
b. 自動テストツール
- AxeやWAVEを使用して、リンクテキストの適切性を検証。
まとめ
WCAG 2.2の「2.4.4 リンクの目的（文脈内）」は、リンク先の目的を明確にすることで、ユーザーの混乱を防ぎ、効率的な操作を可能にすることを目的としています。
実装ポイント
- リンクテキストにリンクの目的を明示する。
- 文脈やARIA属性で補足情報を提供する。
- 曖昧なリンクテキスト（例: こちら、もっと見る）は避ける。
これらを実践することで、すべてのユーザーにとってわかりやすく操作しやすいウェブコンテンツを提供できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。