【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集
この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。
HTML 又は XHTML で使用されるスクリプト。
これは、次の達成基準に関連する達成方法である:
この達成方法の目的は、キーボードでアクセス可能なコントロールに加えることで、キーボードでアクセス可能になるスクリプトの関数を呼び出す方法について説明することである。スクリプトによる動きが確実にキーボードから呼び出されるように、それらの動きは「ネイティブに実行可能な」HTML 要素 (リンク及びボタン) に関連付けられている。これらの要素の onclick イベントは機器に依存していない。「onclick」という表現はマウスに関連付けられているようにも思えるが、onclick イベントは実際のところ、リンク又はボタンのデフォルトの動きにマッピングされている。デフォルトの動きは、利用者がマウスで要素をクリックしたときに発生するが、要素にフォーカスして Enter キーやスペースキーを押したとき及び、他のアクセシビリティ API によってトリガーされたときにも発生する。
この達成方法はクライアントサイドスクリプトに依存しているが、スクリプトが利用できない環境に対する、代替としての実装又は説明として意味がある。アンカー要素を使って JavaScript によるアクションを呼び出すとき、代替としての実装又は説明は href 属性によって提供される。ボタンを使用するときは、フォームの送信によって提供される。
スクリプトを実行するリンクで、スクリプトをサポートしていないブラウザに対して代替手段を持たないもの。この方法は、スクリプトがアクセシビリティ サポーテッドな技術に依存しているときのみに使用されるべきである。
このリンクからナビゲートしたくないのではあるが、これを実際のリンクにし、適切なイベントを得るために、a 要素上の href 属性を使わなければならない。この事例では、我々は「#」をリンクターゲットとして使用しているが、何を使用しても良い。このリンクからナビゲートされることはない。
doStuff() イベントハンドリング関数の最後にある「return false;」は、ブラウザにその URI へ移動しないよう指示している。それがなければ、ページはスクリプト実行後に再読み込みされることになる。
コード例:
<script>
function doStuff()
{
//do stuff
return false;
}
</script>
<a href="#" onclick="return doStuff();">do stuff</a> スクリプトを実行するリンクであるが、スクリプトが実行可能でなければ他のページに移動させるもの。この方法はスクリプトに依存しないサイトで、移動先がスクリプトと同じ機能を提供している場合にのみ使用される。この例は、href が実在するページである dostuff.htm に設定されていること以外は、事例 1と同じである。dostuff.htmでは、スクリプトと同じ機能を提供しなければならない。doStuff() イベントハンドリング関数の最後にある「return false;」が、ブラウザにその URI へ移動しないように指示している。そうでなければ、ブラウザはスクリプト実行後に dostuff.htm に移動してしまう。
コード例:
<script>
function doStuff()
{
//do stuff
return false;
}
</script>
<a href="dostuff.htm" onclick="return doStuff();">do stuff</a> このコードの実装サンプル: JavaScriptを用いてアクションリンクを作成
スクリプトを実行して、かつスクリプトを使わない利用者のためにフォーム送信を代替とするボタン。このアプローチは、スクリプトに依存しないサイトで、フォームの送信がスクリプトと同じ機能を提供できる場合にのみ使用できる。onsubmit="return false;" はフォームから送信されるのを防ぐ。
コード例:
<script>
function doStuff()
{
//do stuff
}
</script>
<form action="doStuff.aspx" onsubmit="return false;">
<input type="submit" value="Do Stuff" onclick="doStuff();" />
</form> このコードの実装サンプル: JavaScript を用いてアクションボタンを作成
スクリプトを実行するボタンで、input type="image" を用いて実装されているもの。input には、画像と等価のテキストを提供するために、タイトル属性を追加しなければならないことに注意する。この方法は、スクリプトに依存しているときのみに利用すべきである。
コード例:
<script>
function doStuff()
{
//do stuff
return false;
}
</script>
<input type="image" src="stuff.gif" title="Do stuff" onclick="return doStuff();" /> スクリプトを実行するボタンで、input type="submit"、input type="reset" 又は input type="button" のいずれかを用いて実装されているもの。この方法は、スクリプトに依存しているときのみに利用すべきである。
コード例:
<input type="submit" onclick="return doStuff();" value="Do Stuff" />スクリプトを実行するボタンで、button…/button を用いて実装されているもの。これは、ボタンの見た目をより詳細に調整したいときに有効である。この特定の例では、ボタンはアイコンとテキストの両方を含んでいる。この方法は、スクリプトに依存しているときのみに利用すべきである。
コード例:
<button onclick="return doStuff();">
<img src="stuff.gif" alt="stuff icon">
Do Stuff
</button>この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
訳注 1: HTML 4.01 は Superseded Recommendation としてマークされ、廃止された仕様である。上記はそれぞれ、HTML 5.2§4.12. Scripting、HTML 5.2§4.10. Forms、HTML 5.2§4.8. Linksを代わりに参照できる。
訳注 2: DOM 仕様は現在、WHATWG で策定されている。DOM Standard も参照のこと。
a、button、又は input 要素と関連付けられたすべてのスクリプトのアクションについて:
スクリプトをサポートするユーザエージェントで:
マウスを用い、コントロールをクリックする。
スクリプトのアクションが適切に実行されることを確認する。
コントロールがアンカー要素である場合、アンカー要素の href 属性の URI が呼び出されないことを確認する。
キーボードでコントロールに移動して、フォーカスを与えることが可能であることを確認する。
キーボードのフォーカスをコントロールに設定する。
Enter キーを押すことで、スクリプトのアクションを呼び出すことを確認する。
コントロールがアンカー要素である場合、アンカー要素の href 属性の URI が呼び出されないことを確認する。
スクリプトをサポートしていないユーザエージェントで:
マウスでコントロールをクリックする。
コントロールがアンカー要素である場合、アンカー要素の href 属性の URI が呼び出されることを確認する。
キーボードでコントロールに移動して、フォーカスを与えることが可能であることを確認する。
キーボードのフォーカスをコントロールに設定する。
コントロールがアンカー要素である場合、Enter キーを押すことでアンカー要素の href 属性の URI が呼び出されることを確認する。
上記の手順全ての結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。