リンクに関連する WCAG 達成基準

TL;DR

• リンクの目的をリンクテキスト単独、または前後のテキストとの組み合わせからなるコンテキストで判断できるようにすること
• ただし、リンクの目的がほとんどの利用者にとって曖昧な場合は除く
• リンクの目的をリンクテキストで説明すると、ユーザーはそのリンクを同じページ内の他のリンクと区別することができ、リンクをたどるかどうかを決めることができる
• 一般的に、遷移先の URL はリンクの目的を説明する十分な要素とはならない

達成基準 2.4.4: リンクの目的（コンテキスト内）（レベル A）

達成基準 2.4.4: リンクの目的 (コンテキスト内) を理解する

それぞれのリンクの目的が、リンクのテキスト単独で、又はリンクのテキストとプログラムによる解釈が可能なリンクのコンテキストから判断できる。ただし、リンクの目的がほとんどの利用者にとって曖昧な場合は除く。

「リンクの目的がほとんどの利用者にとって曖昧」とは、「何らかの障害の有無に関わらず、そのリンクの目的をページ内の情報やコンテキストから判断できない」こと。

達成方法の例

G53: リンクテキストとそれが含まれている文中のテキストとを組み合わせて、リンクの目的を特定する

• リンクテキストだけではその目的が不明瞭なリンクについて、前後のテキストとの組み合わせでそのリンクの目的を明確にする
• 一般的に、遷移先の URL はリンクの目的の説明として不十分である

G91: リンクの目的を説明したリンクテキストを提供する

• リンクの目的をリンクテキストで説明する
• 一般的に、遷移先の URL はリンク先の説明として不十分である

HTML の達成方法

H2: 同じリソースに対して隣接する画像とテキストリンクを結合する

• アイコンや画像とテキストが並んでいて単一のリンクのように見えるが、実際はそれぞれ独立した a 要素としてレンダリングされている場合、タブキーでの移動やスクリーンリーダーでの読み上げが冗長になる
• テキストと画像を一つの a 要素にまとめ、画像に空の代替テキストを指定してテキストの重複を排除することで、混乱や困難がないリンクを提供することができる

H30: a 要素のリンクの目的を説明するリンクテキストを提供する

• G91 の HTML での達成方法
• そのリンクの唯一のコンテンツが画像の場合、その画像の代替テキストがリンクの説明となる
• リンクのコンテンツがテキストおよび1つ以上の画像を含み、かつテキストがリンクの目的を十分に説明している場合、画像の代替テキストは空でもよい
• 画像がリンクの目的以外にも情報を伝えるものである場合、画像にも適切な代替テキストが必要

失敗例

F63: 達成基準 2.4.4 の失敗例 － リンクと関係のないコンテンツにのみ、リンクのコンテキストを提供している

リンクのコンテキストが次のいずれかの方法で提供されていない場合、ユーザーはリンクがどこにあるのかを知ることが難しくなる。

• リンクと同じ文章、段落、リストの項目、またはテーブルのセル
• aria-label や aria-labelledby などの適切な ARIA プロパティを介する場合

そのリンクのコンテキストを探るためにユーザーがリンクの場所を離れなければならない場合、この失敗例に該当する。

達成基準 2.4.4、達成基準 2.4.9、及び達成基準 4.1.2 の失敗例 － リンクで唯一のコンテンツである画像にアクセシブルな名前 (accessible name) が提供されていない

リンクが画像やアイコンなどの非テキストコンテンツとしてのみ提供されている場面で、そのアクセシブルな名前によってリンクのコンテキストが十分に説明されていない場合、この失敗例に該当する。

達成基準 2.4.9 リンクの目的（リンクのみ）（レベル AAA）

達成基準 2.4.9: リンクの目的 (リンクのみ) を理解する

それぞれのリンクの目的を、リンクのテキスト単独で特定できるメカニズムが利用できる。ただし、リンクの目的がほとんどの利用者にとって曖昧な場合は除く。