Skip to content

テクニック SCR2:キーボード及びマウスのイベントハンドラを両方とも使用する

このテクニックについて

このテクニックは 2.1.1: キーボード (G90: Providing keyboard-triggered event handlers と併用する場合に十分なテクニック) に関連する。

このテクニックは、スクリプトをサポートしている HTML に適用される。

解説

このテクニックの目的は、マウスやフォーカスのイベントによって装飾画像が変化する、機器に依存しないイベントの使い方を説明することである。onmouseover や onmouseout イベントを使って、マウスがページ中のある要素に重なるか、又は離れたときに装飾画像が変化するようにする。また、onfocus や code class="language-javascript">onblur イベントを使って、要素がフォーカスされたか、フォーカスを失ったかによって画像を変更する。

下記の例では、アンカー要素の前に装飾画像がある。利用者がアンカータグにマウスオーバーすると、アンカータグの前の装飾画像が変化する。また、マウスがアンカーを離れると、画像は元に戻る。同じ画像の変化は、利用者がキーボードを使ってアンカー要素にフォーカスしたときにも起こる。フォーカスされたときに画像が変化し、フォーカスを失ったときには元の画像に戻る。これは、アンカー要素に onmouseover、onmouseout、onfocus 及び onblur イベントハンドラを付加することで実現できる。このイベントハンドラは JavaScript の関数で updateImage() と呼ばれており、画像の src 属性を変更する。updateImage() は onmouseover、onmouseout、onfocus、及び onblur イベントの応答として呼ばれる。

それぞれの画像には固有の id が与えられている。この id はどちらの画像が使われるかを表す論理値とともに、updateImage() に渡される: updateImage(imgId, isOver);。論理値 true は、マウスがアンカー要素に乗った場合、又はそれがフォーカスされた場合に渡される。false は、マウスがアンカー要素から離れた場合、又はそれがフォーカスを失った場合に渡される。updateImage() 関数は、画像の id を使用して画像を読み込み、その後に論理値の状態に応じて src 属性を変更する。画像は装飾目的で使用されているので、alt 属性値は空であることに注意する。

注記

サイズの近い画像を使用し、画像要素では幅と高さの属性値を指定することが望ましい。これは、画像が更新されることによりページのレイアウトが変化してしまうことを防ぐ。例では、同一サイズの画像が使用されている。

事例

事例 1

<!doctype html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Changing Image Source in a Device Independent Manner</title>
    <script>
       /* This function will change the image src of an image element.
        * param imgId - the id of the image object to change
        * param isOver - true when mouse is over or object has focus,
         false when mouse move out or focus is lost
       */
       function updateImage(imgId, isOver) {
       var theImage = document.getElementById(imgId);
       if (theImage != null) {
         if (isOver) {
           theImage.setAttribute("src","yellowplus.gif");
         }
         else {
           theImage.setAttribute("src","greyplus.gif");
         }
       }
     }
    </script>
  </head>
  <body>
    <p>Mouse over or tab to the links below and see the image change.</p>
    <a href="https://www.w3.org/WAI/"
       onmouseover="updateImage('wai', true);" onfocus="updateImage('wai', true);"
       onmouseout="updateImage('wai',false);" onblur="updateImage('wai',false);">
       <img alt="" id="wai" src="greyplus.gif">
       W3C Web Accessibility Initiative</a> &amp;
    <a href="https://www.w3.org/International/" onmouseover="updateImage('i18n', true);" 
       onfocus="updateImage('i18n',true);" onmouseout="updateImage('i18n',false);"
       onblur="updateImage('i18n',false);">
       <img alt="" id="i18n" src="greyplus.gif">
       W3C Internationalization</a>
  </body>
</html>

検証

手順

ウェブページを読み込み、マウス及びキーボードを用いてイベントを検証する。

  1. ウェブページが読み込まれたとき、「通常の」画像が期待通りに表示されていることをチェックする。

  2. マウスを使用:

    1. イベントハンドラを含む要素の上にマウスを移動する (この事例ではアンカー要素)。画像が期待されている画像に変化することをチェックする。
    2. マウスを要素から外す。画像が「通常の」画像に戻ることをチェックする。

  3. キーボードを使用:

    1. キーボードを使ってイベントハンドラを含む要素にフォーカスを設定する。画像が期待されている画像に変化することをチェックする。
    2. キーボードを使って要素からフォーカスを外す (一般的には別の要素にフォーカスを移す)。画像が「通常の」画像に戻ることをチェックする。
  4. 画像が変更されたときに、ページ上の他の要素のレイアウトに影響がないことを確認する。

期待される結果

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