WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

SCR30: リンクのラベルを変更するために、スクリプトを使用する

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

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

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

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

解説

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

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

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

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

事例

事例 1

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

コード例:

...
<script type="text/javascript">
var expanded = false;
var linkContext = {
	"hist":" 版 Webの歴史",
	"cook":" 版 Cooking for Nerds"
};

function doExpand() {
	var links = document.links;
	
	for (link of links) {
		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 = "リンクをたたむ";
	}
	expanded = true;
}

function doCollapse() {
	objUpdate = document.getElementById('expand');
	var spans = document.getElementsByTagName("span");
	var span;

	// リンク一式を戻り、文頭から削除することで配列の添え数を変更する
	// そして処理を乱す
	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 = "リンクを展開する";
	}
	expanded = false;
}

function toggle() {
	if (expanded) doCollapse();
	else doExpand();
}
</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. で見つけたリンクの目的が、リンクテキストだけで確認できる。

判定基準

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