Skip to content

テクニック SCR30:リンクテキストを変更するために、スクリプトを使用する

このテクニックについて

このテクニックは、次に関連する:

このテクニックは、HTML と併用されるクライアントサイドスクリプトに適用される。

解説

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

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

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

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

事例

事例 1

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

...
<script>
  var expanded = false;
  var linkContext = {
    "hist":" version of The History of the Web",
    "cook":" version of Cooking for Nerds"
  };
	
  function doExpand() {
    var links = document.links;
		
    for (var i=0; i<links.length; i++) {
      var link = links[i];
      var cn = link.className;
      if (linkContext[cn]) {
        span = link.appendChild(document.createElement("span"));
        span.setAttribute("class", "linkexpansion");
        span.appendChild(document.createTextNode(linkContext[cn]));
      }
    }
    objUpdate = document.getElementById('expand');
    if (objUpdate) {
      objUpdate.childNodes[0].nodeValue = "Collapse links";
    }
    expanded = true;
  }
	
  function doCollapse() {
    objUpdate = document.getElementById('expand');
    var spans = document.getElementsByTagName("span");
    var span;
	
    // go backwards through the set as removing from the front changes indices
    // and messes up the process
    for (i = spans.length - 1; i >= 0; i--) {
      span = spans[i];
      if (span.getAttribute("class") == "linkexpansion")
        span.parentNode.removeChild(span);
      }
      if (objUpdate) {
      objUpdate.childNodes[0].nodeValue = "Expand links";
    }
    expanded = false;
  }
	
  function toggle() {
    if (expanded) doCollapse();
    else doExpand();
  }
</script>

...
	
<h1>Books for download</h1>
<p><button id="expand" onclick="toggle(); type="button">Expand Links</button></p>
<ul>
  <li>The History of the 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>

...

このコードの動作例: Providing link expansions on demand

検証

手順

  1. ページの先頭近くに、リンクを展開するリンクがあることをチェックする
  2. 手順 1. で特定したリンクがリンクテキストだけで特定できることをチェックする
  3. リンクテキストだけで特定できないリンクをページ中から探す
  4. 手順 1. で特定したコントロールを有効にする
  5. 手順 3. で特定したリンクの目的が、リンクテキストだけで特定できることをチェックする

期待される結果

  • チェック 1、2 及び 5 が真である。
Back to Top