同じ名前のリンクは同様の目的を持つ必要があります。

ユーザーの混乱を防ぐために、同一のリンクは同じ目的を説明する必要があります。この説明により、ユーザーはWebページ内の他の宛先につながるリンクと一つ一つのリンクを区別でき、リンクをたどるかどうかを判断するのに役立ちます。一般的に、宛先のURIは十分に説明的ではありません。

この達成基準の目的は、ユーザーがコンテンツ内の各リンクの目的を理解し、そのリンクをたどるかどうかを判断できるようにすることです。

機能するマークアップの例

以下の例の前には、起源の技術参照ページへのリンクがあります。

リンク目的でaria-labelを使用する

例: aria-labelを使用してHTMLでリンクの目的を説明する:

<h4>Neighborhood News</h4>
<p>Seminole tax hike:  Seminole city managers are proposing a 75% increase in 
property taxes for the coming fiscal year.
<a href="taxhike.html" aria-label="Read more about Seminole tax hike">[Read more...]</a>
</p> 

<p>Baby Mayor:  Seminole voters elect the city's youngest mayor ever by voting in 3 year 
old Willy "Dusty" Williams in yesterday's mayoral election.
<a href="babymayor.html" aria-label="Read more about Seminole's new baby mayor">[Read more...]</a>
</p>

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

HTMLのa要素のテキスト コンテンツでリンクの目的を説明します。

<a href="routes.html">Current routes at Boulders Climbing Gym</a>

アンカー要素のリンクの目的を説明するリンクテキストを提供する

例

例1: HTMLのa要素のテキスト コンテンツでリンクの目的を説明します。

<a href="routes.html">
  Current routes at Boulders Climbing Gym
</a>

例2: img要素の属性 alt を使用して、グラフィカル リンクの目的を説明します。

<a href="routes.html">
  <img src="topo.gif" alt="Current routes at Boulders Climbing Gym" /> 
</a>

例3: アンカー (a) 要素に、 alt 属性に加えて、リンクの目的を説明するテキストが含まれている場合に、空の img 属性を使用します。リンク テキストはページの画像の横に表示されることに注意してください。

<a href="routes.html">
  <img src="topo.gif" alt="" />
  Current routes at Boulders Climbing Gym
</a>

例4: サイトでは、ユーザーがログインしているときに、製品の詳細ページの「フィードバック」リンクをクリックして、製品に関するフィードバックを提供できます。他のユーザーまたは製品メーカーは、フィードバックに対して応答することができます。ユーザーのフィードバックに対する応答が利用可能な場合、フィードバック リンクには「フィードバック」テキストの前にアイコンが表示されます。ヘルプ情報では、このアイコンは引用符を含む吹き出しとして説明されており、アイコン自体も例として含まれています。ヘルプ テキスト内のアイコンの代替テキストは、「応答受信アイコン」です。製品詳細ページ（応答が利用可能な場合）でも同じ代替テキストが使用され、複数の方法でこのアイコンを識別できるようになります。

<a href="prod_123_feedback.htm">Feedback 
  <img src="response.gif" width="15" height="15" alt="Response received icon" /></a>

例5: リンクにはテキストとアイコンが含まれており、アイコンはターゲットに関する追加情報を提供します。

<a href="WMFP.pdf">
  Woodend Music Festival Program
  <img src="pdficon.gif" alt="PDF format"/>
</a>

例6:「MyCorp」社の年次報告書は、企業WebサイトでPDFファイルとして公開されており、年間企業予算はWebサイトでExcelファイルとして公開されています。

<p>
  <a href=”2009mycorp_report.pdf”>MyCorp 2009 Annual Report (pdf)</a><br />
  <a href=”2009mycorp_budget.xls”>MyCorp 2009 Annual Budget (Excel)</a>
</p>

例7:HTML5でブロックレベル要素をラップするリンクの使用例。

<article>
  <a href="news.html">
  <h3>Budget Debate Continues in Parliament</h3>
  <p class="subhead"><img class="alertimg" src="alerticon.png" alt="Breaking News" height="30" width="30">Members of Parliament continued vigorous debate on three challenging issues surrounding the upcoming year's budget.</p>
  <p>Read more</p>
  </a>
</article>