WCAG 2.0 実装方法集

メインコンテンツへスキップ

-

SCR30: スクリプトを用いて、リンクのラベルを変更する

適用(対象)

HTML及びXHTMLで使用されるクライアントサイドスクリプト

これは、次の達成基準に関連する実装方法である:

解説

この実装方法の目的は、リンクが文脈以外でも理解可能になるように、追加情報をリンクテキストに加えることを利用者が選択できるようにすることである。

一部の利用者は、リンクの文脈を参照する必要がないように、リンクがすべてを含んでいることを好む。別の利用者は、それぞれのリンクに文脈に関する情報が含まれていると、反復されてサイトの使い勝手が低下すると感じている。支援技術の利用者の間では、どちらが好ましいかに関して、ワーキンググループへのフィードバックは分かれている。この実装方法は、利用者自身にとって良い方法を選ぶことを可能にする。

どのようなリンクの目的を理解する場合でも追加の文脈が必要とならないようにするため、そのページのリンクのリンクテキストを展開するページの先頭近くにリンクが提供される。展開されるリンクの目的がそのリンクテキストから、常に直接理解可能でなければならない。

この実装方法では、現在表示されているページのリンクだけを展開する。利用者がそのサイトに対して1度だけ設定を行えば良いようにするために、設定情報をCookie又はサーバーサイドの利用者プロファイルに保存することも可能であり、場合によってはそれが望ましい。

事例

事例 1

この例では、JavaScript を用いて直接リンクのテキストに文脈上の情報を追加する。linkクラスはどのテキストを追加するかを決定する。「リンクを展開する」リンクが選択されたとき、ページ内のそれぞれのリンクにテキストを追加すべきかがテストされる。

コード例:


...
<script>
 var linkContext = {
   "hist":" 版 Webの歴史",
   "cook":" 版 Cooking for Nerds"
 };

 function doExpand() {
   var links = document.links;
   var link;

   for (link in links) {
     var cn = links[link].className;
     if (linkContext[cn]) {
       links[link].appendChild(document.createTextNode(linkContext[cn]));
     }
   }
 }
</script>

<h1>本のダウンロード</h1>
<p><a href="#" onclick="doExpand();">リンクを展開する</a></p>

<ul>
<li>Webの歴史:
<a href="history.docx" class="hist">Word</a>, 
<a href="history.pdf" class="hist">PDF</a>, 
<a href="history.html" class="hist">HTML</a>
</li>

<li>Cooking for Nerds:
<a href="history.docx" class="cook">Word</a>, 
<a href="history.pdf" class="cook">PDF</a>, 
<a href="history.html" class="cook">HTML</a>
</li>
</ul>

...

検証

チェックポイント

  1. ページの先頭近くに、リンクを展開するリンクがある。

  2. 1で確認したリンクがリンクテキストだけで見つけられる。

  3. リンクテキストだけで識別できないリンクをページ中から探す。

  4. 1.のコントロールを有効にする

  5. 3.で見つけたリンクの目的が、リンクテキストだけで確認できる。

判定基準

注意: この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。

日本語訳における注記:

この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。