WCAG 2.2 ガイドライン「2.4.9 リンクの目的（リンク単体）」Level AAA について
はじめに
WCAG 2.2の「2.4.9 リンクの目的（リンク単体）」では、リンクテキストのみでリンクの目的を明確に理解できるようにすることを求めています。この基準は、特にスクリーンリーダーユーザーやキーボード操作ユーザーに配慮し、リンクの内容が分かりやすくなることを目的としています。
1. 基準の概要
要件
- リンクテキストだけでリンクの目的が特定できる。
- リンク先が一般的に曖昧である場合を除き、この基準を満たす必要があります。
2. 実装方法
a. 明確なリンクテキストを提供する
リンクテキストだけで目的がわかるようにします。
適切なリンクテキストの例
HTML
<a href="/about">会社概要</a>
- 「会社概要」というリンクテキストだけで、ユーザーはリンクの目的を理解できます。
不適切なリンクテキストの例
<a href="/about">こちらをクリック</a>
- 「こちらをクリック」では、リンク先の目的がわかりません。
b. 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を使って補足情報を追加します。
c. 画像リンクの場合の代替テキスト
リンクが画像の場合、alt属性を適切に設定します。
適切な画像リンクの例
HTML
<a href="/about">
<img src="about-icon.png" alt="会社概要">
</a>
alt属性を使用して、リンクの目的を明確にします。
d. リンクテキストの長短を選択可能にする
ユーザーがリンクテキストの短い形式または長い形式を選択できる仕組みを提供します。
例: スクリプトでリンクテキストを変更
HTML
<a href="/products" id="link">製品ページを見る</a>
<button id="toggleLinkText">リンクテキストを短くする</button>
JavaScript
const link = document.getElementById('link');
const toggleButton = document.getElementById('toggleLinkText');
toggleButton.addEventListener('click', () => {
if (link.textContent === '製品ページを見る') {
link.textContent = '製品ページ';
toggleButton.textContent = 'リンクテキストを長くする';
} else {
link.textContent = '製品ページを見る';
toggleButton.textContent = 'リンクテキストを短くする';
}
});
3. よくある失敗例とその改善策
a. リンクテキストが曖昧
失敗例
<a href="/details">詳細はこちら</a>
改善策
<a href="/details">製品の詳細を見る</a>
b. 補足情報がない画像リンク
失敗例
<a href="/download">
<img src="download-icon.png">
</a>
改善策
<a href="/download">
<img src="download-icon.png" alt="カタログをダウンロード">
</a>
4. アクセシビリティのメリット
a. スクリーンリーダーユーザーへの配慮
- 明確なリンクテキストにより、リンク先を容易に理解できます。
b. 誤クリックの防止
- リンクの目的が明確なため、ユーザーが誤ってリンクをクリックする可能性が減少します。
c. ユーザー体験の向上
- リンクが直感的でわかりやすいことで、サイト全体の使いやすさが向上します。
5. テスト方法
a. 手動テスト
- リンクテキストがその目的を適切に示しているか確認。
- 補足情報がある場合、スクリーンリーダーで確認。
b. 自動テストツール
- AxeやWAVEを使用して、リンクテキストの適切性を検証。
まとめ
WCAG 2.2の「2.4.9 リンクの目的（リンク単体）」は、リンクテキストだけでリンクの目的を明確にすることで、すべてのユーザーにとって使いやすいウェブコンテンツを実現することを目的としています。
実装ポイント
- リンクテキストを簡潔でわかりやすいものにする。
- 必要に応じてARIA属性で補足情報を提供する。
- 画像リンクの場合、適切な代替テキストを設定する。
これにより、ユーザーが直感的に目的のリンクを見つけやすいウェブサイトを構築できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。