【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集
この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。
スクリプトを含む HTML 及び XHTML。
これは、次の達成基準に関連する失敗例である:
この失敗は、JavaScript のイベントハンドラが、リンクをエミュレートするために要素に付加されている場合に発生する。この方法で作成されたリンクは、キーボードでタブ移動することができず、他のコントロール及び／又はリンクのようにキーボードでフォーカスを受け取れない。スクリプトのイベントがリンクをエミュレートするために使用される場合、支援技術を含むユーザエージェントは、コンテンツ内のリンクをリンクとして識別できないかもしれない。インタラクティブなコントロールとして認識されてもリンクとして認識されないかもしれない。そのような要素は、ユーザエージェントや支援技術によって生成されたリンクリストには現れない。
role 属性を使用することは可能である。しかし、ARIA の最善の対応策としては、可能な限りネイティブな要素を使用することが求められ、不明な要素をリンクとして識別するために role 属性を使用することは推奨しない。a と area 要素は、リンクをマークアップするためのものである。
スクリプトによるイベントハンドリングが span 要素に追加されているので、それがマウスでクリックされた場合はリンクとして機能する。支援技術はこの要素をリンクとして認識しない。
コード例:
<span onclick="location.href='newpage.html'">
Fake link
</span>
スクリプトによるイベントハンドリングが img 要素に追加されているので、それがマウスでクリックされた場合はリンクとして機能する。支援技術はこの要素をリンクとして認識しない。
コード例:
<img src="go.gif"
alt="go to the new page"
onclick="location.href='newpage.html'">
スクリプトによるイベントハンドリングが 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="View Bargains"
onclick="doNav('viewbargains.html');"
onkeypress="doKeyPress('viewbargains.html');"
>
</p>この例では、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">
View the results of the survey.
</div>この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
要素がリンクをエミュレートするために JavaScript のイベントハンドラを使用したリンクとして提示されるすべての要素について:
プログラムによる解釈のされた要素の役割 (role) が link かどうかを確認する。
エミュレートされたリンクが、キーボード操作で有効にできるかどうかを確認する。
1. の結果が偽である場合、この失敗条件が適用され、コンテンツは達成基準 1.3.1 及び 4.1.2 の失敗となる。2. の結果が偽である場合、この失敗条件が適用され、コンテンツは達成基準 2.1.1 及び 2.1.3 の失敗となる。