SCR22: 点滅を制御し、5 秒以内に停止させるために、スクリプトを使用する

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

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

解説

この達成方法の目的は、スクリプトによる点滅を、5 秒未満で停止する設定にできるよう制御することである。スクリプトを用いて、コンテンツの点滅効果を開始し、表示と非表示の状態切り替えを制御し、そして 5 秒以下で停止させる。setTimeout() 関数を用いて、点滅するコンテンツの表示と非表示の状態を切り替え、点滅の回数と所要時間の積が 5 秒近くになった時に停止させる。

事例

事例 1

この例では、JavaScript を用いて HTML 及び XHTML コンテンツの点滅を制御する。JavaScript は、コンテンツの表示状態を制御して点滅効果を生みだす。効果の開始を制御し、5 秒以内に停止させる。

コード例:

...
<div id="blink1" class="highlight">New item!</div>
<script type="text/javascript">
<!--
// 点滅「on」状態
function show()
{
	if (document.getElementById)
	document.getElementById("blink1").style.visibility = "visible";
}
// 点滅「off」状態
function hide()
{
	if (document.getElementById)
	document.getElementById("blink1").style.visibility = "hidden";
}
// 点滅効果を出すために「on」と「off」の状態を450ミリ秒ごとに切り替え
// 4500ミリ秒後に終了 (5秒未満)
for(var i=900; i < 4500; i=i+900)
{
	setTimeout("hide()",i);
	setTimeout("show()",i+450);
}
-->
</script>
...

このコードの実装サンプル: 点滅をコントロールするために、スクリプトを使用する

検証

手順

点滅しているコンテンツのそれぞれの箇所に対して:

点滅効果が開始される時、5 秒間のタイマーを開始させる。
タイマーが切れるとき、点滅が停止している。

期待される結果

点滅しているコンテンツのそれぞれの箇所に対して、2. の結果が真である。

この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。