WCAG 2.0 実装方法集

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

-

F42: 達成基準 1.3.1 及び 達成基準 2.1.1 の不適合事例 - スクリプトのイベントを用いて、プログラムで解釈できない方法で、リンクをエミュレートしている

適用(対象)

スクリプトを含むHTML及びXHTML。

これは、次の達成基準に関連する不適合事例である:

解説

この不適合は、JavaScriptのイベント・ハンドラが要素と関連づけられて「リンクをエミュレート」するときに起こる。この方法で作成されたコントロール又はリンクは、キーボードのタブで行き来できず、他のコントロールやリンクのようにキーボードでフォーカスできない。スクリプトのイベントがリンクをエミュレートするように使用されていた場合、支援技術を含むユーザーエージェントはコンテンツ内のリンクをリンクとして認識できない可能性がある。支援技術にはインタラクティブなコントロールとして認識されないか、インタラクティブなコントロールとして認識されたとしても、リンクだとは認識されない可能性がある。そのような要素はユーザーエージェントや支援技術によって生成されたリンクリストには表れない。

<a href>及び<area>要素はリンクをマークアップするように意図されたものである。要素はリンクをマークアップすることを意図したものである。

例えばspan及びdivといった、通常インタラクティブではない要素にイベント・ハンドラを結びつけることは、多くの利用者を混乱させる。たとえそれらの要素へのキーボードアクセスが提供されていたとしても、利用者はコンテンツ内からインタラクティブなコントロールがあることを探し出すのが困難であるか、又はどのようなふるまいが期待されるのかを理解しづらい。例えば、利用者はその要素を有効にするために、どのキー操作がスクリプトでサポートされているかを知らないかもしれない。そのうえ、これらの要素はオペレーティングシステム共通のインタラクティブなイベントを生成しないので、利用者がそれらを有効にした場合に支援技術には伝わらない可能性がある。

事例

不適合事例 1: <span>要素のスクリプト

スクリプトによるイベントハンドリングがspan要素に追加されているので、それがマウスでクリックされた場合はリンクとして機能する。支援技術はこの要素をリンクとして認識しない。

コード例:


<span onclick="this.location.href='newpage.html'">
    偽のリンク
</span>

不適合事例 2: <img> 要素のスクリプト

スクリプトによるイベントハンドリングがimg要素に追加されているので、それがマウスでクリックされた場合はリンクとして機能する。支援技術はこの要素をリンクとして認識しない。

コード例:


   src="go.gif" 
   alt="新しいページへ移動" 
   onclick="this.location.href='newpage.html'"

不適合事例 3: <img> 要素のスクリプトにキーボードサポートのあるもの

スクリプトによるイベントハンドリングがimg要素に追加されているので、リンクとして機能する。この例では、リンク機能がマウス又はユーザーエージェントが要素をタブ移動可能な範囲に含まれる場合にはEnterキーで機能する。それでもなお、この要素はリンクとしては認識されない。

コード例:


function doNav(url)
{
   window.location.href = url;
}

function doKeyPress(url)
{
   //Enterキーが押された場合
   if (window.event.type == "keypress" &&
       window.event.keyCode == 13)
   {
      doNav(url);
   }
}

画像のためのマークアップ:

コード例:


<p>
	<img src="bargain.jpg"
		tabindex="0" 
		alt="バーゲンを見る"
		onclick="doNav('viewbargains.html');"
		onkeypress="doKeyPress('viewbargains.html');"
	>
</p>

不適合事例 4: <div>要素のスクリプト

この例では、div要素がリンクとして機能するようにスクリプトを使用している。制作者は、完璧なキーボードアクセスを提供し、コンテンツの再利用を可能にするためイベント・ハンドラをマークアップから切り離しているが、このdiv要素は支援技術にリンクとして認識されない。

コード例:


window.onload = init;

function init()
{
	var objAnchor = document.getElementById('linklike');

	objAnchor.onclick = function(event){return changeLocation(event,
'surveyresults.html');};
	objAnchor.onkeypress = function(event){return changeLocation(event,
'surveyresults.html');};
}

function changeLocation(objEvent, strLocation)
{
	var iKeyCode;

	if (objEvent && objEvent.type == 'keypress')
	{
		if (objEvent.keyCode)
			iKeyCode = objEvent.keyCode;
		else if (objEvent.which)
			iKeyCode = objEvent.which;

		if (iKeyCode != 13 && iKeyCode != 32)
			return true;
	}

	window.location.href = strLocation;
}

div要素のためのマークアップ:

コード例:


<div id="linklike">
アンケートの結果を見る。
</div>

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

チェックポイント

  1. リンクをエミュレートしている要素に関連付けられたJavaScriptのイベント・ハンドラがあるかどうかを確認する。

  2. その要素のプログラムで解釈可能なロールがリンクであるかを確認する。

判定基準

日本語訳における注記:

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