WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

SCR35: アンカー及びボタンの onclick イベントを用いて、アクションをキーボード操作可能にする

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

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

適用 (対象)

HTML 又は XHTML で使用されるスクリプト。

これは、次の達成基準に関連する達成方法である:

解説

この達成方法の目的は、キーボードでアクセス可能なコントロールに加えることで、キーボードでアクセス可能になるスクリプトの関数を呼び出す方法について説明することである。スクリプトによる動きが確実にキーボードから呼び出されるように、それらの動きは「ネイティブに実行可能な」HTML 要素 (リンク及びボタン) に関連付けられている。これらの要素の onclick イベントは機器に依存していない。「onclick」という表現はマウスに関連付けられているようにも思えるが、onclick イベントは実際のところ、リンク又はボタンのデフォルトの動きにマッピングされている。デフォルトの動きは、利用者がマウスで要素をクリックしたときに発生するが、要素にフォーカスして Enter キーやスペースキーを押したとき及び、他のアクセシビリティ API によってトリガーされたときにも発生する。

この達成方法はクライアントサイドスクリプトに依存しているが、スクリプトが利用できない環境に対する、代替としての実装又は説明として意味がある。アンカー要素を使って JavaScript によるアクションを呼び出すとき、代替としての実装又は説明は href 属性によって提供される。ボタンを使用するときは、フォームの送信によって提供される。

事例

事例 1

スクリプトを実行するリンクで、スクリプトをサポートしていないブラウザに対して代替手段を持たないもの。この方法は、スクリプトがアクセシビリティ サポーテッドな技術に依存しているときのみに使用されるべきである。

このリンクからナビゲートしたくないのではあるが、これを実際のリンクにし、適切なイベントを得るために、a 要素上の href 属性を使わなければならない。この事例では、我々は「#」をリンクターゲットとして使用しているが、何を使用しても良い。このリンクからナビゲートされることはない。

doStuff() イベントハンドリング関数の最後にある「return false;」は、ブラウザにその URI へ移動しないよう指示している。それがなければ、ページはスクリプト実行後に再読み込みされることになる。

コード例:


<script> 
function doStuff()
 {
  //do stuff
    return false;
  }
</script>
<a href="#" onclick="return doStuff();">do stuff</a> 

事例 2

スクリプトを実行するリンクであるが、スクリプトが実行可能でなければ他のページに移動させるもの。この方法はスクリプトに依存しないサイトで、移動先がスクリプトと同じ機能を提供している場合にのみ使用される。この例は、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を用いてアクションリンクを作成

事例 3

スクリプトを実行して、かつスクリプトを使わない利用者のためにフォーム送信を代替とするボタン。このアプローチは、スクリプトに依存しないサイトで、フォームの送信がスクリプトと同じ機能を提供できる場合にのみ使用できる。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 を用いてアクションボタンを作成

事例 4

スクリプトを実行するボタンで、input type="image" を用いて実装されているもの。input には、画像と等価のテキストを提供するために、タイトル属性を追加しなければならないことに注意する。この方法は、スクリプトに依存しているときのみに利用すべきである。

コード例:


<script>
  function doStuff()
  {
     //do stuff
   return false;
  }
</script>
<input type="image" src="stuff.gif" title="Do stuff" onclick="return doStuff();" /> 

事例 5

スクリプトを実行するボタンで、input type="submit"input type="reset" 又は input type="button" のいずれかを用いて実装されているもの。この方法は、スクリプトに依存しているときのみに利用すべきである。

コード例:


<input type="submit" onclick="return doStuff();" value="Do Stuff" />

事例 6

スクリプトを実行するボタンで、button/button を用いて実装されているもの。これは、ボタンの見た目をより詳細に調整したいときに有効である。この特定の例では、ボタンはアイコンとテキストの両方を含んでいる。この方法は、スクリプトに依存しているときのみに利用すべきである。

コード例:


<button onclick="return doStuff();">
 <img src="stuff.gif" alt="stuff icon">
 Do Stuff
</button>

参考リソース

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

検証

手順

abutton、又は input 要素と関連付けられたすべてのスクリプトのアクション:

  1. スクリプトをサポートするユーザエージェントで:

    • マウスを用い、コントロールをクリックする。

    • スクリプトのアクションが正しく実行される。

    • もしコントロールがアンカー要素なら、アンカー要素の href 属性の URI が呼び出されない。

    • キーボードでコントロールに移動したり、フォーカスを与えたりできる。

    • キーボードのフォーカスをコントロールにセットする。

    • Enter キーを押すことで、スクリプトのアクションを呼び出すことができる。

    • もしコントロールがアンカー要素なら、アンカー要素の href 属性の URI が呼び出されない。

  2. スクリプトをサポートしていないユーザエージェントで:

    • マウスでコントロールをクリックする。

    • もしコントロールがアンカー要素なら、アンカー要素の href 属性の URI が呼び出される。

    • キーボードでコントロールに移動したり、フォーカスを与えたりできる。

    • キーボードのフォーカスをコントロールにセットする。

    • もしコントロールがアンカー要素なら、Enter キーを押すことでアンカー要素の href 属性の URI が呼び出される。

期待される結果

この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。