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>
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
a、button、又はinput要素と関連付けられたすべてのスクリプトのアクション：
スクリプトをサポートするユーザーエージェントで：
マウスを用い、コントロールをクリックする。
スクリプトのアクションが正しく実行される。
もしコントロールがアンカー要素なら、アンカー要素のhref属性のURIが呼び出されない。
キーボードでコントロールに移動したり、フォーカスを与えたりできる。
キーボードのフォーカスをコントロールにセットする。
Enterキーを押すことで、スクリプトのアクションを呼び出すことができる。
もしコントロールがアンカー要素なら、アンカー要素のhref属性のURIが呼び出されない。
スクリプトをサポートしていないユーザーエージェントで：
マウスでコントロールをクリックする。
もしコントロールがアンカー要素なら、アンカー要素のhref属性のURIが呼び出される。
キーボードでコントロールに移動したり、フォーカスを与えたりできる。
キーボードのフォーカスをコントロールにセットする。
もしコントロールがアンカー要素なら、Enterキーを押すことでアンカー要素のhref属性のURIが呼び出される。
上記のチェックポイント全てを満たしている。
注意： この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。
日本語訳における注記：
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。