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

適用 (対象)

スクリプトをサポートしている HTML 及び XHTML

これは達成基準 2.1.1: キーボード (G90: キーボードがトリガーとなるイベントハンドラを提供するの達成方法として十分) に関する達成方法である。

解説

この達成方法の目的は、マウスやフォーカスのイベントによって装飾画像が変化する、機器に依存しないイベントの使い方を説明することである。onmouseover や onmouseout イベントを使って、マウスがページ中のある要素に重なるか、又は離れたときに装飾画像が変化するようにする。また、onfocus や 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 属性値は空であることに注意する。

注記

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

事例

例 1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "https://www.w3.org/TR/html4/loose.dtd">
 <html lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 <title>Changing Image Source in a Device Independent Manner</title>
 <script type="text/javascript">
 /* 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) { //could use a try/catch block for user agents supporting at least JavaScript 1.4
                           // These browsers support try/catch - NetScape 6, IE 5, Mozilla, Firefox
      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 src="greyplus.gif" border="0" alt="" id="wai">
   W3C Web Accessibility Initiative</a> &
 <a href="https://www.w3.org/International/" onmouseover="updateImage('i18n', true);" 
   onfocus="updateImage('i18n',true);" onmouseout="updateImage('i18n',false);"
   onblur="updateImage('i18n',false);">
   <img src="greyplus.gif" border="0" alt="" id="i18n">
   W3C Internationalization</a>
 </body>
 </html>

検証

手順

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

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

期待される結果

上記の全ての結果が真である。

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

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

適用 (対象)

解説

事例

例 1

検証

手順

期待される結果