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

達成方法に関する重要な情報

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

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

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

解説

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

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

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

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

事例

例 1

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

...
<script type="text/javascript">
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();">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>

...

このコードの動作例: 要求に応じてリンクを展開する

検証

手順

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

期待される結果

  • #1、#2 及び #5 の結果が真である。