<html xmlns:jis="http://www.macromedia.com/jp/JISX83413_rules" xmlns:saxon="http://icl.com/saxon" lang="ja">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   
      <link rel="stylesheet" href="josh.css">
      <title>［5.3a］ マウスだけでしか使えないイベントハンドラが使用されています</title>
   </head>
   <body bgcolor="#ffffff">
      <div id="説明">
         <table cellpadding="0" cellspacing="0" border="0" class="main">
            <tr>
               <td valign="top" class="name" style="background-color:#dcdcdc;padding:3px;">マウスだけでしか使えないイベントハンドラが使用されています</td>
            </tr>
            <tr>
               <td colspan="2" class="divider"><img src="dwres:18084" height="1"></td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="requirements" style="text-align:right;">
                      JIS 5.3 a);
                      WCAG 6.4;
                      
               </td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="description"><b>概要</b>
                  
                  <p>Webページに、対応するキーボードのイベントハンドラのないマウスのイベントハンドラがあります。</p>
                  
                  <p>特に:</p>
                  
                  <ul>
                     
                     <li><strong>ondblclick</strong>は、対応するキーボードのイベントハンドラがないので、使うべきではない。
                     </li>
                     
                     <li><strong>onmousedown</strong>を使用する際は、<strong>onkeydown</strong>を併用する。
                     </li>
                     
                     <li><strong>onmouseup</strong>を使用する際は、<strong>onkeyup</strong>を併用する。
                     </li>
                     
                     <li><strong>onclick</strong>を使用する際は、<strong>onkeypress</strong>を併用する。
                     </li>
                     
                     <li>リンクおよびフォームのコントロールの<strong>onmouseover</strong>は、<strong>onfocus</strong>を併用する（ロールオーバーに用いられる）。フォームのテキストフィールドでは、<strong>onclick</strong>を<strong>onfocus</strong>に<strong>置換</strong>すべきで、onfocusを用いれば、ユーザーがテキストフィールドをマウスでクリックしてもTabキーで移動してきても、どちらの場合でもテキストフィールドにフォーカスをあてられる。
                     </li>
                     
                     <li><strong>onmouseout</strong>を使用する際は、<strong>onblur</strong>を併用する。
                     </li>
                     
                  </ul>
                  
               </td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="description"><b>修正/チェック方法</b>
                  
                  <p>Webページにあるすべてのイベントハンドラをチェックしてください。チェックすべきなのは、（テキスト、イメージ、レイヤー、あるいはその他のオブジェクトを追加または削除して、）Webページのコンテンツを変化させる、あるいはナビゲーション（メニュー、新しいウィンドウ、ナビゲーション・バー、リンク）の選択肢を変化させるイベントハンドラのみです。</p>
                  
                  <p>もし、そういったイベントにデバイス依存のイベントハンドラ（すなわち、onDblClick, onClick, onKeyPress, onKeydown, onMousedown, onKeyup, onMouseup, onMouseover,
                     onMouseout, onFocus, onBlur）が用いられている場合は、それに対応する他のデバイスのイベントハンドラと併用するようにしてください。
                  </p>
                  
                  <p>特に:</p>
                  
                  <ul>
                     
                     <li>リンクとフォームのコントロールでは、onClickとonKeyPressを併用する。どちらかないイベントハンドラを追加する際には、既にあるイベントハンドラと同じスクリプトをそのまま使えばよい。</li>
                     
                     <li>フォームのテキストフィールドでは、onClickをonFocusに置き換える</li>
                     
                     <li>対応するキーボードのイベントハンドラがないのでonDblClickは使用してはならない</li>
                     
                     <li>onKeydownとonMousedownを常に併用する</li>
                     
                     <li>onKeyupとonMouseupを常に併用する</li>
                     
                     <li>onMoueseoverとonFocusを常に併用する</li>
                     
                     <li>onMouseoutとonBlurを常に併用する</li>
                     
                  </ul>
                  
               </td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="description"><b>修正/チェックのポイント</b>
                  
                  <blockquote style="margin:0px 10px 0px 20px;">
                     
                     <p>入力装置は多くの種類があります。特定の入力装置のみに対応したコンテンツを作成すると、他の入力装置の利用者が、操作できないことがあります。</p>
                     
                     <p>例えば、視覚に障害のある利用者は、マウスポインタの位置を把握することが困難なため、マウスではなく、キーボードだけを使う場合があります。
                        <br>また、上肢障害や手の震えにより、マウスを操作することが困難な利用者もいます。
                     </p>
                     
                     <ul>
                        
                        <li>一般的なブラウザで、以下のキーボード操作を可能にする。
                           
                           <ul>
                              
                              <li>「上矢印」「下矢印」キーによる画面スクロールを可能にする。</li>
                              
                              <li>「Tab」キーによるキーボード・フォーカスの移動を可能にする。
                                 <br>全てのリンク及び入力項目に、正しい順序で移動できるようにする。
                              </li>
                              
                              <li>キーボード・フォーカスの存在するリンクやコマンドは、「Enter」キーを押すまで、実行しない。</li>
                              
                           </ul>
                        </li>
                        
                        <li>特に、次に示す JavaScript は、マウスでの操作を前提にしているため、キーボードでの操作の可否に注意する。
                           <br>onClick、onDblClick、onMousedown、onMouseup、onMouseover、onMouseout、onDragDrop、onChange
                           <br>（例えば、onMouseoverだけで、メニューを表示する場合、キーボードの利用者は、メニュー内のリンクを選択できないことがある。）
                           
                        </li>
                        
                        <li>プラグインが改善され、キーボードでの操作性が向上する場合がある。
                           <br>最新のプラグインをインストールできるように、コンテンツ側で、配慮することが望ましい。
                        </li>
                        
                     </ul>
                     
                     <p><cite style="font-style:normal;color:#006400">『富士通ウェブ・アクセシビリティ指針 第2.0版』 © 2004 富士通株式会社</cite></p>
                  </blockquote>
                  
               </td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="description"><b>JIS関連項目</b>
                  
                  <blockquote style="margin:0px 10px 0px 20px;">
                     
                     <p><strong>5.3 操作及び入力
                           <br>a)</strong> ウェブコンテンツは，特定の単一のデバイスによる操作に依存せず，少なくともキーボードによってすべての操作が可能でなければならない。
                        <br><strong>参考</strong> マウスの操作が困難なときでも，キーボードであれば操作が可能な場合がある。
                        <br><strong>参考</strong> マウスポインタが見えない，又は見失ってしまうためにマウス操作が困難なときでも，キーボードであれば操作が可能な場合がある。
                     </p>
                     
                     <p><cite style="font-style:normal;color:#006400">JIS X 8341-3:2004『高齢者・障害者等配慮設計指針－情報機器における機器，ソフトウェア及びサービス－第三部：ウェブコンテンツ』（© 財団法人 日本規格協会）</cite></p>
                     
                  </blockquote>
                  
               </td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="description"><b>解説</b>
                  
                  <p>イベントハンドラというのは、特定のイベント（例えば、マウスが動く、キーが押される、ドキュメントが読み込まれる、など）が発生したときに起動するスクリプトのことです。イベントハンドラは、イベントハンドラの属性（"onMousedown"、"onClick"、"onKeyup"
                     など）により(X)HTMLソースコードの要素に付加されます。
                  </p>
                  
                  <p>イベントハンドラの効果は、単なる装飾的役割であることがほとんどです。例えば、テキストまたはイメージをハイライトする、あるいはWebページの色を部分的に変更する、などです。しかしながら、その他にも、イベントハンドラは重要な行為を行うことがあります。フォームの入力内容をチェックする、ロールオーバーのメニューを表示する、新しいウィンドウを開く、といったものです。
                     <br>こういったケースのすべてにおいて、提供するコンテンツを変化させたり、ナビゲーションの選択肢を変化させたりする場面では、イベントハンドラは、支援技術や一部の技術を使用しているユーザーにも同じ変化を提供できるようにアクセシブルでなければなりません。
                  </p>
                  
                  <p>もし、イベントハンドラが特定のデバイスのみに関連したものである場合（例えば、マウスに関連している "onMouseover"）、マウスを使っていないユーザーはイベントハンドラによる効果を経験することができません（例えば、運動障害のあるユーザー、あるいは自動車を運転しながら車載PCでWebサイトを見ている人）。</p>
                  
                  <p>W3CのWCAG 1.0によれば、
                     <strong>デバイス非依存</strong>というのは、以下のようなことを指します。
                     <a>&amp;url_wcag;#device-independent&amp;wcag;</a>):
                  </p>
                  
                  <blockquote>ユーザーは、自分のニーズに応じて選択した入力および出力デバイスを使って、ユーザーエージェント（および、ユーザーエージェントがレンダリングするドキュメント）を操作できなけれなりません。入力デバイスには、ポインティング・デバイス（マウスなど）、キーボード、点字入力デバイス、ヘッドセット装置、マイクロホン、その他があります。出力デバイスとしては、モニタ、音声合成装置、および点字ピンディスプレイなどが挙げられます。</blockquote>
                  
               </td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="description"><b>JIS X 8341-3について</b>
                  
                  <p>JIS X 8341-3 の内容は、以下のサイトにて規格番号「X8341-3」で検索して、規格票をご覧ください。</p>
                  
                  <ul style="margin:0px 0px 0px 10px;">
                     
                     <li><strong>閲覧</strong>：日本工業標準調査会（JISC）
                        <br>http://www.jisc.go.jp/
                     </li>
                     
                     <li><strong>購入</strong>：日本規格協会（JSA Web Store）
                        <br>http://www.webstore.jsa.or.jp/
                     </li>
                     
                  </ul>
                  
               </td>
            </tr>
         </table>
      </div>
   </body>
</html>