例-1（リンクテキストが明解でない）

HTMLソース

<h3>歴史メニュー</h3>
<ul>
 <li>御堂筋線の歴史については
      <a href="02data/sample1.html">ここ</a>をクリック</li>
 <li>四ツ橋線の歴史については
      <a href="02data/sample2.html">ここ</a>をクリック</li>
 <li>中央線の歴史については
      <a href="02data/sample3.html">ここ</a>をクリック</li>
</ul>

• リンクテキストだけを読むと「ここ」「ここ」「ここ」となり、何のことだかさっぱり分からない。

例-2（ページ内に同一のリンクテキストが存在する）

HTMLソース

<h3>御堂筋線</h3>
<ul>
 <li><a href="02data/m1.html">路線図</a></li>
 <li><a href="02data/m2.html">見どころ</a></li>
 <li><a href="02data/m3.html">歴史</a></li>
</ul>

<h3>四ツ橋線</h3>
<ul>
 <li><a href="02data/y1.html">路線図</a></li>
 <li><a href="02data/y2.html">見どころ</a></li>
 <li><a href="02data/y3.html">歴史</a></li>
</ul>

<h3>中央線</h3>
<ul>
 <li><a href="02data/t1.html">路線図</a></li>
 <li><a href="02data/t2.html">見どころ</a></li>
 <li><a href="02data/t3.html">歴史</a></li>
</ul>

• リンクテキストだけを読むと「路線図」「見どころ」「歴史」「路線図」「見どころ」「歴史」「路線図」「見どころ」「歴史」となり、適切な選択ができない。

例-3（ユニークなリンクテキストに変更）

HTMLソース

<h3>御堂筋線</h3>
<ul>
 <li><a href="02data/m1.html">御堂筋線の路線図</a></li>
 <li><a href="02data/m2.html">御堂筋線沿線の見どころ</a></li>
 <li><a href="02data/m3.html">御堂筋線の歴史</a></li>
</ul>

<h3>四ツ橋線</h3>
<ul>
 <li><a href="02data/y1.html">四ツ橋線の路線図</a></li>
 <li><a href="02data/y2.html">四ツ橋線沿線の見どころ</a></li>
 <li><a href="02data/y3.html">四ツ橋線の歴史</a></li>
</ul>

<h3>中央線</h3>
<ul>
 <li><a href="02data/t1.html">中央線の路線図</a></li>
 <li><a href="02data/t2.html">中央線沿線の見どころ</a></li>
 <li><a href="02data/t3.html">中央線の歴史</a></li>
</ul>

• リンクテキストをそれぞれユニークなものにした。
• リンクテキストのみを流し読みしてもリンク先の違いが理解できる。

例-4（title属性でリンク先の違いを表現）

HTMLソース

<h3>御堂筋線</h3>
<ul>
 <li><a href="02data/m1.html" 
        title="御堂筋線の路線図">路線図</a></li>
 <li><a href="02data/m2.html" 
        title="御堂筋線沿線の見どころ">見どころ</a></li>
 <li><a href="02data/m3.html" 
        title="御堂筋線沿線の歴史">歴史</a></li>
</ul>

<h3>四ツ橋線</h3>
<ul>
 <li><a href="02data/y1.html" 
        title="四ツ橋線の路線図">路線図</a></li>
 <li><a href="02data/y2.html" 
        title="四ツ橋線沿線の見どころ">見どころ</a></li>
 <li><a href="02data/y3.html" 
        title="四ツ橋線の歴史">歴史</a></li>
</ul>

<h3>中央線</h3>
<ul>
 <li><a href="02data/t1.html" 
        title="中央線の路線図">路線図</a></li>
 <li><a href="02data/t2.html" 
        title="中央線沿線の見どころ">見どころ</a></li>
 <li><a href="02data/t3.html"
        title="中央線の歴史">歴史</a></li>
</ul>

• リンクテキストはユニークでは無いが、title属性で違いを明確にしている。
• 非視覚系のユーザーエージェントがtitle属性を理解すれば、リンク先の違いが把握できる。

例-5（リンクテキストをユニークにするために画像のalt属性を活用）

HTMLソース

<h3>御堂筋線</h3>
<ul>
 <li>
  <a href="02data/m1.html">
   <img src="02data/spacer.gif" width="1" height="1" 
        alt="御堂筋線の" />路線図</a>
 </li>
 <li>
  <a href="02data/m2.html">
   <img src="02data/spacer.gif" width="1" height="1"
        alt="御堂筋線の" />見どころ</a>
 </li>
 <li>
  <a href="02data/m3.html">
   <img src="02data/spacer.gif" width="1" height="1"
        alt="御堂筋線の" />歴史</a>
 </li>
</ul>

<h3>四ツ橋線</h3>
<ul>
 <li>
  <a href="02data/y1.html">
   <img src="02data/spacer.gif" width="1" height="1"
        alt="四ツ橋線の" />路線図</a>
 </li>
 <li>
  <a href="02data/y2.html">
   <img src="02data/spacer.gif" width="1" height="1"
        alt="四ツ橋線の" />見どころ</a>
 </li>
 <li>
  <a href="02data/y3.html">
   <img src="02data/spacer.gif" width="1" height="1"
        alt="四ツ橋線の" />歴史</a>
 </li>
</ul>

<h3>中央線</h3>
<ul>
 <li>
  <a href="02data/t1.html">
   <img src="02data/spacer.gif" width="1" height="1"
        alt="中央線の" />路線図</a>
 </li>
 <li>
  <a href="02data/t2.html">
   <img src="02data/spacer.gif" width="1" height="1"
        alt="中央線の" />見どころ</a>
 </li>
 <li>
  <a href="02data/t3.html">
  <img src="02data/spacer.gif" width="1" height="1"
        alt="中央線の" />歴史</a>
 </li>
</ul>

Tips

• [4] リンクとなるテキストで「ここ」をクリック、「〜はこちら」、Click Here! などの表現を使わない。
• [5] リンクテキストは明解で、且つページ内でユニークなものにする。
• [6] リンクテキストがユニークにならない場合は、title属性で違いを表現する。
• [7] アクセシビリティのために透過イメージのalt属性を上手く使う。