Skip to content

テクニック SCR29:静的な HTML 要素にキーボードアクセシブルなアクションを追加する

このテクニックについて

このテクニックは 2.1.1: キーボード (参考テクニック) に関連する。

このテクニックは、HTML 及びスクリプトに適用される。

解説

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

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

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

注記

そのようなユーザインタフェース コントロールは達成基準 4.1.2 を満たさなければならない。ユーザインタフェース コントロールの役割、名前及び状態についての情報がないままこのテクニックを適用する場合、F59 (達成基準 4.1.2 の失敗例 － コントロールに役割 (role) を提供せずに、HTML の div 要素又は span 要素をユーザインタフェースコントロールにするために、スクリプトを用いている) に該当することになる。

事例

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

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

<script>
// this is the function to perform the action. This simple example toggles a message.
function doSomething(event) {
  var msg=document.getElementById("message");
  msg.style.display = msg.style.display=="none" ? "" : "none";

  //return false from the function to make certain
  // that the href of the link does not get invoked
  return false;
  }
	
  // this is the function to perform the action when the Enter key has been pressed.  
  function doSomethingOnEnter(event) {
    var key = 0;

     // Determine the key pressed, depending on whether window.event
    // or the event object is in use
    if (window.event) {
      key = window.event.keyCode;
    }
    else if (event) {
      key = event.keyCode;
    }
		
    // Was the Enter or Space key pressed?
    if (key == 13 || key == 32) {
      return doSomething(event);
    } 

    // The event has not been handled, so return true
    return true;
  }
	
  // This setUpActions() function must be called to set the onclick and onkeyup
  // event handlers onto the existing div element.
  // This function must be called after the div element with id="active" 
  // has been loaded into the DOM.
  // In this example the setUpActions() function is called from the onload event
  // for the body element.
  function setUpActions() {
   
    // get the div object
    var active=document.getElementById("active");

    // assign the onclick handler to the object.
    active.onclick=doSomething;

    // assign the onkeyup handler to the object.
    active.onkeyup=doSomethingOnEnter;
}
</script>
 
<body onload="setUpActions();">
  <p>Here is the link to modify with a javascript action:</p>
  <div>
    <span id="active" role="button" tabindex="0">Do Something</span>
  </div>
  <div aria-live="polite">
    <div id="message">Hello, world!</div>
  </div>
</body>

このコードの動作例: Creating Divs with Actions using JavaScript

関連リソース

推奨を意味するものではない。

検証

手順

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

  1. マウスを用い、コントロールをクリックする。
  2. スクリプトのアクションが適切に実行されることをチェックする。
  3. キーボードでコントロールに移動して、フォーカスを与えることが可能であることをチェックする。
  4. キーボードのフォーカスをコントロールに設定する。
  5. Enter キー又はスペースキーを押すことで、スクリプトのアクションを呼び出すことをチェックする。

期待される結果

  • 全てのチェックが真である。
Back to Top