WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

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

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

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

適用(対象)

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

これは、次の達成基準に関連する失敗例である:

解説

この失敗は、JavaScript のイベントハンドラが、リンクをエミュレートするために要素に付加されている場合に発生する。この方法で作成されたリンクは、キーボードでタブ移動することができず、他のコントロール及び/又はリンクのようにキーボードでフォーカスを受け取れない。スクリプトのイベントがリンクをエミュレートするために使用される場合、支援技術を含むユーザエージェントは、コンテンツ内のリンクをリンクとして識別できないかもしれない。インタラクティブなコントロールとして認識されてもリンクとして認識されないかもしれない。そのような要素は、ユーザエージェントや支援技術によって生成されたリンクリストには現れない。

支援技術がリンクコントロールとして不明な要素を識別するために、ARIA role 属性を使用することは可能である。しかし、ARIA の最善の対応策としては、可能な限りネイティブな要素を使用することが求められ、不明な要素をリンクとして識別するために role 属性を使用することは推奨しない。

aarea 要素は、リンクをマークアップするためのものである。

事例

失敗例 1: span 要素のスクリプト

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

コード例:


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

失敗例 2: img 要素のスクリプト

スクリプトによるイベントハンドリングが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" &amp;&amp;
       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 &amp;&amp; objEvent.type == 'keypress')
	{
		if (objEvent.keyCode)
			iKeyCode = objEvent.keyCode;
		else if (objEvent.which)
			iKeyCode = objEvent.which;

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

	window.location.href = strLocation;
}

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

コード例:


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

参考リソース

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

検証

チェックポイント

要素がリンクをエミュレートするために JavaScript のイベントハンドラを使用したリンクとして提示されるすべての要素について:

  1. プログラムによって解釈された要素のロールがリンクかどうかを確認する。

  2. エミュレートされたリンクについて、キーボード操作で有効にできるかどうかを確認する。

判定基準