WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

SCR29: 静的なHTML要素にキーボード操作可能なアクションを追加する

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

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

適用(対象)

HTML 及び XHTML、スクリプト

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

ユーザエージェント及び支援技術によるサポート

SCR29 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、 divspan などの静的な HTML 要素により実行されるユーザインターフェース コントロールにキーボードアクセスを提供する方法を示すことである。この達成方法は tabindex 属性を設定することで要素をフォーカス可能にし、onclick ハンドラに加えて onkeyup 又は onkeypress ハンドラを提供することでキーボードから動作を実行することができるようにするものである。

tabindex 属性の値が 0 の際、要素はキーボードでフォーカス可能であり、文書のタブ順序に含まれる。tabindex 属性の値が -1 の際、要素はタブ移動できないが、element.focus() を使用することによりフォーカスをプログラムで制御できる。

静的な HTML 要素にはそれらに関連した動作がないため、スクリプトが利用できない環境に対する、代替としての実装又は説明を提供することはできない。この達成方法はクライアントサイド スクリプティングが利用できる環境でのみ使用されるべきである。

注記: そのようなユーザインターフェース コントロールは SC 4.1.2 を達成しなければならない。ユーザインターフェース コントロールの役割、名前及び状態についての情報がないままこの達成基準を適用する場合、失敗例 F59 に該当し、スクリプトを用いて、HTML の div 要素又は span 要素をユーザインタフェースのコントロールにしたことによる達成基準 4.1.2 の失敗例となる。

事例

事例 1: div要素にJavaScriptによるアクションを追加する

ページにある div 要素には一意の id a属性及び値が 0 の tabindex 属性が付与されている。スクリプトはドキュメントオブジェクトモデル(DOM)を利用し、idによって div 要素を見つけ onclick ハンドラ及び onkeyup ハンドラを追加する。onkeyup ハンドラはエンターキーが押下された際、アクションを実行する。div 要素を見つけて変更するには、div 要素が DOM の中に読み込まれた状態でなければならないことに注意する。これは、通常、body要素の onload イベントでスクリプトを呼び出すことで達成される。イベントハンドラを追加するスクリプトはユーザエージェントがJavaScriptをサポートし、かつ有効にしている場合にのみ実行される。

コード例:


...
<script type="text/javascript">
 // これはアクションを実行する関数である。このシンプルな例はメッセージを開閉する。
 function doSomething(event) {
   var msg=document.getElementById("message");
   msg.style.display = msg.style.display=="none" ? "" : "none";
   // リンクのhref属性が実行されないよう、関数からfalseを返す
   return false;
 }
 // これはエンターキーが押された際にアクションが実行される関数である。
 function doSomethingOnEnter(event) {
   var key = 0;
   // window.event 又はイベントオブジェクトが使用されているかに応じて押されたキーを判定する。
   if (window.event) {
     key = window.event.keyCode;
   } else if (event) {
     key = event.keyCode;
   }
   // エンターキーが押されたか?
   if (key == 13) {
     return doSomething(event);
   } 
   // イベントが処理されなかったため、trueを返す
   return true;
 }
 // このsetUpActions()関数は存在するdiv要素にonclick及びonkeyupイベントハンドラを設定するために呼び出されなければならない。
 // この関数はid="active"の付与されたdiv要素がDOMに読み込まれた後に呼び出されなければならない。
 // この例では、setUpActions()関数はbody要素のonloadイベントから呼び出されている。
 function setUpActions() {
   // divオブジェクトを取得する
   var active=document.getElementById("active");
   // onclickハンドラをオブジェクトに割り当てる
   // 関数が返された後、href属性を止めるため、onclickハンドラからfalseを返すことが重要である
   active.onclick=doSomething;
   // onkeyupハンドラをオブジェクトに割り当てる
   active.onkeyup=doSomethingOnEnter;
 }
 </script>

 <body onload="setUpActions();">
 <p>javascriptの動作を用いて変更をもたらすリンク:</p>
 <div>
  <span id="active" tabindex="0">何かをする</span>
 </div>
 <div id="message">こんにちは世界</div>
...

このコードの実装例: JavaScriptによる制御を用いてdiv要素を作成する

参考リソース

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

検証

チェックポイント

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

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

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

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

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

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

判定基準

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。